js模拟论坛发帖

最新推荐文章于 2022-03-25 01:45:20 发布

#不许人间见白头#

最新推荐文章于 2022-03-25 01:45:20 发布

阅读量1.1k

点赞数 2

文章标签： js

本文链接：https://blog.csdn.net/weixin_45936406/article/details/107648718

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

模拟论坛发帖

<html>
	<head>
		<title>论坛发帖</title>
		<style type="text/css">
			.content{
				width:520px;
				/*border:1px solid pink;*/
			}
			#txt1{
				width:600px;
				padding-left:5px;
				padding-bottom:5px;
				border-bottom:1px solid gray;
			}
			#txt2{
				width:500px;
				border:1px solid gray;
				padding-left:5px;
				margin-left:50px;
				margin-top:10px;
				display:none;
				position:absolute;
				background:white;
			}
			#txt1 #btn1{
				background:#3CB371;
				color:white;
				width:300px;
				font-size:25px;
				border-color:#3CB371;
			}
			#txt2 #btn2{
				background:#3CB371;
				color:white;
				width:120px;
				border-color:#3CB371;
			}
			img{
				border-radius:50%;
			}
		</style>
		<script type="text/javascript">
			function fatei(){
				document.getElementById("txt2").style.display="block";
				
			}
			var i=1;
			function fabu(){
				var biaoti=document.getElementById("biaoti").value;
				//var selects=document.getElementsByTagName("select");
				var selec=document.getElementById("selec").value;
				var txtara=document.getElementById("txtara").value;
				var txt3=document.getElementById("txt3");
				
				if(i<=4){
					var html="<br>"+"<img src='images/tou0"+i+".jpg'>"+"<br>";
					i++;
					if(i>4){
						i=1;
					}
					html+=biaoti+"<br>";
					//txt3.innerHTML +="";
					html+=txtara+"<br>";
					/*for(var j=0;j<=selects.length;j++){
						html+="版本："+selects[j].value ;
					}*/
					html+="版本："+selec+"&nbsp;&nbsp;";
					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();
					var second=date.getSeconds();
					html+="发表时间："+year+"年"+month+"月"+day+"日"+hour+":"+minute+":"+second;
					//document.write("<br>");
					txt3.innerHTML +=html+"<hr>";
				}
				document.getElementById("txt2").style.display="none";
				
			}
		</script>
	</head>
	
	<body >
		<div class="content">
			<div id="txt1">
				<input type="button" id="btn1" value="我要发帖" onclick="fatei()">
			</div>
			<div id="txt2">
				
				<input type="text" name="name" placeholder="请输入标题(1-50个字符)" id="biaoti"><br><br>
				所属板块：
				<select id="selec">
					<option>新课来了</option>
					<option>98K</option>
					<option>M24</option>
					<option>安其拉</option>
					<option>鲁班七号</option>
					<option>赵云</option>
				</select><br><br>
				<textarea rows="10" cols="60" id="txtara">
				</textarea>
				<br><br>
				<input type="button" id="btn2" value="发布" onclick="fabu()">
			</div>
			<div id="txt3">
			
			</div>
		</div>
	</body>
</html>

总体效果图
随机头像

随机头像

#不许人间见白头#

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
js模拟论坛发帖

模拟论坛发帖<html> <head> <title>论坛发帖</title> <style type="text/css"> .content{ width:520px; /*border:1px solid pink;*/ } #txt1{ width:600px; padding-left:5px; padding-bottom:5px; border-bottom
复制链接

扫一扫