用js写留言板

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin:0px;
			padding: 0px;
			font-size: 12px;
		}
		.tie{
			width: 70px;
			height: 30px;
			background:pink;
			border-radius: 10%;
		}
		.an{
			width: 70px;
			height: 30px;
			background:pink;
			border-radius: 10%;
		}
		.allFather{
			position: fixed;
			left: 250px;
			top: 0px;
			border:1px solid gray;
			width: 300px;
			height: 300px;
		}
		.wenb{
			width: 260px;
			height:25px;
			margin-top: 10px;
			margin-left: 10px;
			color: gray;
		}
		.two{
			margin-top: 10px;
			margin-left: 10px;
		}
		.jj{
			width: 120px;
			height: 25px;
		}
		.kk{
			margin-top: 10px;
			margin-left: 10px;
			width: 260px;
		}
		.an{
			margin-top: 10px;
			margin-left: 10px;
		}
	</style>
</head>
<body>
	<button class="tie">我要发帖</button>
	<ul class="items"></ul>
	<div class="allFather" style="display: none;">
		<input type="text" value="请输入标题(1-60个字符)" class="wenb">
		<div class="two">
			所属板块
			<select name="" id="wyd" class="jj">
				<option value="">英雄联盟</option>
				<option value="">穿越火线</option>
				<option value="">qq飞车</option>
				<option value="">地下城与勇士</option>
				<option value="">逆战</option>
			</select>
		</div>
		<textarea name="" id="" cols="30" rows="10" class="kk"></textarea>
		<button "cz()" class="an">发布</button>
	</div>
</body>
	<script type="text/javascript">
	//点击时使发帖界面显示
	var tie = document.getElementsByClassName('tie')[0];
		tie.onclick = function(){
			document.getElementsByClassName('allFather')[0].style.display = "block";
		}
		//获得节点上传
		var bt = document.getElementsByClassName("wenb")[0];//获得标题
		var bk = document.getElementById('wyd');//获得板块
		var jio = document.getElementsByClassName('kk')[0];//获得多行文本框内容
		var time = new Date();//获得时间
		var nian = time.getFullYear();//获得年份
		var dt = time.getMonth();//获得月份
		var r = time.getDate();//获得日期
		var shi = time.getHours();//获得小时
		var fen = time.getMinutes();//获得分钟
		//实现上传
		var items = document.getElementsByClassName('items')[0];//获得ul的节点属性
		//实现创造新节点
		//焦点聚集事件
		bt.onfocus = function(){
				bt.value = "";
			}
		function cz(){
			//先创建li的节点
			var Li = document.createElement('li');
			//然后插入到ul中
			items.appendChild(Li);
			Li.style.listStyle = "none";
			//创建图片
			var img = document.createElement('img');
			Li.appendChild(img);//在li中插入图片

			var isz = ['../images/sdg.jpg','../images/dfggfhs.jpg'];//一个图片的数组
			var index = Math.floor(Math.random()*2);
			img.style.width = "50px";
			img.style.height = "50px";
			img.style.borderRadius = "50%";
			img.setAttribute('src',isz[index]);


			//创建图片右边内容的大盒子
			var hfather = document.createElement('div');
			Li.appendChild(hfather);//插入大盒子
			//实现盒子左浮动
			hfather.style.display = "inline-block";


			//创建标题
			var libt = document.createElement('p');
			hfather.appendChild(libt);
			libt.style.fontSize = "20px";
			libt.style.color = "black";
			libt.style.fontWeight = "bloder";
			libt.style.marginBottom = "5px";
			libt.innerHTML = bt.value;//填充内容


			//创建板块
			var text = "";
			 for(i = 0;i < bk.length; i++) {//下拉框的长度就是它的选项数.

           		if(bk[i].selected == true) {

            		text = bk[i].innerHTML;//获取当前选择项的值.

　　　　　　	}

　　　　　　}
			var bkl = document.createElement('span');
			hfather.appendChild(bkl);
			bkl.style.color = "gray";
			bkl.innerHTML = "板块:" +  text;
			console.log(bkl.innerHTML);

			//创建时间板块
			var tbk  = document.createElement('span');
			hfather.appendChild(tbk);
			tbk.style.marginLeft = "15px";
			tbk.style.color = "gray";
			tbk.innerHTML = "发表时间:" + nian + "-" + (dt+1) + "-" + r  + "&nbsp;" + shi + ":" + fen;



			document.getElementsByClassName('allFather')[0].style.display = "none";
			bt.value = "请输入标题(1-60个字符)";
			jio.value = "";
			bk[0].selected = true;
		}
		
	</script>
</html>
猜你喜欢
