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>
用了最简单的元素,和时间获取,还待完善!!