H5+JQuery+CSS实现简易论坛

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

二次元纸片人

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

阅读量655

点赞数

文章标签： css jquery javascript

本文链接：https://blog.csdn.net/qq_34856792/article/details/121892711

版权

<script>
    $(document).ready(function () {
        $(".bbs header span").click(function () {
            $(".post").show();
        });
        let userList=new Array("head01.jpg","head02.jpg","head03.jpg");
        $(".bth").click(function () {
            let $newLi=$("<li></li>");//创建包裹头像、信息...的li元素
            let num=Math.floor(Math.random()*3);//随机获取头像
            let $img=$("<div><img src=../img/"+userList[num]+"></div>");//创建img头像节点
            let $title=$("<h1>"+$(".title").val()+"</h1>");//设置标题节点
            let $newP=$("<p></p>");//创建P节点存放板块和日期
            let plate=$(".post select").val();
            let myTime=new Date();
            let currentDate=myTime.getFullYear()+"-"
                            +parseInt(myTime.getMinutes()+1)+"-"
                            +myTime.getDate()+" "
                            +myTime.getHours()+"-"
                            +myTime.getHours()+":"
                            +myTime.getMinutes();
            $($newP).append("<span>板块:"+plate+"</span>");
            $($newP).append("<span>发表时间:"+currentDate+"</span>");
            //把内容放到li节点中
            $($newLi).append($img);//插入头像
            $($newLi).append($title);//插入标题
            $($newLi).append($newP);//插入板块和时间
            $(".bbs section ul").prepend($newLi);//将li每一次都前置到ul中
            //清空
            $(".post .content").val("");
            $(".post .title").val("");
            $(".post").hide();
        })
    });
</script>

H5+CSS

<body>
<div class="bbs">
    <header>
        <span>我要发帖</span>
    </header>
    <section>
        <ul></ul>
    </section>
    <div class="post">
        <input type="text" placeholder="请输入标题(1-50的字符)" class="title">
        所属板块:
        <select>
            <option>请选择板块</option>
            <option>电子书籍</option>
            <option>新课来了</option>
            <option>清扬男士沐浴露</option>
            <option>苹果笔记本</option>
        </select>
        <textarea class="content"></textarea>
        <input class="bth" value="发布">
    </div>
</div>
</body>


*{
    margin: 0;
    padding: 0;
}
.father{
    width: 60%;
    border: 2px #096 solid;
    margin: 50px auto;
    padding: 20px;
    height: 500px;
}
.father button,input[type=button]{
    width: 80px;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    border: none;
    color: white;
    background: #096;
    outline: none;
    margin: 10px 0;
}
.father form{
    margin: 30px auto 0;
    border: 1px red solid;
    padding: 20px;
    display: none;
    position: absolute;
    background-color: white;
}
.father .content ul li{
    list-style: none;
    padding: 10px;
}
.father .content ul li img{
    float: left;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin: 10px;
}
.father .content ul li span{
    color: #666;
    margin-right: 20px;
    line-height: 3;
}

二次元纸片人

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
H5+JQuery+CSS实现简易论坛

H5+JQu<body><div class="bbs"> <header> <span>我要发帖</span> </header> <section> <ul></ul> </section> <div class="post"> <input type="text" p..
复制链接

扫一扫