javascript案例17——留言发布、简易发布留言案例

耶啵奶膘

已于 2022-05-14 10:06:23 修改

阅读量687

点赞数

分类专栏： javascript 文章标签： javascript html css3

于 2022-05-09 12:08:38 首次发布

本文链接：https://blog.csdn.net/xulihua_75/article/details/124663110

版权

javascript 专栏收录该内容

55 篇文章 6 订阅

订阅专栏

一、案例描述

留言发布：最新发布的内容在最下方显示。

二、案例效果演示

请添加图片描述

三、案例局部代码

css代码：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    #content {
        padding: 50px;
    }
    
    textarea {
        width: 300px;
        height: 200px;
        box-shadow: 0 0 5px #4CB02A;
        border-radius: 5px;
        outline: none;
        border: 1px solid #4CB02A;
        padding: 10px;
        box-sizing: border-box;
    }
    
    button {
        border: none;
        background: none;
        width: 300px;
        height: 50px;
        background-color: #4CB02A;
        color: #fff;
        border-radius: 5px;
        font-size: 16px;
    }
    
    h4 {
        margin-top: 30px;
        margin-bottom: 10px;
    }
    
    ul li {
        background-color: #4CB02A;
        width: 400px;
        color: #fff;
        padding: 5px 30px 5px 5px;
        box-sizing: border-box;
        list-style-position: inside;
        margin-bottom: 10px;
        font-size: 12px;
        position: relative;
        word-break: break-all;
    }
    
    ul li img {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translate(0, -50%);
    }
</style>

html代码：

<div id="content">
    <textarea name="txt"></textarea><br />
    <button>发布</button>
    <h4>留言如下：</h4>
    <ul>
    </ul>
</div>

js代码方法1：

<script>
   // 获取文本域元素
    var textarea = document.querySelector('textarea');
    // 获取按钮元素
    var btn = document.querySelector('button');
    // 获取ul元素
    var ul = document.querySelector('ul');
    // 注册事件
    btn.onclick = function() {
        if (textarea.value == '') {
            // 填入的内容为空，提示一下
            alert('您没有输入内容');
        } else {
            // 创建一个新的li元素
            var li = document.createElement('li');
            // 不光把文本框内的值赋过去， 我还创建了一个删除按钮。 回头可以添加删除发言的功能
            li.innerHTML = textarea.value + '<img src="./img/delete.png"/>';
            console.log(li);
            ul.appendChild(li); //后面插入
            // ul.insertBefore(li, ul.children[0]); //前面插入
            // 发布成功之后，将文本域中的内容清空一下
            textarea.value = '';
            // 此时，操作基本完成，现在要完成删除发言的功能。
            var img = li.children[0];
            img.onclick = function() {
                // ul.removeChild(li);//小方法一
                this.parentNode.remove(); //小方法二
            }
        }
    }
</script>

js代码方法2：

<script>
        // 获取文本域元素
        var textarea = document.querySelector('textarea');
        // 获取按钮元素
        var btn = document.querySelector('button');
        // 获取ul元素
        var ul = document.querySelector('ul');
        // 注册事件
        btn.onclick = function() {
            if (textarea.value == '') {
                // 填入的内容为空，提示一下
                alert('您没有输入内容');
            } else {
                // 创建一个新的li元素
                var li = document.createElement('li');
                // 不光把文本框内的值赋过去， 我还创建了一个删除按钮。 回头可以添加删除发言的功能
                // li.innerHTML = textarea.value + '<a href="#">删除</a>';
                li.innerHTML = textarea.value + '<img src="./img/delete.png"/>';
                console.log(li);
                ul.appendChild(li); //后面插入
                // ul.insertBefore(li, ul.children[0]); //前面插入
                // 发布成功之后，将文本域中的内容清空一下
                textarea.value = '';
                // 此时，操作基本完成，现在要完成删除发言的功能。
                // 删除：获取所有的删除图片，遍历绑定点击事件
                var as = document.querySelectorAll('img');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        // ul.removeChild(this.parentNode);//小方法一
                        this.parentNode.remove(); //小方法二
                    }
                }
            }
        }
