js 留言板

js 留言板

小可爱要我给她写一个独有的留言板，我用上了我最近刚看的视频，做了一个简单的留言板：

 <h1>写给我的小可爱</h1>

    <div class="list">
        <ol id="ol"></ol>
    </div>

    <textarea id="message" cols="30" rows="10"></textarea>
    <div></div>
    <button id="messageBtn">留言</button>
    <button id="numberBtn">统计</button>

<script>
		//获取元素节点
        var message = document.getElementById('message');
        var ol = document.getElementById('ol');
        var messageBtn = document.getElementById('messageBtn');
        var numberBtn = document.getElementById('numberBtn');
        var count = 0;//记录留言的数量

        //留言的点击方法
        messageBtn.onclick = function () {
            if (!message.value) {
                alert("留言板为空");
                console.log("留言板为空");
            } else {
                var li = document.createElement('li');
				//获取当前时间
                var time = new Date();
                // var hours = time.getHours;
                var s1 = time.getFullYear()+"-" + (time.getMonth()+1) + "-" + time.getDate()+"-"+time.getHours();
                li.innerHTML = s1 + '</br>'+message.value;
                if (count == 0) {
                    ol.appendChild(li);
                    count++;

                } else {
                	//	在列表的最前面加数据
                    ol.insertBefore(li, ol.childNodes[0]);
                    count++;
                }
                message.value = '';
            }
            //单条数据的删除
            var oSpans = ol.getElementsByTagName('li');
            for (var i = 0; i < oSpans.length; i++) {
                li.onclick = function () {
                    console.log(li);
                    li.parentNode.removeChild(li);

                    count--;
                    console.log(count);

                }
            }
        };
        //统计的点击方法
        numberBtn.onclick = function () {
            alert('一共' + count + '条留言');
        }
    </script>

用了最简单的元素，和时间获取，还待完善！！