制作论坛帖子页面

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>
相关推荐
Mr_Xuhhh41 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋2 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲3 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS5 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js