body部分效果如下:
<body>
<h3>我的留言板</h3>
<!-- <p id="ban"></p> -->
<!-- <input type="textarea" id="ban">-->
<hr/>
<textarea id="ban"></textarea>
<button id="submit" onclick="Submit()">提交留言</button>
<button id="clear" onclick="Clear()">清除所有留言</button>
<h3>留言区</h3>
<hr/>
<div id="printBd"></div>
</body>
js代码如下:
<script>
var textA = document.getElementById("ban");
var printB = document.getElementById("printBd");
var printBO = document.createElement("ol");
printBO.setAttribute("id","print");
var arrKey = new Array(); // 我的浏览器Key不能识别调用,故取巧自定义数组表示键值对数
var count = 0; // 相当于localStorage.length;
display(); // 一进来就刷新
function display(){ // 每次操作的实时更新
console.log(count);
// 每次更新应该清除之前的数据
if(printB.childNodes.length==0){
printB.appendChild(printBO);
// printBO.innerHTML="暂无留言。";
}else{
// printB.removeChild(printBO);
printBO.innerHTML=""; //清除之前的数据防止重合
}
if(count==0){printBO.innerHTML="暂无留言。";}
var arr1 = new Array();
var num = localStorage.length;
alert("当前localStorage的数量为:"+num);
for(var j=0;j<num;j++){
arr1[j]=localStorage.getItem(arrKey[j]);
var olLi = document.createElement("li");
// alert(arrKey[j]+arr1[j]);
olLi.setAttribute("id","li"+j)
olLi.innerHTML=arrKey[j]+" "+arr1[j]+" "+ '<input type="button" value="删除留言" onclick="reduce('+j+')"/>';
// alert(olLi.innerHTML); '<input type="button" value="删除" onclick="reduce('+n+')" />';
printBO.appendChild(olLi);
// printB.appendChild(printBO);
console.log(count);
}
}
function reduce(j){
var Id = "li"+j
var olLiB = document.getElementById(Id);
printBO.removeChild(olLiB);
count = parseInt(count) - 1;
if(count<0){count=0;}
console.log(count);
localStorage.removeItem(arrKey[j]);
display();
}
function Submit(){
var text = document.getElementById("ban").value;//故为value,而非innnerHTML
// alert(text);为空,因为innerHtml为标签中间的内容,而非textarea内的内容。
if(text!=""){
var d = new Date();
month = d.getMonth()+1;
d = d.getFullYear()+"-"+month+"-"+d.getDay()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
arrKey[parseInt(count)] = d;
count = parseInt(count) + 1;
localStorage.setItem(d,text);
display();
}else{
alert("内容不为能空!");
display();
}
}
function Clear(){
var num = localStorage.length;
for(var i=0;i<num;i++){
localStorage.clear();
count = 0;
}
display();
}
</script>
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业6</title>
<style>
#ban{
width: 500px;
height: 300px;
border: 2px solid black;
display: block;
margin-bottom: 20px;
}
li{
font:15px 楷体;
}
</style>
</head>
<body>
<h3>我的留言板</h3>
<!-- <p id="ban"></p> -->
<!-- <input type="textarea" id="ban">-->
<hr/>
<textarea id="ban"></textarea>
<button id="submit" onclick="Submit()">提交留言</button>
<button id="clear" onclick="Clear()">清除所有留言</button>
<h3>留言区</h3>
<hr/>
<div id="printBd"></div>
</body>
<script>
var textA = document.getElementById("ban");
var printB = document.getElementById("printBd");
var printBO = document.createElement("ol");
printBO.setAttribute("id","print");
var arrKey = new Array(); // 我的浏览器Key不能识别调用,故取巧自定义数组表示键值对数
var count = 0; // 相当于localStorage.length;
display(); // 一进来就刷新
function display(){ // 每次操作的实时更新
console.log(count);
// 每次更新应该清除之前的数据
if(printB.childNodes.length==0){
printB.appendChild(printBO);
// printBO.innerHTML="暂无留言。";
}else{
// printB.removeChild(printBO);
printBO.innerHTML=""; //清除之前的数据防止重合
}
if(count==0){printBO.innerHTML="暂无留言。";}
var arr1 = new Array();
var num = localStorage.length;
alert("当前localStorage的数量为:"+num);
for(var j=0;j<num;j++){
arr1[j]=localStorage.getItem(arrKey[j]);
var olLi = document.createElement("li");
// alert(arrKey[j]+arr1[j]);
olLi.setAttribute("id","li"+j)
olLi.innerHTML=arrKey[j]+" "+arr1[j]+" "+ '<input type="button" value="删除留言" onclick="reduce('+j+')"/>';
// alert(olLi.innerHTML); '<input type="button" value="删除" onclick="reduce('+n+')" />';
printBO.appendChild(olLi);
// printB.appendChild(printBO);
console.log(count);
}
}
function reduce(j){
var Id = "li"+j
var olLiB = document.getElementById(Id);
printBO.removeChild(olLiB);
count = parseInt(count) - 1;
if(count<0){count=0;}
console.log(count);
localStorage.removeItem(arrKey[j]);
display();
}
function Submit(){
var text = document.getElementById("ban").value;//故为value,而非innnerHTML
// alert(text);为空,因为innerHtml为标签中间的内容,而非textarea内的内容。
if(text!=""){
var d = new Date();
month = d.getMonth()+1;
d = d.getFullYear()+"-"+month+"-"+d.getDay()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
arrKey[parseInt(count)] = d;
count = parseInt(count) + 1;
localStorage.setItem(d,text);
display();
}else{
alert("内容不为能空!");
display();
}
}
function Clear(){
var num = localStorage.length;
for(var i=0;i<num;i++){
localStorage.clear();
count = 0;
}
display();
}
</script>
</html>