• 热点推荐:
 首页 / web案例 / 正文
javascript实现简单的留言板功能,添加留言和删除留言(前端无接口)

Time:2021年08月24日 Read:244 评论:0 作者:小天老师

案例主要核心是创建节点和删除节点,当用户输入留言内容后,点击发布,就会创建一个带有内容的li,当用户点击删除留言时,会删除掉当前所在的li。如果用户没有写留言内容,点击发布,会弹出警告信息。

css+js

<!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>css+js简单的留言功能</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        textarea {
            outline: none;
            width: 450px;
        }
        
        li {
            list-style: none;
            width: 450px;
            background-color: pink;
            margin-bottom: 5px;
        }
        
        a {
            float: right;
            text-decoration: none;
            color: #333;
        }
    </style>
</head>

<body>
    <textarea name="" id="text" cols="30" rows="10" placeholder="请输入留言内容"></textarea>
    <button>发布</button>
    <ul></ul>

    <script>
        var text = document.querySelector('#text');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        btn.onclick = function() {
            if (text.value == '') {
                alert('你输入的内容为空');
            } else {
                var li = document.createElement('li');
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
                ul.appendChild(li);
                var al = document.querySelectorAll('a');
                for (var i = 0; i < al.length; i++) {
                    al[i].onclick = function() {
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>

</html>

版权声明:本文为 “传授PC-资源分享网” 原创文章,转载请附上原文出处链接及本声明;

原文链接:https://pc2356.com/post/65.html

标签: javascript基础 

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

排行榜
四种主题风格
广告位 Ad1
关于我们
传授PC资源学习网(www.pc2356.com)个人博客,记录学习前端笔记和日记生活,分享网页源码、软件下载、学习资源等多方面资源网站。
联系我们
意见反馈
举报中心
扫码关注
Copyright@2020-2021 | Powered by©ZBLOG | 传授PC资源分享网 | RSS 订阅 | 站点地图