JavaScript实现留言板_代码007(未授权)

本文介绍: 利用Ja vaScri p t、css以及html 制作一个简易的留言板要求在页面文本框中输入一些文字之后，点击“提交”按钮，就可以让输入的文字和当前留言时间显示在下面，重新输入一些文字，再点击提交，就可以让新发布的内容显示在最上面。点击后面的删除，就可以删除已经提交后的留言。

1.案例说明：

<div id="mgs"&gt;
        <textarea id="text"&gt;</textarea&gt;<br&gt;
        <input type="button" id="btn" value="提交"&gt;
        <ul class="list"&gt;</ul&gt;
    </div>

    * {
        margin: 0;
        padding: 0;
    }

    #mgs {
        width: 400px;
        color: black;
        font-style: italic;
        border-width: 5px;
        margin: 0 auto;
    }

    #text {
        width: 400px;
        height: 150px;
        padding: 20px;
        font-size: 20px;
    }

    li {
        list-style: none;
        border-bottom: 1px solid #999;
        line-height: 20px;
        margin-top: 30px;
    }

    span {
        float: right;
    }

            var btn = document.getElementById('btn');

            var list = document.querySelector('.list');

            var text = document.getElementById('text');

  btn.onclick = function () {

                if (text.value == '') {

                    alert('你没有输入内容。')

                } else {

 var li = document.createElement('li');

 li.innerHTML = text.value + '<span>' + mytime + 't' + '<button>删除</button></span>'

 text.value = '';

 list.insertBefore(li, list.children[0]);

var time = new Date();

var mytime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
 
li.innerHTML = text.value + '<span>' + mytime + 't' + '<button>删除</button></span>';

   var allB = document.querySelectorAll('button');

                    for (var i = 0; i < allB.length; i++) {

                        allB[i].onclick = function () {

                            list.removeChild(this.parentNode.parentNode);

                        }

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #mgs {
        width: 400px;
        color: black;
        font-style: italic;
        border-width: 5px;
        margin: 0 auto;
    }

    #text {
        width: 400px;
        height: 150px;
        padding: 20px;
        font-size: 20px;
    }

    li {
        list-style: none;
        border-bottom: 1px solid #999;
        line-height: 20px;
        margin-top: 30px;
    }

    span {
        float: right;
    }
</style>

<body>
    <div id="mgs">
        <textarea id="text"></textarea><br>
        <input type="button" id="btn" value="提交">
        <ul class="list"></ul>
    </div>
        <script>
            var btn = document.getElementById('btn');
            var list = document.querySelector('.list');
            var text = document.getElementById('text');
            btn.onclick = function () {
                if (text.value == '') {
                    alert('你没有输入内容。')
                } else {
                    var li = document.createElement('li');
                     var time = new Date();
                    var mytime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
                    li.innerHTML = text.value + '<span>' + mytime + 't' + '<button>删除</button></span>';
                    text.value = '';
                    list.insertBefore(li, list.children[0]);
                    var allB = document.querySelectorAll('button');
                    for (var i = 0; i < allB.length; i++) {
                        allB[i].onclick = function () {
                            list.removeChild(this.parentNode.parentNode);
                        }
                    }

                }
            }
        </script>
</body>

</html>