制作论坛帖子页面

body主体

html 复制代码
<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>
</body>

CSS样式

html 复制代码
<style>
        img{
            float: left;
            width: 60px;
            margin-right: 10px;
        }
        li{
            padding: 10px 0;
            border-bottom: 1px #999999 dashed;
            overflow: hidden;
        }
        *{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;}
 
    </style>

script实现要求代码块

html 复制代码
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script>
        $(function(){
            $("span:eq(0)").click(function(){
                //显示post
                $(".post").show();
            });
            $(".btn").click(function(){
                var $li=$("<li></li>");
                var $div=$("<div></div>");
 
                //var $bt=$(".title").val();
                //var $bk=$("select").val();
                //var $nr=$(".content").val();
                //头像
                var tou=new Array("images/tou01.jpg","images/tou02.jpg","images/tou03.jpg","images/tou04.jpg");
                var index=Math.floor(Math.random()*4);
                var $img=$("<img src="+tou[index]+"/>");
                $div.append($img);
                $li.append($div);
                //标题
                var $h1=$("<h1 style='float: left; width: 520px; font-size: 16px; line-height: 35px'>"+$(".title").val()+"</h1>");
                $li.append($h1);
                //时间
                var date=new Date();
                var n=date.getFullYear();
                var y=date.getMonth()+1;
                var shi=date.getHours();
                var fen=date.getMinutes();
                var miao=date.getSeconds();
                var sj=n+"-"+y+"-"+shi+":"+fen+":"+miao;
                var $p=$("<p>"+"版块:"+$("select").val()+"\n"+"时间:"+sj+"</p>");
                $li.append($p);
                //将li加到ul中
                $("ul").prepend($li);
                //清空
                $(".title").val("");
                $("select").val("");
                $("textarea").val("");
                //隐藏post
                $(".post").hide();
 
            })
        })
 
    </script>
相关推荐
xw513 小时前
uni-app中v-if使用”异常”
前端·uni-app
!win !13 小时前
uni-app中v-if使用”异常”
前端·uni-app
IT_陈寒14 小时前
Java 性能优化:5个被低估的JVM参数让你的应用吞吐量提升50%
前端·人工智能·后端
南囝coding14 小时前
《独立开发者精选工具》第 018 期
前端·后端
小桥风满袖14 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花15 小时前
i18n国际语言化配置
前端
编程贝多芬15 小时前
Promise 的场景和最佳实践
前端·javascript
Asort15 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio15 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗15 小时前
JS的对象属性存储器
前端