用js做一个简单的论坛发布

效果如图

用js做一个简单的论坛发布_第1张图片

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			.wrapper{
				width: 833px;
				height: 636px;
				padding: 10px 20px;
				position: relative;
			}
			.Posting, .fb{
				width: 270px;
				line-height: 60px;
				text-align: center;
				font-size: 26px;
				color: white;
				border: 0;
				border-radius: 20px;
				background-color: #009966;
			}
			.box{
				width: 656px;
				border: 1px solid #cccccc;
				padding: 10px;
				position: absolute;
				left: 110px;
				z-index: 100;
				background-color: white;
			}
			.sr{
				width: 563px;
				height: 40px;
				border: 1px solid #cccccc;
				outline: none;
				margin-bottom: 20px;
			}
			.sct{
				width: 251px;
				height: 40px;
				margin-bottom: 20px;
			}
			.fb{
				margin-top: 20px;
				border-radius: 20px;
			}
			.line{
				height: 80px;
				padding: 20px 0;
				border-bottom: 1px dashed #999999;
			}
			.line h3{
				height: 25px;
			}
			.line img{
				width: 80px;
				border-radius: 40px;
			}
			.line>div{
				float: left;
			}
			.line>div:nth-of-type(2){
				margin-top: -12px;
				margin-left: 10px;
				color: #666666;
			}
			.plate{
				margin-right: 20px;
			}
		style>
	head>
	<body>
		<div class="wrapper">
			<div >
				<button class="Posting">我要发贴button>
				
			div>
			<hr>
			<div class="box" style="display: none;" >
				<input type="text" class="sr" placeholder="请输入标题(1~50个字符)"><br>
				<span>所属板块:span>
				<select name="" class="sct">
					<option value="请选择板块">请选择板块option>
					<option value="电子书籍">电子书籍option>
					<option value="新课来了">新课来了option>
					<option value="新手报到">新手报到option>
					<option value="职业规划">职业规划option>
				select><br>
				<textarea name="" id="" cols="30" rows="10">textarea>
				<div><button class="fb">发布button>div>
			div>
			<div class="box2">
				
			div>
		div>
		
		
		<script>
			// 获取我要发帖按钮
			var _Posting=document.querySelector(".Posting");
			// 获取发帖的窗口
			var _box=document.querySelector(".box")
			console.log(_box);
			// 设置发帖按钮点击事件
			_Posting.onclick=function(){
				// 点击发帖后显示发帖窗口
				_box.style.display="block";
			}
			
			// 获取我要发布按钮
			var _fb=document.querySelector(".fb");
			// 获取发布之后出现的盒子
			var _box2=document.querySelector(".box2")
			// 给发布按钮添加点击事件
			_fb.onclick=function(){
				// 获取标题标签
				var _sr=document.querySelector(".sr");
				// 获取select标签
				var _sct=document.querySelector(".sct");
				// 设置一个1-4的随机数
				var tx=Math.floor(Math.random()*4)+1;
				// 发布窗口消失
				_box.style.display="none";
				// 获取时间
				var date=new Date();
				var n=date.getFullYear();  //年
				var y=date.getMonth()+1;  //月
				var r=date.getDate();   //日
				var x=date.getDay();    //星期
				var s=date.getHours();   //时
				var f=date.getMinutes();  //分
				var m=date.getSeconds();  //秒
				// 判断时分秒小于10的时候 显示01:07:03
				if(s<10){
					s="0"+s;
				}
				if(f<10){
					f="0"+f;
				}
				if(m<10){
					m="0"+m;
				}
				// 更改发布后盒子里的内容
				_box2.innerHTML=`
${tx}.jpg" alt="">

${_sr.value}

板块:${_sct.value} 发表时间:${n}-${y}-${r}${s}:${f}
`
+_box2.innerHTML // 把发帖窗口的题目清空 _sr.value=""; }
script> body> html>

注意:里面的img需要自己添加图片,修改路径

你可能感兴趣的:(js学习,javascript,前端,css)