使用JS制作论坛发帖

需求说明:

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

实现思路:

①使用数组保存发帖者的头像
②使用函数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;
				box-sizing: border-box;
				border: 1px solid lightgray;
				display: none;
				position: absolute;
				left:140px;
				background-color: #fff;
			}
			.form input{
				width: 85%;
				height: 30px;
				font-size: 18px;
			}
			
			.form select{
				width: 200px;
				height: 35px;
				margin: 20px 0;
			}
			.form textarea{
				width: 85%;
				height: 200px;
			}
			.send{
				width:150px;
				line-height: 35px;
				font-size: 18px;
			}
			ul li{
				display: flex;
			}
			ul li img{
				margin-right: 20px;
				border-radius: 50%;
			}

 HTML代码:

			我要发帖
			

			

				

				所属板块:
				
					请选择板块
					电子书籍
					新客来了
					新手报到
					职业规划
				

				
				发布按钮
			
			

				

					
					

						
发布发不发
						
板块:新课来了   发表时间:2022-8-11 11:4
					
				
			
		

JS代码: