html+css+js实现评论功能，评论置顶，获取评论时间，随机数头像

 效果图

 

 

 

 html代码

<div class="box">
    <button id="btn">我要发帖</button>
    <div class="content">
        <input type="text"><br>
        <span>所属板块：</span><select>
            <option value="请选择板块">请选择板块</option>
            <option value="电子书籍">电子书籍</option>
            <option value="新课来了">新课来了</option>
            <option value="新手报到">新手报到</option>
            <option value="职业规划">职业规划</option>
        </select><br>
        <textarea></textarea><br>
        <button id="send">发布</button>
    </div>
    <div class="list">
    <ul class="list1">
       
    </ul>
</div>
</div>

css代码

*{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
        .box{
            width: 400px;
            margin: 0 auto;
        }
        #btn{
            width: 150px;
            height: 40px;
            background-color: green;
            color: white;
            border: none;
            border-radius: 8px;
        }
        .content{
            width: 350px;
            height: 300px;
            margin:15px 0 0 45px;
            border: 1px solid gray;
            display: none;
        }
        .content input{
            width: 300px;
            height: 30px;
            margin:10px;
            outline: none;
            
        }
        .content select{
            width: 120px;
            height: 25px;
            
        }
        .content span{
            margin-left: 10px;
            font-size: 14px;
        }
        .content textarea{
            width: 300px;
            height: 150px;
            margin:10px;
            outline: none;
        }
        #send{
            width: 100px;
            height: 30px;
            background-color: green;
            color: white;
            border: none;
            border-radius: 8px;
            margin-left: 10px;
        }
        .list{
            width: 500px;
            border-top: 1px dotted gray;
            margin-top: 10px;
            display: none;
        }
       
        .list ul li{
            display: flex;
            align-items: center;
            width: 500px;
            border-bottom: 1px dotted gray;
            padding: 10px 0;
        }
        .list ul li img{
            width: 60px;
            height: 60px;
            border-radius: 30px;
        }
        .list ul li p{
            font-size: 14px;
            line-height: 25px;
        }
        .title{
            font-weight: 550;
            font-size: 17px;
        }
        .right{
            margin-left: 15px;
        }

js代码

 let _btn=document.querySelector('#btn')
    let _content=document.querySelector('.content')
    let _send=document.querySelector('#send')
    let _list=document.querySelector('.list')
    let _input=document.querySelector('input')
    let _text=document.querySelector('textarea')
    let _list1=document.querySelector('.list1')
    let _select=document.querySelector('select')
    let img=["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.jpg"]
    _btn.onclick=function(){
        _content.style.display='block'
        _list.style.display='none'
    }
    _send.onclick=function(){
        let randon=Math.floor(Math.random()*4)
        let _li = document.createElement('li')
        let date=new Date()
        let year=date.getFullYear()
        let month=date.getMonth()+1
            month=zero(month)
        let data=date.getDate()
            data=zero(data)
        let hours=date.getHours()
            hours=zero(hours)
        let minutes=date.getMinutes()
            minutes=zero(minutes)
            _li.innerHTML = `
            <img src=${img[randon]}>
            <span class="right">
                <p class="title">${_input.value}</p>
                <p>${_text.value}</p>
                <p><span class="bankuai">板块:&ensp;${_select.value}</span>&emsp;&emsp;<span class="time">发表时间:
                    ${year}-${month}-${data}&emsp;${hours}:${minutes}
                    </span></p>
            </span>
            `
            _list1.insertBefore(_li, _list1.firstChild)
            _input.value=''
            _text.value=''
            _select.value='请选择板块'
        _content.style.display='none'
        _list.style.display='block'
    }
    function zero(num){
        if(num<10){
            return "0"+num
        }
        return num
    }