HTML+CSS+JS实现论坛发帖效果

html部分代码如下：

<div class="wrapper">
			<div class="one">
				<button type="button" onclick="fatie()">我要发帖</button>
			</div>
			<hr>

			<div class="second">
				<p> <input type="text" name="" id="" value="" placeholder="请输入标题（0-50个字）" /></p>
				<p>所属板块：
					<select>
						<option value="1">请选择所属板块</option>
						<option value="2">新课来了</option>
						<option value="3">电子书籍</option>
						<option value="4">新手报道</option>
						<option value="5">职业规划</option>
					</select>
				</p>
				<p><textarea rows="10" cols="20"></textarea></p>


				<button type="button" onclick="fabu()">发布</button>
			</div>
			<div class="msg">
				<ul>
				</ul>
			</div>
		</div>

css部分代码如下：

	<style type="text/css">
			.wrapper {
				width: 400px;
				height: 400px;
				margin: 0 auto;
			}

			button {
				width: 170px;
				height: 40px;
				background-color: mediumseagreen;
				color: white;
				border-radius: 5px;
				border: none;
				font-weight: bold;
				margin-left: 115px;
			}

			p {
				margin-top: 6px;
			}

			.second {
				border: 1px solid lightgrey;
				padding: 0 8px 8px;
				display: none;
			}

			hr {
				margin: 5px 0 5px;
				background-color: lightgrey;
			}
input{
width:350px;
height:30px;
border:1px solid lightgrey;
}
textarea{
width:350px;
outline:none;
border:1px solid lightgrey;
}
select{
width:150px;
height:30px;
border:1px solid lightgrey;
outline:none;
}
			img {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				margin-top: 10px;
				margin-right: 5px;
			}

			.a {

				font-weight: bold;
			}

			.a span {
				font-size: 12px;
				color: black;
				margin-right: 8px;
				font-weight:300;
			}

			li {
				overflow: hidden;
				border-bottom: 1px dashed #AAAAAA;
			}
		</style>

js部分代码如下：

<script type="text/javascript">
			var _second = document.querySelector(".second")
			var _msg = document.querySelector(".msg")

			function fatie() {
				_second.style.display = "block"
				_msg.style.display = "none"
			}

			function fabu() {
				_second.style.display = "none"
				_msg.style.display = "block"
				var _input = document.querySelector("input");
				var _select = document.querySelector(".second>p>select");
				var _ul = document.querySelector(".msg>ul");
				var title = _input.value;
				var selectOption = _select.options[_select.selectedIndex];
				var bankuai = selectOption.innerText;
				var _li = document.createElement("li");
				var imgs = ['images/10003.jpg', 'images/10005.jpg', 'images/10008.jpg', 'images/10004.gif','images/10010.jpg']
				var imgIndex = parseInt(Math.random() * 5);
				var now = new Date(); 
				var year = now.getFullYear(); 
				var month = now.getMonth() + 1; 
				var day = now.getDate();
				var hours = now.getHours(); 
				var minutes = now.getMinutes(); 

				_li.innerHTML = `<div class="fl">
									<img src=${imgs[imgIndex]} >
								</div>
								
								<div class="fl a">
									<p>${title}</p>
									<p><span>板块：${bankuai}</span><span>发表时间:${year}-${month}-${day} ${hours}:${minutes}</span></p>
								</div>`
				_ul.insertBefore(_li, _ul.firstElementChild);
				
			}
		</script>

有问题可以留言或私信