留言板的javascript写法

来源：互联网发布：我的淘宝怎么改会员名编辑：程序博客网时间：2024/05/13 06:51

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

*{margin:0;padding:0;}

div{width:500px;

height:auto!important;

min-height:800px;

height:800px;

margin:50px auto;

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

user-select: none;

}

#txt{

width:440px;

height:169px;

}

#list{

width:400px;

height:auto!important;

min-height:400px;

height:400px;

border:1pxsolid #ccc;

list-style:none;

}

li{

border-bottom:1pxsolid #ccc;

overflow:hidden;

margin-bottom:8px;

height:45px;}

font-size:12px;

color:#f5e79e;

float:right;}

font-size:20px;

color:red;}

span{

margin-bottom:5px;

}

</style>

</head>

<body>

<div>

输入你的名字:<input type="text"id="Name">

</textarea><br>

</div>

</body>

var txt=document.getElementById("txt");

var add=document.getElementById("add");

var clear=document.getElementById("clear");

var list=document.getElementById("list");

var Name=document.getElementById("Name");

//Name.value+txt.value

data();

add.onclick=function(){

var time=newDate();

var val=Name.value+"|"+txt.value;//string

console.log(val);

localStorage.setItem(time,val);

console.log(localStorage.getItem(time));

data();

};

clear.onclick=function(){

localStorage.clear();

list.innerHTML="";

txt.value="";

};

function data(){

var str="";

//先存取数据

console.log(localStorage.length);//3

for(vari=0;i<localStorage.length;i++){

var keys=localStorage.key(i);//获取循环下所有key值;

console.log(keys);

//取到value

var value=localStorage.getItem(keys);//value Name.value+"|"+txt.value;

if(value.split("|")[0]==""){

str+="<li><b>匿名人</b>:<span>"+value.split("|")[1]+"</span><p>"+keys+"</p></li>"

}else{

str+="<li><b>"+value.split("|")[0]+"</b>:<span>"+value.split("|")[1]+"</span><p>"+keys+"</p></li>"

}

list.innerHTML=str;

var lis=list.getElementsByTagName("li");

for(var i=0;i<lis.length;i++){

lis[i].index=i;

lis[i].ondblclick=function(){

list.removeChild(this);

var ks=localStorage.key(this.index);

localStorage.removeItem(ks);

}

</script>

</html>

0 0