其他分享
首页 > 其他分享> > JS简易的留言板，css写的比较随意

JS简易的留言板，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