案例
一：簡單的留言板
- 輸入暱稱和評論內容，單擊“提交內容”按鈕，可以將最新的評論插入到已有評論的下方
- 暱稱和評論內容爲空時，不能提交
- 提交後獲取當前時間
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>留言欄</title>
<style type="text/css">
#wrap{
width: 600px;
margin:50px auto;
padding:0 20px 20px 20px;
border:1px solid #dcdcdc;
}
#com{
border-top:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
padding-top: 20px;
font-size:12px;
font-weight:lighter;
}
#com span{
font-weight:bold;
font-size:14px;
margin-left:10px;
}
#com time{
float:right;
}
#com p{
font-weight:bold;
font-size:14px;
}
#com td{
font-size:12px;
font-weight:lighter;
}
#comContent{
height: 80px;
width:400px;
}
</style>
</head>
<body>
<div id="wrap">
<h3>最新評論</h3>
<div id="com">
<div id="comment">
網友<span>jack</span>
<time>2019年11月13日</time>
<p>學習使我快樂!</p>
</div>
</div>
<h3>發表評論</h3>
<div id="addComment">
<table>
<tr>
<td >暱稱：</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>評論內容：</td>
</tr>
<tr>
<td colspan="2"><textarea id="comContent"></textarea></td>
</tr>
<tr>
<td></td>
<td align='right'><button onclick="addComment()">提交評論</button></td>
</tr>
</table>
</div>
</div>
</body>
<script type="text/javascript">
function getNowFormatDate() {
var date = new Date(); // 獲取當前的時間
var year = date.getFullYear(); // 獲取當前時間的年
var month = date.getMonth()+1; // 獲取當前時間的月
var strDate = date.getDate(); // 獲取當前的日
var hours = date.getHours(); // 獲取當前的時
var minutes = date.getMinutes(); // 獲取當前時間的分
var seconds = date.getSeconds(); // 獲取當前時間秒
// 月份設置
if (month >= 1 && month <= 9) {
month = "0" + month;
}
// 日設置
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
// 時設置
if(hours>=0&&hours<=9){
hours="0"+hours;
}
// 分設置
if(minutes>=0&&minutes<=9){
minutes="0"+minutes;
}
// 秒設置
if(seconds>=0&&seconds<=9){
seconds="0"+seconds;
}
var currentdate = year + '年' + month + '月' + strDate + '日' + " "+ hours + ":" + minutes + ":" + seconds;
return currentdate;
}
var idNum = 0;
function addComment(){
var inputValue = document.getElementById('name').value; // 獲取暱稱的值
var textValue = document.getElementById('comContent').value; // 獲取評論內容
// 判斷暱稱和評論內容是否爲空
if(inputValue==''){
alert('暱稱不能爲空');
}
if(textValue==''){
alert('評論內容不能爲空');
}
idNum++;
var comContent = document.getElementById('comment'); // 獲取comment元素節點
var newComment = comContent.cloneNode(true); // 複製comContent所有元素節點，包括子元素
newComment.setAttribute('id',"comment"+idNum); // 給新複製的節點設置屬性id，並隨着idNum自加改變屬性值
newComment.getElementsByTagName('span')[0].innerText = inputValue; // 將暱稱的值賦值到新複製的span上
newComment.getElementsByTagName('time')[0].innerText = getNowFormatDate();
newComment.getElementsByTagName('p')[0].innerText = textValue; // 將評價的內容賦值到新複製的p上
var commentDiv = document.getElementById('com');
commentDiv.appendChild(newComment); // 在commentDiv後添加，在comContent後添加不行
// 初始化暱稱和評價內容
document.getElementById('name').value = '';
document.getElementById('comContent').value = '';
}
</script>
</html>
效果動態圖
