<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>论坛列表</title>
<link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
<header><span>我要发帖</span></header>
<section>
<ul></ul>
</section>
<div class="post">
<input class="title" placeholder="请输入标题(1-50个字符)">
所属版块:<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
<textarea class="content"></textarea>
<input class="btn" value="发布">
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bbs.js"></script>
<script type="text/javascript">
$(function(){
var tx =new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");
$(".bbs header span").click(function(){ //对“我要发帖”span标签添加“点击”
$(".post").show() //点击后 发帖区域展示
});
$(".bbs .post .btn").click(function(){
var flag = window.confirm("是否发布?");
if(flag==true){
var $newLi = $("<li></li> ") //创建新的li
var iNum = Math.floor(Math.random()*4) //获取随机数
var $txImage = $("<div><img src=images/"+tx[iNum]+"></div>"); //用随机数创建头像
var $title = $("<h1>"+$(".title").val()+"</h1>"); //创建标题
var $newP = $("<p></p>"); //创建新的段落节点
var myDate = new Date();
var currentDate = myDate.getFullYear()+"-"+parseInt(myDate.getMonth()+1)+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes();
//组合
$newP.append("<span>:"+$(".post select").val()+"</span>"); //模板内容
$newP.append("<span>:"+currentDate+"</span>")//日期和时间
$newLi.append($txImage);//头像
$newLi.append($title);//标题内容
$newLi.append($newP);//段落内容
$(".bbs section ul").prepend($newLi);
/**清理*/
$(".post .content").val("");
$(".post .title").val("");
/**隐藏*/
$(".bbs .post").hide();
}
});
});
</script>
</body>
</html>
1.10作业
于 2024-01-14 13:07:21 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)