使用Jquery写一个简易论坛

最新推荐文章于 2022-09-03 13:53:34 发布

H_e_a_l_e_r

最新推荐文章于 2022-09-03 13:53:34 发布

阅读量637

点赞数 2

本文链接：https://blog.csdn.net/H_e_a_l_e_r/article/details/121597047

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>论坛模拟</title>
    <link rel="stylesheet" href="../CSS/bbs.css">
    <script src="../JS/jquery-1.12.4.js"></script>
</head>
<body>
    <div class="bbs">
        <!--头部-->
        <header>
            <span>我要发贴</span>
        </header>
        <!--主体-->
        <section>
            <ul></ul>
        </section>
        <!--发布内容-->
        <div class="post">
            <input type="text" class="title" placeholder="请输入标题">
            所属版块：
            <select>
                <option>请选择模块</option>
                <option>电子书籍</option>
                <option>新课来了</option>
                <option>新手教程</option>
            </select>
            <textarea class="content"></textarea>
            <input class="btn" value="发布">
        </div>
    </div>
</body>
<script>
    $(document).ready(function () {
        $(".bbs header span").click(function () {
            $(".bbs .post").show()
        });
        var userList = new Array("1.jpg","2.jpg","3.jpg","4.jpg");
        $(".btn").click(function () {
            //第一步 创建包裹头像信息等的li
            var $newLi = $("<li></li>");
            //第二步 随获取一个头像
            var num = Math.floor(Math.random()*4);
            //第三步 创建img头像节点
            var $img = $("<div><img src=../img/"+userList[num]+"></div>");
            //第四步 设置标题节点
            var $title = $("<h1>"+$(".title").val()+"</h1>");
            //第五步 创建P节点存放板块和日期
            var $newP = $("<p></p >");
            var plate = $(".post select").val();
            var myTime = new Date();
            var currentDate = myTime.getFullYear()+"-"
                +parseInt(myTime.getMonth()+1)+"-"
                +myTime.getDate()+" "
                +myTime.getHours()+":"
                +myTime.getMinutes()+":"
                +myTime.getSeconds();
            $($newP).append("<span>板块:"+plate+"</span>");
            $($newP).append("<span>发表时间:"+currentDate+"</span>");
            //把内容放到li节点中
            $($newLi).append($img);//插入头像
            $($newLi).append($title);//插入标题
            $($newLi).append($newP);//插入板块和时间
            //将li 每次都前置到ul中
            $(".bbs section ul").prepend($newLi);
            //清空
            $(".post .content").val("");
            $(".post .title").val("");
            $(".post select").val("0");
            //隐藏提交的表单
            $(".post").hide()
        })
    })
</script>
</html>

CSS内容

*{
    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 #999999 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 #aaaaaa solid;
    margin-bottom: 10px;
}
.post select{
    width: 200px;
    height: 30px;
}
.post .content{
    width: 450px; 
    height: 200px; 
    display: block; 
    margin: 10px 0;
    border: 1px #aaaaaa 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;
}

.bbs section ul li{
    padding: 10px 0; 
    border-bottom: 1px #999999 dashed;
    overflow: hidden;
}
.bbs section ul li div{
    float: left; 
    width: 60px;
    margin-right: 10px;
}
.bbs section ul li div img{ 
    border-radius:50%; 
    width: 60px;
}
.bbs section ul li h1{
    float: left; 
    width: 520px; 
    font-size: 16px;
    line-height: 35px;
}
.bbs section ul li p{
    color: #666666; 
    line-height: 25px;
    font-size: 12px; 
}
.bbs section ul li p span{
    padding-right:20px;
}

H_e_a_l_e_r

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Jquery写一个简易论坛

<div class="bbs">  <header> <span>我要发贴</span> </header>  <section> <ul></ul> </section>  <div class="post"> <input type="text"
复制链接

扫一扫