使用JS制作论坛发帖

最新推荐文章于 2024-03-21 14:06:11 发布

`Wᴀɪᴛ.`

最新推荐文章于 2024-03-21 14:06:11 发布

阅读量1.5k

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_63112037/article/details/126590842

版权

本文介绍了如何使用JavaScript实现论坛发帖功能，包括点击发帖按钮弹出页面、输入标题和内容、选择版块，以及发布后新帖子的展示方式。通过数组保存头像，用随机函数选取，并利用appendChild将信息插入页面，同时提供清空输入框和隐藏发帖界面的功能。

摘要由CSDN通过智能技术生成

需求说明:

①单击我要发帖，弹出发帖页面
②在标题框中输入标题，选择所属版块，输入帖子内容
③单击“发布”按钮，新发布的帖子显示在列表的第一个，新帖子显示头像、标题、版块和发布时间

实现思路:

①使用数组保存发帖者的头像
②使用函数floor( )和random( )随机获取发帖者的头像
③使用appendChild ( )把头像、标题、版块、时间插入到页面中
④设置value值为空来清空当前输入框中的内容
⑤使用style属性隐藏发新贴界面

以下就是实现的代码:

CSS代码:

            ul{
				list-style: none;
			}
			.wrapper{
				width: 700px;
				height: 500px;
				/* border: 1px solid black; */
				margin: 0 auto;
				position: relative;
			}
			.post,.send{
				text-align: center;
				background-color:lightgreen;
				border-radius: 10px;
				border: none;
				color: white;
				font-weight: 800;
			}
			.post{
				width: 200px;
				line-height: 50px;
				font-size: 20px;
			}
			.line{
				width: 100%;
				height: 0;
				border-bottom: 1px solid lightgray;
				margin: 10px 0;
			}
			
			.form{
				width:560px;
				padding: 15px;
				b

最低0.47元/天解锁文章