</script>

四、案例整体代码

<!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>留言发布案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #content {
            padding: 50px;
        }
        
        textarea {
            width: 300px;
            height: 200px;
            box-shadow: 0 0 5px #4CB02A;
            border-radius: 5px;
            outline: none;
            border: 1px solid #4CB02A;
            padding: 10px;
            box-sizing: border-box;
        }
        
        button {
            border: none;
            background: none;
            width: 300px;
            height: 50px;
            background-color: #4CB02A;
            color: #fff;
            border-radius: 5px;
            font-size: 16px;
        }
        
        h4 {
            margin-top: 30px;
            margin-bottom: 10px;
        }
        
        ul li {
            background-color: #4CB02A;
            width: 400px;
            color: #fff;
            padding: 5px 30px 5px 5px;
            box-sizing: border-box;
            list-style-position: inside;
            margin-bottom: 10px;
            font-size: 12px;
            position: relative;
            word-break: break-all;
        }
        
        ul li img {
            width: 20px;
            height: 20px;
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translate(0, -50%);
        }
    </style>
</head>
<body>
    <div id="content">
        <textarea name="txt"></textarea><br />
        <button>发布</button>
        <h4>留言如下：</h4>
        <ul>
        </ul>
    </div>

    <script>
        // 获取文本域元素
        var textarea = document.querySelector('textarea');
        // 获取按钮元素
        var btn = document.querySelector('button');
        // 获取ul元素
        var ul = document.querySelector('ul');
        // 注册事件
        btn.onclick = function() {
            if (textarea.value == '') {
                // 填入的内容为空，提示一下
                alert('您没有输入内容');
            } else {
                // 创建一个新的li元素
                var li = document.createElement('li');
                // 不光把文本框内的值赋过去， 我还创建了一个删除按钮。 回头可以添加删除发言的功能
                // li.innerHTML = textarea.value + '<a href="#">删除</a>';//这种是文字版的删除
                li.innerHTML = textarea.value + '<img src="./img/delete.png"/>'; //这种是图片垃圾桶版的删除
                console.log(li);
                ul.appendChild(li); //后面插入
                // ul.insertBefore(li, ul.children[0]); //前面插入
                // 发布成功之后，将文本域中的内容清空一下
                textarea.value = '';
                // 此时，操作基本完成，现在要完成删除发言的功能。
                // 大方法一：获取所有的超链接，遍历绑定点击事件
                var as = document.querySelectorAll('img');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        // ul.removeChild(this.parentNode);//小方法一
                        this.parentNode.remove(); //小方法二
                    }
                }
                // 大方法二：每次创建的li的时候里面的img都指定好，对img绑定点击事件，一点就删除自己的父亲
                // var img = li.children[0];
                // img.onclick = function() {
                //     // ul.removeChild(li);//小方法一
                //     this.parentNode.remove(); //小方法二
                // }
            }
        }
    </script>
</body>

</html>

五、总结

逻辑：
1.点击“发布”按钮后，先获取文本域里面的内容。
2.创建一个新的li标签，并将文本域里面的文本赋到新创建的li里面。
3.将整体创建好的li，插入到ul的最下方（也可以放到最上方）。
4.插入进去之后，原先文本域里面填写的内容清空一下。
5.给垃圾桶绑定删除事件，删除垃圾桶所在的这一行元素。
删除的代码有多种实现方式，以上已贴出。

耶啵奶膘

关注

0
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
javascript案例17——留言发布、简易发布留言案例

一、案例描述留言发布：最新发布的内容在最下方显示。二、案例效果演示三、案例局部代码css代码：<style> * { margin: 0; padding: 0; } #content { padding: 50px; } textarea { width: 300px; height: 200px; box-shadow: 0
复制链接

扫一扫