js做留言板（可以评论删除评论评论时间）

最新推荐文章于 2023-04-07 00:21:15 发布

dizhan4240

最新推荐文章于 2023-04-07 00:21:15 发布

阅读量733

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gao2/p/11528682.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding:0;margin: 0;
        }
        .wrap{
            width: 800px;border: 1px solid black;
            padding: 20px;margin: 0 auto;
        }
        .wrap h3{
            margin: 10px 0 20px;
        }
        .message{
            padding: 10px;border: 1px dashed #ccc;
        }
        .info{
            display: flex;justify-content: space-between;
            border-bottom: 1px dashed #ccc;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
        .content{
            width: calc(100%-2px);
            height: 120px;
            border-radius: 5px;border-color: #ccc;
            vertical-align: middle;
            margin: 10px 0;
        }
        .btn{
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <h3>留言板</h3>
        <div class="exhibit" id="exhibit"></div>
        <div class="messageText">
             <textarea class="content" id="content"></textarea>
             <div class="btn">
                 <input type="button" value="留言" id="addBtn">
             </div>
             </div>
    </div>

    <script src="index.js"></script>
</body>
</html>

let data = [{
    username:"张三0",
    time:"2017-09-07 09:11:00",
    text:"留言内容0"},{
        username:"张三1",
        time:"2017-09-08 09:11:00",
    text:"留言内容0"},{
        username:"张三2",
        time:"2017-09-09 09:11:00",
    text:"留言内容0"
}];

render();
addBtn.addEventListener("click",() =>{
    addMessage();
})

content.addEventListener("keydown",(e) =>{
    if (e.keyCode === 13){
        addMessage();
    }
},false)

exhibit.addEventListener("click" , (e) =>{
    console.log(e)
    if (e.target.className === "removeBtn"){
        // e.preventDefault();
        e.preventDefault();
        let i =e.target.getAttribute("_id");
        data.splice(i,1);
        render();
    }
}, false)

function addMessage(){
    data.push({
        username:`张三${data.length}`,
        time:getNowTime(),
        text:content.value
    });
    content.value = "";
    render();
}

function render(){
    exhibit.innerHTML = data.map((item, index) =>{
                return `<div class="message">
                <div class="info">
                    <span>${item.username}</span>
                    <span>${item.time}</span>
                </div>
                <p>${item.text}</p>
                <div class="btn">
                    <a href="#" class = "removeBtn" _id="${index}">删除</a>
                </div>
                </div>`
    }).join("");
}

function getNowTime(){
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    month =judgeTime(month);
    let day = date.getDate();
    day = judgeTime(day);
    let hours = date.getHours();
    hours = judgeTime(hours);
    let minutes = date.getMinutes();
    minutes = judgeTime(minutes);
    let seconds = date.getSeconds();
    seconds = judgeTime(seconds);
    let nowTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    return nowTime;
}

function judgeTime(time){
    if(time < 10 && time > 0){
        time = "0" + time;
    }
    return time;
}

转载于:https://www.cnblogs.com/gao2/p/11528682.html

dizhan4240

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
js做留言板（可以评论删除评论评论时间）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
复制链接

扫一扫