html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./index.css"/>
</head>
<body>
<button type="button" id="ft" onclick="FaTie()">我要发贴</button>
<ul class="main">
</ul>
<form action="" method="post" name="from" id="form">
<input placeholder="请输入标题(1~50个字符)"/>
<br>
<span>所属板块:</span>
<select id="DuoXuan">
<option value="请输入板块">请选择板块</option>
<option value ="电子书籍">电子书籍</option>
<option value ="儿童动画">儿童动画</option>
<option value ="都市爱情">都市爱情</option>
<option value ="乡村趣事">乡村趣事</option>
</select>
<br>
<textarea rows="" cols="" id="text"></textarea>
<br>
<button type="button" onclick="FaBu()" >发布</button>
</form>
</body>
<script src="./index.js" type="text/javascript" charset="utf-8"></script>
</html>
图片资源这里没有放,可以自己更改图片地址
js
function FaTie(){
var zz=document.getElementsByTagName('form')[0];
zz.style.display='block'
}
function FaBu(){
var fb=document.getElementsByTagName('form')[0];
fb.style.display='none';
var title=fb.firstElementChild.value;//莫名会失效,若失效则重新写一编
//获取下拉框的值
var index=document.getElementById('DuoXuan').selectedIndex;//获取当前索引
var DuoXuan_=document.getElementById('DuoXuan').options[index].value;//当前索引的value值
//读取ul
var ul_=document.getElementsByTagName('ul')[0];
//增加元素li
var li_=document.createElement('li');
//把li放到ul里面,并且每一次放入都在前一次的上面
ul_.insertBefore(li_,ul_.firstElementChild);
//增加元素img
var img_=document.createElement('img');
//增加img的地址,用随机数字控制头像
if(Math.random()<0.3){
img_.setAttribute('src','../img/dog.jpg');
}else if(Math.random()<0.3&&Math.random()<0.7){
img_.setAttribute('src','../img/mai.jpg');
}else{
img_.setAttribute('src','../img/hai.jpg');
}
//增加三个span元素
var span_1=document.createElement('span');
var span_2=document.createElement('span');
var span_3=document.createElement('span');
//把img和三个span依次放入li
li_.appendChild(img_);
li_.appendChild(span_1);
li_.appendChild(span_2);
li_.appendChild(span_3);
//增加删除键
var del=document.createElement('button');
del.innerHTML="删除";
li_.appendChild(del);
del.onclick=function(){
del.parentNode.parentNode.removeChild(del.parentNode)
}
//把表单里面的值赋值给外面的span_1和span_2
span_1.innerHTML=title;
span_2.innerHTML="板块:"+DuoXuan_;
//获取时间
var data=new Date();
var nian=data.getFullYear();
var yue=data.getMonth();
var ri=data.getDate();
var shi=data.getHours();
var fen=data.getMinutes();
var miao=data.getSeconds();
var xingqi=data.getDay();
miao<10?miao="0"+miao:miao;
fen<10?fen="0"+fen:fen;
//把时间赋值给span3
span_3.innerHTML="发表时间:"+nian+"-"+yue+"-"+ri+" "+shi+":"+fen+":"+miao;
//每发布一次便清空表单里面的内容
fb.firstElementChild.value="";//清空标题
//清空下拉框
document.getElementById('DuoXuan').value=document.getElementById('DuoXuan').options[0].value;//当前索引的value值
//清空文本框
document.getElementById('text').value="";
}
css
*{
margin: 0;
padding: 0;
list-style: none;
}
#ft{
width: 200px;
height: 50px;
background-color: darkcyan;
color: #FFFFFF;
font-size: 20px;
font-weight: 700;
border: 0;
border-radius: 10px;
position: absolute;
top: 50px;
left: 30px;
}
#ft:hover{
background-color: darkgreen;
}
.main{
position: absolute;
width: 500px;
top:110px ;
left: 30px;
border-top: #999999 2px solid;
}
.main li{
width: 500px;
height: 100px;
padding:15px 0 15px 0;/* 内边距会使盒子撑大 */
box-sizing: border-box;/* 使盒子自动计算减去内边距 */
border-bottom: #999999 2px dashed;/*虚线*/
position: relative;
}
.main li img{
width: 65px;
height: 65px;
border-radius: 65px;
}
.main li span:nth-child(2){
display: block;
margin-top: -65px;
margin-left: 90px;
font-size: 18px;
font-weight: 700;
}
.main li span:nth-child(3),span:nth-child(4){
position: absolute;
top: 55px;
left: 90px;
font-size: 14px;
color: #999999;
}
.main li span:nth-child(4){
left: 230px;
}
.main button{
position: absolute;
right: 0px;
top: 35px;
width: 50px;
height: 30px;
}
#form{
border: #666666 1px solid;
width:500px ;
height: 400px;
position: absolute;
top: 100px;
left: 200px;
padding-left: 30px;
padding-top: 20px;
display: none;
background-color: #FFFFFF;
}
#form input{
width: 450px;
height: 30px;
}
#form select{
width: 170px;
height: 30px;
margin-top: 15px;
}
#form textarea{
width: 450px;
height: 230px;
margin-top: 15px;
}
#form button{
margin-top: 15px;
height: 40px;
width: 150px;
background-color: #008B8B;
color: #FFFFFF;
font-weight: 700;
font-size: 16px;
border: none;
border-radius: 5px;
}