留言板ES6

最新推荐文章于 2020-12-19 21:25:46 发布

棋炜的小宝贝

最新推荐文章于 2020-12-19 21:25:46 发布

阅读量116

点赞数

分类专栏： ES6 文章标签： js

本文链接：https://blog.csdn.net/XWen_ING/article/details/108645971

版权

ES6 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

留言板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            background-color: bisque;
            border: 2px solid #ccc;
            margin: 0 auto;
        }
        h1{
            height: 50px;
            font-size: 20px;
            text-align: center;
        }
        .list{
            /* height: auto; */
            height: 388px;

        }
        .list li{
            list-style: none;
            position: relative;
        }
        .list li i {
            text-align: center;
            position: absolute;
            right: 80px;
            top: 0;
            font-size: 20px;
            cursor: pointer;
        }
        .operate{
            height: 60px;
        }
        .message{
            height: 60px;
            width: 80%;
            margin-bottom: -24px;
        }
        .btn{
            height: 60px;
            width: 18%;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>
            嗯哼的留言版：
            <span id="num"> 留言条数(0)</span> 
        </h1>
        <ul class="list">
        </ul>
        <div class="operate">
            <textarea class="message"></textarea>
            <button id="btn" class="btn">留言</button>
        </div>
    </div>
  <script>

    /* 
        1.利用innerHTML渲染标签以及内容
        2.通过value值获取文本域的内容
        3.通过appendChild()方法将子元素内容添加到父元素上
        4.通过委托事件 给父元素绑定点击事件 通过e.target.tagName判断标签名
        5.通过remove()方法移除元素
     */

    //获取元素
    var btn = document.getElementById("btn");
    var message = document.querySelector(".message");
    var list = document.querySelector(".list");
    var num = document.getElementById("num");
    //定义一个计数器
    var count = 0;
    //给btn绑定点击事件
    btn.onclick = function(){
        //判断文本域是否有内容 有就创建元素 操作元素
        if(message.value === ""){
            alert("未填写内容，无法提交留言！请重新的输入！")
        }else{
            //创建li元素
            var  li = document.createElement("li");
            //添加给li元素
            li.innerHTML = "<span>" + message.value + "</span><i>&times;</i>";
            //上树
            list.appendChild(li);
            //清空文本域的内容
            message.value = "";
            //计数器+1
            count++;
            num.innerHTML = "留言条数(" + count + ")";

        }
        //操作i标签 当点击i标签删除li整条留言 
        //使用事件委托 给父元素绑定点击事件 通过e.target做判断
        //给父元素绑定点击事件
        list.onclick = function(e) {  
            // console.log(e.target.tagName);
            //判断触发的精确元素
            if(e.target.tagName.toUpperCase() === "I"){
                e.target.parentNode.remove();
                count--;
                num.innerHTML = "留言条数(" + count + ")";

            }
        }
    }
    </script>
</body>
</html>

棋炜的小宝贝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
留言板ES6

留言板<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>留言板</title> <style> *{ padd
复制链接

扫一扫