JavaScript -- 实现留言板功能

小高今天早睡了吗？

已于 2022-07-15 09:36:29 修改

阅读量561

点赞数 1

分类专栏： JavaScript习题文章标签： javascript css3 css

于 2021-12-25 10:48:26 首次发布

本文链接：https://blog.csdn.net/m0_55710075/article/details/122140299

版权

JavaScript习题专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文档展示了一个使用HTML5、CSS和JavaScript实现的简单留言板功能。用户可以输入昵称和留言内容，点击留言按钮后，信息将显示在页面上，并提供删除和回复功能。页面还包括一个弹出窗口用于回复特定留言。所有功能都通过JavaScript事件监听和DOM操作完成，实现了动态交互效果。

摘要由CSDN通过智能技术生成

实现留言板功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大作业_留言板</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        width: 100%;
        height: 100%;
        background: rgb(65, 65, 63);
    }

    .bacground {
        width: 700px;
        height: 100%;
        background: white;
        margin: auto;
        margin-top: 20px;
    }

    .head,
    .pop-head {
        height: 50px;
        font-size: 20px;
        text-align: center;
        line-height: 50px;
    }

    .name {
        width: 640px;
        height: 40px;
        font-size: 20px;
        margin: 10px 28px;
        line-height: 50px;
        border-radius: 8px;
        border: 2px solid rgb(139, 137, 137);
        outline: none;
    }

    .content,
    .pop-reply {
        width: 640px;
        height: 150px;
        font-size: 22px;
        margin: 10px 28px;
        border: 2px solid rgb(139, 137, 137);
        outline: none;
        border-radius: 8px;
        resize: none;
    }

    .btn,
    .pop-btn {
        float: right;
        height: 30px;
        margin-right: 28px;
        border-radius: 6px;
        outline: none;
        font-size: 20px;
        padding: 0 20px;
        background: rgb(169, 238, 255);
    }

    h3 {
        font-size: 20px;
        color: rgb(102, 102, 102);
        background: rgb(205, 221, 248);
        margin-top: 50px;
        line-height: 50px;
        text-indent: 30px;
        font-weight: 545;
    }

    li {
        list-style: none;
        width: 640px;
        font-size: 22px;
        margin: 15px 30px;
    }

    .message-head {
        display: flex;
    }

    .message-head .photo {
        width: 70px;
        height: 70px;
        background: rgb(6, 109, 134);
        display: inline-block;
        border-radius: 50%;
        text-align: center;
        line-height: 70px;
        overflow: hidden;
    }

    .message-head .time {
        margin-left: 12px;
    }

    .liuyan,
    .reply p {
        width: 560px;
        /* height: 76px; */
        line-height: 50px;
        display: block;
        background: rgb(205, 221, 248);
        font-size: 20px;
        margin-left: 80px;
        border-radius: 8px;
        text-indent: 15px;
    }

    .delete {
        width: 60px;
        height: 30px;
        display: block;
        line-height: 30px;
        margin-left: 580px;
        /* margin-bottom: 0px; */
        border-radius: 6px;
        outline: none;
        font-size: 15px;
        background: rgb(169, 238, 255);
    }

    .answer {
        width: 60px;
        height: 30px;
        display: block;
        line-height: 30px;
        margin-top: -29px;
        margin-left: 515px;
        border-radius: 6px;
        outline: none;
        font-size: 15px;
        background: rgb(169, 238, 255);
    }

    .popup {
        width: 100vw;
        height: 100vh;
        position: fixed;
        background: rgba(0, 0, 0, .3);
        left: 0;
        top: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        display: none;
    }

    .pop-content {
        width: 700px;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        padding-bottom: 20px;
    }

    .reply p {
        margin-top: 10px;
        background: rgba(100, 100, 100, .1);
    }
</style>

