作业论坛发帖

最新推荐文章于 2025-04-24 21:30:00 发布

尘晚

最新推荐文章于 2025-04-24 21:30:00 发布

阅读量406

点赞数 6

文章标签： html

本文链接：https://blog.csdn.net/Earthly_Night/article/details/135572178

版权

该篇文章描述了一个使用HTML、CSS和JavaScript构建的论坛列表，包括用户输入帖子标题、选择所属版块、发布功能以及随机头像显示的功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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 type="text/javascript">
   $(function(){
       $(".bbs header span").click(function(){
           $(".bbs .post").show();
       });
       var touxiang = new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg")
       $(".post .btn").click(function(){
               var jjie = $("<li></li>");
               var toux = Math.floor(Math.random()*4);
               var touX = $("<div><img src=images/"+touxiang[toux]+"></div>");
               var biaoti = $("<h1>"+$(".title").val()+"</h1>");
               var neirong = $("<p></p>");
               var myDate = new Date();
               var currentDate = myDate.getFullYear()+"-"+parseInt(myDate.getMonth()+1)+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes();
               neirong.append("<span>模版:"+$(".post select").val()+"</span>");
               neirong.append("<span>发表时间:"+currentDate+"</span>")
               jjie.append(touX);
               jjie.append(biaoti);
               jjie.append(neirong);
               $(".bbs section ul").prepend(jjie);
               $(".post .content").val("");
               $(".post .title").val("");
               $(".bbs .post").hide();
               $(".btn").click(function(){
                   $("body:visible").hide();

           });
       });
   });

</script>
</body>
</html>

作业 论坛发帖

作业论坛发帖