JavaScript(JS)网页--留言板

最新推荐文章于 2023-12-12 14:40:14 发布

我是Dreamer啊

最新推荐文章于 2023-12-12 14:40:14 发布

阅读量3k

点赞数 8

分类专栏：前端开发文章标签： javascript js html html5 css

BY Dreamer同学

本文链接：https://blog.csdn.net/weixin_42579348/article/details/109863834

版权

前端开发专栏收录该内容

57 篇文章 6 订阅

订阅专栏

JavaScript(JS)网页–留言板

在使用网页进行冲浪时，经常会发表自己的留言。发布留言的留言板是怎么做的呢？

制作一个简单的留言板。

在这里插入图片描述

首先需要一个textarea框，旁边放置一个按钮，然后需要一个ul标签，里面不需要放置li元素，用CSS加以简单的修饰。

紧接着获取元素，在点击按钮后，创建一个li，将文本框里面的赋值给li，将li插入到ul的第一个孩子的前面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言发布</title>
    <style>
        body {
            margin: 200px;
        }
        *{
            margin: 0px;
            padding: 0px;
        }
        li {
            list-style: none;
            width: 500px;
            height: 30px;
            margin-top: 5px;
            border: 1px solid black;
            background-color: pink;
        }
        textarea{
            width: 200px;
            height: 80px;
        }  
    </style>
</head>
<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>
        
    </ul>
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        //注册时间
        btn.onclick = function(){
            if(text.value == ''){
                alert("您没有输入内容。")
                return false;
            }else{
                var li = document.createElement('li');
                li.innerHTML = text.value;
                //ul.appendChild(li);
                ul.insertBefore(li,ul.children[0])
            }
            text.value='';
            
        }
    </script>
</body>
</html>

对留言板的留言进行删除：删除留言

我是Dreamer啊

关注

8
点赞
踩
32

收藏

觉得还不错? 一键收藏
4
评论
JavaScript(JS)网页--留言板

JavaScript(JS)网页–留言板在使用网页进行冲浪时，经常会发表自己的留言。发布留言的留言板是怎么做的呢？制作一个简单的留言板。首先需要一个textarea框，旁边放置一个按钮，然后需要一个ul标签，里面不需要放置li元素，用CSS加以简单的修饰。紧接着获取元素，在点击按钮后，创建一个li，将文本框里面的赋值给li，将li插入到ul的第一个孩子的前面。<!DOCTYPE html><html lang="zh-CN"><head> <
复制链接

扫一扫

专栏目录