|
  需求说明 单击我要发贴，弹出发贴界面 在标题框中输入标题，选择所属版块，输入帖子内容 单击“发布”按钮，新发布的帖子显示在列表的第一个，新帖子显示头像、标题、版块和发布时间 使用数组保存发帖者的头像 使用函数floor( )和random( )随机获取发帖者的头像 使用appendChild ( )把头像、标题、版块、时间插入到页面中 设置value值为空来清空当前输入框中的内容 使用style属性隐藏发新贴界面
我要发帖
所属版块：请选择版块电子书籍新课来了新手报到职业规划
function fa() {
document.getElementById("post1").style.display = "block";
}
function touxiang() {
var tou = new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg");
var sui = parseInt(Math.random() * 4);
return tou[sui];
}
function chu() {
document.getElementById("post1").style.display = "none";
var s = document.getElementsByTagName("ul")[0];
var a = document.createElement("li");
var b = document.createElement("div");
var c = document.createElement("img");
var d = document.createElement("h1");
var e = document.createElement("p");
var f = document.createElement("span");
s.appendChild(a);
a.className = ".bbs section ul li";
a.appendChild(b);
b.className = ".bbs section ul li div";
b.appendChild(c);
c.className = ".bbs section ul li div img";
c.src = "images/" + touxiang();
a.appendChild(d);
d.className = ".bbs section ul li h1";
d.innerHTML = document.getElementById("title").value;
a.appendChild(e);
e.className = ".bbs section ul li p";
e.innerHTML = "版块：" + document.getElementsByTagName("select")[0].value;
e.appendChild(f);
f.className = ".bbs section ul li p span";
var today = new Date();
var nian = today.getFullYear();
var yue = today.getMonth() + 1;
var ri = today.getDate();
var shi = today.getHours();
var fen = today.getMinutes();
var miao = today.getSeconds();
f.innerHTML = "发表时间：" + nian + "-" + yue + "-" + ri + ";" + shi + ":" + fen + ":" + miao;
document.getElementById("title").value = "";
document.getElementsByTagName("select")[0].value = "";
s.insertBefore(a, s.firstElementChild);
}
*{margin: 0; padding: 0; font-family: "Arial", "微软雅黑";}
ul,li{list-style: none;}
.bbs{margin: 0 auto; width: 600px; position: relative;}
header{padding: 5px 0; border-bottom: 1px solid #cecece;}
header span{display:inline-block; width: 220px; height: 50px; color: #fff; background: #009966; font-size: 18px; font-weight: bold; text-align: center;line-height: 50px; border-radius: 8px; cursor: pointer;}
.post{position: absolute; background: #ffffff; border: 1px #cccccc solid; width: 500px; left: 65px; top:70px; padding: 10px; font-size: 14px; z-index: 999999; display: none;}
.post .title{width: 450px; height:30px; line-height: 30px; display: block; border: 1px #cecece solid; margin-bottom: 10px;}
.post select{width: 200px; height: 30px;}
.post .content{width: 450px; height: 200px; display: block; margin: 10px 0;border: 1px #cecece solid;}
.post .btn{width: 160px; height: 35px; color: #fff; background: #009966; border: none; font-size: 14px; font-weight: bold; text-align: center; line-height: 35px; border-radius: 8px; cursor: pointer;}
.bbs section ul li{padding: 10px 0; border-bottom: 1px #999999 dashed;
overflow: hidden;}
.bbs section ul li div{float: left; width: 60px; margin-right: 10px;}
.bbs section ul li div img{ border-radius:50%; width: 60px;}
.bbs section ul li h1{float: left; width: 520px; font-size: 16px; line-height: 35px;}
.bbs section ul li p{color: #666666; line-height: 25px; font-size: 12px; }
.bbs section ul li p span{padding-right:20px;}
因为是四张图片随机产生，数组下标我取得是0-3；如果是多张，用Math方法时后边乘以几就行了。
|