JS简易的留言板，css写的比较随意

2021-06-22 10:35:51 阅读：372 来源： 互联网

标签：seconds JS div words time var message 留言板 css

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            margin: 100px 100px;
            width: 500px;
        }
        
        .words {
            width: 100%;
        }
        
        .words div {
            height: 50px;
            line-height: 50px;
            background-color: rgb(255, 205, 255);
            border-bottom: 1px dashed #fff;
            color: rgb(35, 58, 134);
        }
        
        .words div span {
            margin-right: 20px;
            color: blue;
        }
        
        .words div a {
            float: right;
            margin-right: 10px;
            color: blue;
            cursor: pointer;
        }
        
        .message {
            height: 40px;
            line-height: 40px;
        }
        
        .message input {
            width: 75%;
            height: 30px;
            border: 1px solid;
            border-radius: 10px;
            outline: none;
            padding-left: 15px;
        }
        
        .message button {
            width: 20%;
            height: 30px;
            border: 0;
            border-radius: 10px;
            background-color: rgb(33, 119, 199);
            color: #fff;
            outline: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="words">
            <div><span>2020</span>欢迎来到许愿墙<a>删除留言</a></div>
        </div>
        <div class="message">
            <input type="text" placeholder="留言板">
            <button>发布</button>
        </div>
    </div>
</body>
<script>
    var words = document.querySelector('.words');
    var message = document.querySelector('.message');
    var time = document.querySelector('span');
    time.innerHTML = getDate();
    var btn = message.children[1].onclick = function() {
        if (message.children[0].value == '') {
            alert('留言板不能为空！');
        } else {
            var div = document.createElement('div');
            div.innerHTML = '<span>' + getDate() + '</span>' + message.children[0].value + '<a>删除留言</a>';
            words.insertBefore(div, words.children[0]);
            message.children[0].value = '';
            // 删除留言板
            var as = words.querySelectorAll('a');
            for (var i = 0; i < as.length; i++) {
                as[i].onclick = function() {
                    words.removeChild(this.parentNode);
                }
            }
        }
    }

    function getDate() {
        var time = new Date();
        // 根据本地时间返回指定日期对象的月份中的第几天（1-31）。
        var date = time.getDate();
        // 根据本地时间返回指定日期对象的年份（四位数年份时返回四位数字
        var year = time.getFullYear();
        // 返回月份
        var month = time.getMonth() + 1;
        // 返回小时
        var hours = time.getHours();
        // 返回分钟
        var minutes = time.getMinutes();
        minutes = minutes < 10 ? '0' + minutes : minutes;
        // 返回秒数
        var seconds = time.getSeconds();
        seconds = seconds < 10 ? '0' + seconds : seconds;

        return year + '年' + month + '月' + date + '日' + ' ' + hours + ':' + minutes + ':' + seconds;
    }
</script>

功能就是简单发布留言，然后获取当前时间，还有删除功能

标签：seconds,JS,div,words,time,var,message,留言板,css
来源： https://www.cnblogs.com/aimiao/p/14917404.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JS简易的留言板，css写的比较随意