纯js实现论坛发帖

论坛发帖效果如图所示：

 

 

需求说明：
单击我要发贴，弹出发贴界面
在标题框中输入标题，选择所属版块，输入帖子内容
单击“发布”按钮，新发布的帖子显示在列表的第一个，新帖子显示头像、标题、版块和发布时间
使用数组保存发帖者的头像
使用函数floor( )和random( )随机获取发帖者的头像
使用style属性隐藏发新贴界面

话不多说上代码！

HTML

<div class="wrapper">
		<button class="post">我要发帖</button>
		<i></i>
		<div class="box">
			<input type="text" placeholder="请输入标题（1-50个字符）">
			<div>
				所属版块：
				<select>
					<option value="section">请选择版块</option>
					<option value="book">电子书籍</option>
					<option value="lesson">新课来了</option>
					<option value="newbie">新手报到</option>
					<option value="career">职业规划</option>
				</select>
			</div>
			<textarea></textarea>
			<button class="send">发布</button>
		</div>
		<ul></ul>
</div>

CSS

<style>
		* {
			margin: 0;
			padding: 0;
		}

		.wrapper {
			width: 700px;
			margin: 0 auto;
		}

		.wrapper .post {
			width: 200px;
			height: 50px;
			border-radius: 10px;
			background-color: seagreen;
			color: white;
			font-size: 20px;
			font-weight: 600;
		}

		.wrapper i {
			display: inline-block;
			width: 100%;
			height: 1px;
			background-color: lightgray;
		}

		.wrapper .box {
			width: 600px;
			border: 2px solid lightgray;
			margin: 10px 33px;
			padding: 10px 15px;
			display: none;
			position: absolute;
			background-color: #fff;
		}

		.wrapper .box input {
			width: 90%;
			height: 30px;
		}

		.wrapper .box>div {
			margin: 10px 0;
		}

		.wrapper .box>div select {
			width: 200px;
			background-color: #fff;
		}

		.wrapper .box textarea {
			width: 90%;
			height: 200px;
		}

		.wrapper .box .send {
			width: 150px;
			height: 30px;
			border-radius: 8px;
			background-color: seagreen;
			color: white;
			font-weight: 600;
			margin-top: 10px;
		}

		.wrapper ul li {
			display: flex;
			border-bottom: 2px dotted lightgray;
			padding: 10px;
			line-height: 50px;
		}

		.wrapper ul li img {
			border-radius: 50%;
			margin-right: 15px;
		}

		.wrapper ul li p {
			color: gray;
		}
</style>

JS

<script>
		//我要发贴
		var _post = document.querySelector(".post");
		//输入框盒子
		var _box = document.querySelector(".box");
		//发布
		var _send = document.querySelector(".send");
		//标题
		var _input = document.querySelector(".box input");
		//版块
		var _select = document.querySelector(".box select");
		//评论列表
		var _ul = document.querySelector("ul");
		_post.onclick = function() {
			_box.style.display = "block";
		}
		_send.onclick = function() {
			//1、获取标题
			var title = _input.value;
			// 2、选中的版块
			var index = _select.selectedIndex;
			var option = _select.options[index];
			var category = option.innerText;

			//图片处理
			var imgs = ["./img/tou01.jpg", "./img/tou02.jpg", "./img/tou03.jpg", "./img/tou04.jpg"];
			var randomIndex = Math.floor(Math.random() * 4);

			//3、创建li
			var _li = document.createElement("li");
			_li.innerHTML = `
				  <img src="${imgs[randomIndex]}" alt="">
				  <div>
				    <h3>${title}</h3>
				    <p>板块:${category}&emsp;&emsp;发表时间:${getTimes()}</p>
				  </div> `
				   
            //4、在ul里插入li
			_ul.insertBefore(_li,_ul.firstElementChild);
				
			//5、发布之后隐藏box
			_box.style.display = "none";
		}
		//时间函数
		function getTimes(){
			var date=new Date();
			var year=date.getFullYear();
			var month=date.getMonth()+1;
			var day=date.getDate();
			var hour=date.getHours();
			var minute=date.getMinutes();
				
			return `${year}-${month}-${day}&emsp;${hour}:${minute}`
		}
</script>

代码如上。