js节点，我要发贴示例

不~古
已于 2022-08-11 19:39:32 修改
阅读量203
点赞数
文章标签： css html css3
于 2022-08-11 15:07:00 首次发布
本文链接：https://blog.csdn.net/m0_71491195/article/details/126285704
版权
效果图片：
全部代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style: none;
			}

			#box {
				width: 600px;
				margin: 0 auto;
				position: relative;
			}

			#btn1,
			#btn2 {
				margin: 10px;
				width: 200px;
				height: 50px;
				line-height: 50px;
				font-size: 20px;
				color: white;
				border: none;
				border-radius: 20px;
				background-color:seagreen;
			}

			#box ul {
				margin-top: 10px;
				border-top: 1px solid lightgrey;
			}

			.content {
				display: none;
				position: absolute;
				top: 100px;
				left: 100px;
				width: 500px;
				height: 350px;
				background-color: white;
				border: 1px solid darkgrey;
			}

			.content>input:nth-of-type(1) {
				margin: 20px;
				width: 80%;
				text-indent: 10px;
				font-size: 18px;
			}
			#opt{
				font-size: 18px;
			}

			#te {
				margin: 10px;
			}

			#alltex>li>div {
				float: left;
			}

			#alltex>li>div>img {
				width: 60px;
				border-radius: 50%;
			}
			#alltex>li{
				height: 60px;
				padding-bottom: 10px;
				border-bottom: 1px dashed lightgrey;
			}
			#alltex>li>h4{
				margin:10px 0px 20px 70px;
			}
			#alltex>li>span{
				font-size: 14px;
				color:grey;
				margin-left:10px;
			}
			#alltex>li>span:nth-of-type(2){
				margin-left: 70px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<button id="btn1">我要发贴</button>
			<ul id="alltex">
			</ul>
			<div class="content">
				<input type="text" placeholder="请输入标题（1-15个字符）" id="ipt" value=""><br>
				&nbsp;&nbsp;&nbsp;&nbsp;所属板块：<select name="" id="opt">
					<option value="">请选择板块</option>
					<option>电子书籍</option>
					<option>新课来了</option>
					<option>新手报到</option>
					<option>职业规划</option>
				</select>
				<textarea name="tex" id="te" cols="55" rows="11"></textarea>
				<button id="btn2" onclick="basicOperation()">我要发布</button>
			</div>
		</div>
		<script>
			var _btn1 = document.getElementById("btn1");
			// 获取点击发布按钮
			var _content = document.querySelector(".content");

			// var _content = document.getElementsByClassName("content");
			_btn1.onclick = function() {
				_content.style.display = "block";
			}
			// onclick点击事件，点击显示发布框#content中的内容


			function basicOperation() {
				// 创建函数基本操作
				_content.style.display = "none";
				// 隐藏发布框#content中的内容
				var _ipt = document.getElementById("ipt");
				// 获取#ipt
				var _alltex = document.getElementById("alltex");
				// 获取#alltex
				var newLi = document.createElement("li");
				// 创建<li>标签
				_alltex.insertBefore(newLi, _alltex.firstChild);
				// 添加<li>标签，使其始终是#alltex第一个孩子的位子
				var _tu = document.createElement("div");
				// 创建<div>标签
				newLi.appendChild(_tu);
				// 添加到上面创建的<li>标签中
				var img = ['../img/01.jpeg', "../img/02.jpeg", "../img/03.jpeg", "../img/04.jpeg"];
				// 创建数组存放图片
				var index = Math.floor(Math.random() * 4);
				// 任意下标0，1，2，3
				var imgs = img[index];
				// 随机图片
				_tu.innerHTML = `<img src='${imgs}'>`;
				// 把图片放到<li>标签里的<div>中
				var _hhh = document.createElement("h4")
				newLi.appendChild(_hhh);
				_hhh.innerText = _ipt.value;
				// 获取input中输入的值
				var _span1 = document.createElement("span");
				// 创建<span>标签
				newLi.appendChild(_span1);
				var _opt = document.getElementById("opt")
				_span1.innerText = "所属板块：" + _opt.value;
				// 把option中的值存放到了<li>中的<span>标签中;
				var _span2 = document.createElement("span");
				// 创建第二个<span>标签
				newLi.appendChild(_span2);
				_span2.innerText=getTime();
				//将获取的时间存放在<li>中的第二个<span>标签中 
			}
			// 获取时间
			function getTime(){
				date = new Date();				 
								_year = date.getFullYear();		 
								// 获取年分，下同
								_month = date.getMonth() + 1;
								if (_month < 10) {
									_month = "0" + _month;
								}
								// 获取月份
								_days = date.getDate();
				 
								if (_days < 10) {
									_days = "0" + _days;
								}
								// 获取日
								// 如果月数、日期小于10,数字前加上0；下同
								_day = date.getDay();			 
								// _day获得的值是0-6
								if (_day == 0) {
									_day = `星期日`;
								} else if (_day == 1) {
									_day = `星期一`;
								} else if (_day == 2) {
									_day = `星期二`;
								} else if (_day == 3) {
									_day = `星期三`;
								} else if (_day == 4) {
									_day = `星期四`;
								} else if (_day == 5) {
									_day = `星期五`;
								} else {
									_day = `星期六`;
								}
				 
								_hours = date.getHours();
								_minutes = date.getMinutes();
				 
								if (_minutes < 10) {
									_minutes = "0" + _minutes
								}
								_seconds = date.getSeconds();
								if (_seconds < 10) {
									_seconds = "0" + _seconds;
								}
								if (_hours < 10) {
									_hours = "0" + _hours;
								}
								if (_hours <= 12) {
									_today = `发布时间是 ${_year}年${_month}月${_days}号 ${_day} ${_hours}:${_minutes}:${_seconds} am`;
								} else {
									_hours -= 12;
									// 转化输入12时制
									if (_hours < 10) {
										_hours = "0" + _hours;
									}
									_today = `发布时间是 ${_year}年${_month}月${_days}号 ${_day} ${_hours}:${_minutes}:${_seconds} pm`;
								}
								// 上午输出am，下午输出pm;
						return	_today;	
						// 返回输出值
			}
		</script>
	</body>
</html>