目錄 1.案例說明： 2.html部分 3.css部分 4.js代碼 5.全部代碼 6.效果圖： 總結 1.案例說明： 利用JavaScript、css以及html制作一個簡易的留言板 要求在頁面文本框中輸入一些文字之后，點擊提
目錄
- 1.案例說明：
- 2.html部分
- 3.css部分
- 4.js代碼
- 5.全部代碼
- 6.效果圖：
- 總結
1.案例說明：
利用JavaScript、css以及html制作一個簡易的留言板
要求在頁面文本框中輸入一些文字之后，點擊“提交”按鈕，就可以讓輸入的文字和當前留言時間顯示在下面，重新輸入一些文字，再點擊提交，就可以讓新發布的內容顯示在最上面。點擊后面的刪除，就可以刪除已經提交后的留言。
【案例分析】利用節點的創建、添加和刪除相關知識完成一個簡易的留言板功能。在頁面中實現單擊“提交”按鈕動態創建一個li元素，添加到ul里面。
2.html部分
主要有一個文本框，一個提交按鈕，和一個展示留言部分的ul列表。
<div id="mgs">
<textarea id="text"></textarea><br>
<input type="button" id="btn" value="提交">
<ul class="list"></ul>
</div>
3.css部分
* {
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;
}
清除默認樣式，設置文本框的樣式（字體黑色，斜體，在瀏覽器中居中，字體大小，內邊距），去除默認列表的樣式，span主要是用來包當前留言時間的。
4.js代碼
獲取按鈕元素，獲取ul列表元素，獲取文本框元素? ? ? ? ? ?
var btn = document.getElementById('btn');
var list = document.querySelector('.list');
var text = document.getElementById('text');
綁定按鈕點擊事件：
當文本框沒有輸入內容的時候，點擊提交瀏覽器提示“你沒有輸入內容”，? ? ? ? ?
btn.onclick = function () {
if (text.value == '') {
alert('你沒有輸入內容。')
} else {
當輸入內容后，創建一個li元素節點，在li.li.innerHTML里面輸入文本框內容和當前時間和一個刪除按鈕，將li添加到ul中，并將文本框內已輸入的內容清除。
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>';
給刪除按鈕綁定點擊刪除事件。獲取所有的button按鈕，點擊button按鈕時，刪除li（刪除button按鈕的父節點的父節點）
var allB = document.querySelectorAll('button');
for (var i = 0; i < allB.length; i++) {
allB[i].onclick = function () {
list.removeChild(this.parentNode.parentNode);
}
5.全部代碼
<!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>
6.效果圖：
沒有輸入內容時：
輸入內容，并按提交按鈕
按下刪除按鈕
總結
到此這篇關于JavaScript實現留言板的文章就介紹到這了,更多相關JS實現留言板內容請搜索技圈網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持技圈網！
【本文由：湖北阿里云代理 http://www.558idc.com/aliyun.html 復制請保留原URL】聲明：所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益，可聯系我們進行處理。