使用innerHTML新聞列表添加小案例

NO IMAGE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#div1 {
margin: 100px auto;
width: 350px;
border: 1px;
height: 25px;
}
#div1 div {
width: 350px;
height: 25px;
margin-top: 0px;
margin-bottom: 0px;
background-color: blueviolet;
}
#div1 p {
float: left;
margin-top: 0px;
}
#stime {
float: left;
font-size: 15px;
line-height: 25px;
color: antiquewhite;
}
#div1 input {
float: left;
margin-left: 8px;
margin-top: 3px;
border: none;
background-color: antiquewhite;
}
#div1 button {
float: left;
margin-top: 3px;
line-height: 18px;
margin-left: 8px;
height: 18px;
border: none;
background-color: coral;
}
#jia {
float: right;
margin-right: 8px;
color: white;
font-size: 16px;
}
#list {
padding: 0 5px;
}
#list li {
height: 25px;
line-height: 25px;
border-bottom: 1px dotted #aaa;
font-size: 13px;
list-style-type: none;
}
#list span {
float: right;
font-size: 12px;
line-height: 25px;
}
</style>
</head>
<body>
<div id="div1">
<div>
<span id="stime"></span>
<p id="p">
<input id="ip1" type="text" />
<button id="btn">添加</button>
</p>
<span id="jia" onclick="show()">+</span>
</div>
<ul id="list"></ul>
</div>
<script>
var p = document.getElementById("p");//獲取P標籤
//頁面加載函數
window.onload = function () {
setInterval(function () {
var stime = document.getElementById("stime");
var time = new Date();
stime.innerText = time.toLocaleTimeString();
}, 1000);//時間動態顯示
p.style.display = "none";//默認打開隱藏P元素標籤內容
}
function show() {
p.style.display = "block";//點擊加號,顯示P元素標籤內容
}
var btn = document.getElementById("btn");//通過ID獲取按鈕,執行點擊事件
btn.onclick = function () {
var time = new Date().toLocaleTimeString();//時間
var text = document.getElementById("ip1");//獲取文本框
var list = document.getElementById("list");//獲取UI
list.innerHTML += "<li>" + text.value + "<span> " + time + "</span>" + "</li>";//在UI內部添加LI標籤,變量用+聯繫起來
p.style.display = "none";//添加完後隱藏P元素
text.value = "";//文本內容為空
}
</script>
</body>
</html>

涉及到的知識點有,間隔函數setinterval,點擊事件,style操作標籤元素的方法,innerHTML

相關文章

MVC基礎知識整理(一)

初識Linq

Ajax無刷新技術的踩坑點

七彩霓虹燈