1.10作业

最新推荐文章于 2024-07-08 16:10:56 发布

JXCY13S505

最新推荐文章于 2024-07-08 16:10:56 发布

阅读量353

点赞数 7

文章标签： html

本文链接：https://blog.csdn.net/JXCY13S505/article/details/135577448

版权

该篇文章描述了一个论坛网站的前端代码片段，展示了如何使用HTML、CSS和JavaScript实现用户界面，包括标题输入、版块选择、内容发布以及随机头像显示。

摘要由CSDN通过智能技术生成

<!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(){
       var tou=new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");
       $(".bbs header span").click(function(){
           $(".bbs .post").show();
       });
       $(".post .btn").click(function(){
           var flag=window.confirm("是否发布？");
           if(flag==true){
               var $newLi=$("<li></li>");
               var iNum=Math.floor(Math.random()*4);
               var $touImage=$("<div>< img src=images/"+tou[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()+":"+myDate.getSeconds();
$newp.append("<span>模板:"+$(".post.select").val()+"</span>");
           $newp.append("<span>发表时间:"+currentDate+"</span>");
           $newLi.append($touImage);
           $newLi.append($title);
           $newLi.append($newp);
           $(".bbs section ul").prepend($newLi);
           $(".post content").val(" ");
           $(".post title").val(" ");
           $(".bbs .post").hide();
       }
   });

   });
</script>

</body>
</html>

JXCY13S505

关注

7
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
1.10作业

<option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option>模板:"+$(".post.select").val()+"</span>");$newp.append("<span>发表时间:"+currentDate+"
复制链接

扫一扫