JavaScript事件监听练习--留言板

最新推荐文章于 2024-10-07 09:24:46 发布

不会咋办

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量233

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_43201652/article/details/127281030

版权

简易留言板

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .text {
            width: 250px;
            margin: 50px auto;
        }

        .text>textarea {
            width: 100%;
            height: 100px;
        }

        li {
            width: 250px;
            height: 30px;
            border-bottom: 1px solid #999;
            box-sizing: border-box;
            line-height: 30px;
        }

        span {
            float: right;
        }

        p {
            display: inline-block;
            width: 120px;
            height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div class="text">
        <textarea id="massage"></textarea>
        <button type="submit" id="btn">提交</button>
        <ul id="record">

        </ul>
    </div>
    <script>
        var record = document.getElementById("record")

        var btn = document.getElementById("btn")

        btn.onclick = function () {
            var msg = document.getElementById("massage")
            var msgs = msg.value
            if (msgs == "") {
                alert("输入不能为空!")
            } else {
                msg.value = null
                var now = new Date()
                var year = now.getFullYear()
                var month = now.getMonth() + 1
                var date = now.getDate()
                var liNode = document.createElement("li");//创建一个节点
                liNode.innerHTML = "<p>" + msgs + "</p>" + "<span>" + year + "/" + month + "/" + date + "<button>删除</button>" + "</span>";
                record.insertBefore(liNode, record.children[0]);//在什么节点之前添加一个节点

            }
        }

        record.addEventListener("click", function (e) {
            if (e.target.nodeName == "BUTTON") {
               record.removeChild(e.target.parentNode.parentNode)
            }
        })



    </script>
</body>

</html>