制作论坛帖子页面

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>
相关推荐
GIS程序媛—椰子16 分钟前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山39 分钟前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享1 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄2 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf3 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨3 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL3 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1114 小时前
css实现div被图片撑开
前端·css
薛一半4 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾4 小时前
CSS综合练习——懒羊羊网页设计
前端·css