一个简单的dom案例----留言板

HXR1984

已于 2022-05-29 21:56:30 修改

阅读量932

点赞数

文章标签： css javascript css3

于 2022-05-29 21:51:44 首次发布

本文链接：https://blog.csdn.net/HXR1984/article/details/125035774

版权

用HTML5+css+js完成一个简单的dom案例。

前言

制作一个简单的留言板，实现留言的添加、记录和删除功能

一、完成页面的基本内容

代码如下（示例）：

<body>
    <div class="container">
        <header>
            <div>
                <input id="nick" type="text" placeholder="请输入昵称">
            </div>
            <div style="margin-top: 40px;">
                <input id="message" type="text" placeholder="请输入留言">
            </div>
            <div id="submit">提交</div>
        </header>
        <ul>
            <!-- <li>
                <p class="up">
                    <span class="nick">小高</span>
                    <span class="time">2022-1-1 12:00:00</span>
                </p>
                <p class="down">
                    <span class="message">hello world</span>
                    <span class="del">删除</span>
                </p>
            </li> -->
        </ul>
    </div>
</body>

二、完善css样式

代码如下（示例）：

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        .container {
            width: 800px;
            margin: 0 auto;
        }
        header {
            padding: 30px;
            background-color: lightgray;
        }
        input {
            background-color: transparent;
            border: 0;
            outline: 0;
            width: 92%;
            height: 36px;
            line-height: 36px;
            display: block;
            margin-left: 4%;
        }
        header>div {
            width: 80%;
            height: 36px;
            background-color: #efefef;
            border-radius: 4px;
            margin: 0 auto;
        }
        #submit {
            width: 40%;
            margin-top: 40px;
            line-height: 36px;
            text-align: center;
        }
        #submit:hover, li p .del:hover {
            cursor: pointer;
        }

        ul {
            margin-top: 40px;
        }
        li  {
            height: 60px;
            margin: 10px;
        }
        li p {
            height: 30px;
        }
        li p .nick, li p .message {
            float: left;
            height: 30px;
            line-height: 30px;
            margin-left: 10px;
        }
        li p .time, li p .del {
            float: right;
            height: 30px;
            line-height: 30px;
            margin-right: 10px;
        }
        .up {
            background-color: lightgrey;
        }
        .down {
            background-color: lightseagreen;
        }
    </style>

静态页面如图：

三、实现js操作

1.要先把jquery导入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

2.js

<script>
    $("#submit").click(function(){
        // 判断输入框是否有内容
        if($("#nick").val() === "" || $("#message").val() === ""){
            alert("昵称或留言不能为空！");
            return;
        };
        // 创建li标签并配置标签
        $(`
            <li>
                <p class="up">
                    <span class="nick">${$("#nick").val()}</span>
                    <span class="time">${getNowTime()}</span>
                </p>
                <p class="down">
                    <span class="message">${$("#message").val()}</span>
                    <span class="del">删除</span>
                </p>
            </li>
        `).appendTo($("ul")).find(".del").click(function(){
            $(this).parent().parent().remove();
        })
        // 将li添加到ul中
        // 输入框内容置空
        $("input").val("");
        // 删除内容
    })

    // 获取当前时间
    function getNowTime(){
        var date = new Date();
        var Y = date.getFullYear();
        var M = date.getMonth() + 1;
        var D = date.getDate();

        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();

        return `${Y}-${M}-${D} ${h}:${m}:${s}`;
    }
</script>