<body>
    <div class="bacground">
        <div class="head">留言板</div>
        <input class="name" type="text" placeholder="请输入您的昵称">
        <textarea class="content" placeholder="请保持言论文明......"></textarea>
        <button class="btn">留言</button>
        <h3>大家在说</h3>
        <ul class="text">
            <!-- <li>
			<div class="message-head">
			<span class="photo">系统</span>
			<p class="time">2019-9-27 0:47:38</p>
			</div>
			<p class="liuyan">测试留言</p>
			<div class="reply">
			<p>测试回复</p>
			</div>
			<button class="delete">Delete</button>
			<button class="answer">Answer</button>
		</li> -->
        </ul>
    </div>

    <div class="popup">
        <div class="pop-content">
            <div class="pop-head">回复板</div>
            <textarea class="pop-reply" placeholder="请保持言论文明......"></textarea>
            <button class="pop-btn huiFu">回复</button>
            <button class="pop-btn quXiao">取消</button>
        </div>
    </div>
</body>
<script>
    // 注意：
    //   1 获取输入框的值必须在点击事件里面
    //   2 封装函数
    //   3 倒计时传参   this
    //   4 创建留言是在前面插入 --- 每一次新的留言都是第一个元素
    //       删除留言和回复留言不需要循环绑定事件
    //       回复留言时，要先找到留言的地方，注意全局变量和局部变量的问题

    var oBtn = $('.btn');

    //绑定点击事件
    oBtn.onclick = function () {
        //获取用户和留言的内容
        var nickname = $('.name').value;
        var content = $('.content').value;

        //判断用户和留言是否为空
        if (nickname && content) {
            //不为空，创建留言
            createMsg(nickname, content);
            //创建留言后，清空留言板内容
            $('.content').value = '';
            //倒计时
            clock(this, 3);
        } else {
            alert('不能为空');
        }
    }



    //拿对象
    function $(selector) {
        return document.querySelector(selector);
    }

    //倒计时
    function clock(ele, time) {
        if (ele.disabled) {
            return
        } else {
            ele.disabled = true;
            ele.innerHTML = time + 's后可留言';
            var t = setInterval(function () {
                time--;
                ele.innerHTML = time + 's后可留言';
                if (time <= 0) {
                    clearInterval(t);
                    ele.disabled = false;
                    ele.innerHTML = '留言'
                }
            }, 1000)
        }
    }

    //创建留言
    function createMsg(name, msg) {
        //创建标签
        var oLi = document.createElement('li');
        oLi.innerHTML = `
            <div class="message-head">
                <span class="photo">${name}</span>
                <p class="time">${formateDate()}</p>
			</div>
			<p class="liuyan">${msg}</p>
			<div class="reply">
			</div>
			<button class="delete">Delete</button>
			<button class="answer">Answer</button>
        `
        $('.text').insertBefore(oLi, $('.text').firstChild);

        //实现删除 ，注意留言后才能删除
        $('.delete').onclick = function () {
            this.parentNode.remove()
        }

        //实现回复
        $('.answer').onclick = function () {
            //出现弹窗
            $('.popup').style.display = 'flex';
            //局部变量  -----底下无法访问到
            oAns = this.previousElementSibling.previousElementSibling;
        }

        //取消回复
        $('.quXiao').onclick = function () {
            $('.popup').style.display = 'none'
        }

        //确认回复
        $('.huiFu').onclick = function () {
            var huiFuContent = $('.pop-reply').value;
            if (huiFuContent) {
                //创建标签
                var oP = document.createElement('p');
                oP.innerHTML = huiFuContent;
                oAns.appendChild(oP);
            }
            $('.popup').style.display = 'none';
        }

    }

    //格式化日期
    function formateDate() {
        var date = new Date();
        var year = date.getFullYear();
        var month = addZero(date.getMonth()) + 1;
        var d = addZero(date.getDate());
        var hour = addZero(date.getHours());
        var minute = addZero(date.getMinutes());
        var second = addZero(date.getSeconds());
        return year + '-' + month + '-' + d + ' ' + hour + ':' + minute + ':' + second;
    }

    //补零操作
    function addZero(n) {
        return n > 9 ? n : '0' + n;
    }
</script>

</html>