JS实现简易留言板增删功能

2023-08-01 22:47:04 69

本文实例为大家分享了JS实现留言板增删功能的具体代码，供大家参考，具体内容如下

##**JS实现简易留言板的增删功能**
一个很简单的留言板，实现**增删**功能，因为没有数据库，所以只是一个静态的留言板功能。
**修改**功能其实也可以添加，但是我现在技术不够，等以后可能会添加**修改**功能。
代码很简单，注释很清楚。```








Document

*{
margin:0;
padding:0;
list-style:none;
}

.cle:after{
height:0;
clear:both;
visibility:hidden;
display:none;
content:"";
}

.bbslist{
width:400px;
margin:10pxauto;
border-radius:5px;
background:#A6A6A6;
border:1pxsolid#a6a6a6;
}

.bbslist>ul{
margin:8px10px10px10px;
display:block;
clear:both;
text-align:center;
box-shadow:3px3px25px#A6A6A6;
}

.bbslist>ul>li{
background:#f4f4f4;
margin:10px0;
line-height:30px;
height:30px;
border-radius:5px;
text-align:center;
box-shadow:3px3px17px#A6A6A6;
padding:05px;
font-size:12px;
border:1pxsolid#a6a6a6;
position:relative;
transition:all0.5s;
animation:liBg0.3s;
overflow:hidden;
}

@keyframesliBg{
from{
background:#442222;
opacity:0;
left:-20px;
height:0;
}

to{
background:#f4f4f4;
opacity:1;
left:0;
height:30px;
}
}

.mesDiv{
width:400px;
background:#eee;
height:130px;
border:1pxsolid#a6a6a6;
margin:20pxauto;
border-radius:5px;
box-shadow:3px3px17px#A6A6A6;
animation:msgHeight0.5s;
overflow:hidden;
}

@keyframesmsgHeight{
from{
height:0;
margin-top:50px;
opacity:0;
}

to{
height:130px;
margin-top:20px;
opacity:1;
}
}

.inputSty{
width:90%;
height:30px;
display:block;
color:#666;
border:1pxsolid#ddd;
padding-left:5px;
line-height:30px;
font-size:12px;
clear:both;
margin:10pxauto;
border-radius:5px;
}

.btnSty{
width:30%;
height:25px;
margin:0auto;
display:block;
cursor:pointer;
transition:all0.2s;
border-radius:5px;
box-shadow:3px3px10px#A6A6A6;
}

.btnSty:hover{
width:20%;
height:30px;
border-radius:5px;
box-shadow:3px3px10px#A6A6A6;
}

.userSty{
width:25%;
height:25px;
margin:8px18px3px18px;
border-radius:5px;
box-shadow:3px3px10px#A6A6A6;
}

.dd{
width:135px;
height:10px;
position:relative;
top:-10px;
font-size:8px;
float:right;
clear:both;
}

.delbtn{
width:35px;
height:22px;
border-radius:5px;
position:relative;
top:5px;
right:-4px;
float:right;
z-index:2;
color:red;
/*box-shadow:2px2px3px#A6A6A6;*/
}

— — — 留言列表 — — —

//定义一个函数用来重复获取gId("value"),中value的ID属性 functiongId(n){ returndocument.getElementById(n); } //获取姓名 gId("userId").onclick=function(){ varusername=prompt("请输入您的姓名:"); alert("您好！"+username+"。"); gId("userId").value=username+"的留言："; } //删除留言 functiondelMsg(d){ varparentUl=d.parentNode; varparentDiv=parentUl.parentNode; parentDiv.removeChild(parentUl); } //提交留言 gId('btnId').onclick=function(){ //获取时间 vartoday=newDate(); varyear=today.getFullYear(); varmonth=today.getMonth()+1; varday=today.getDate(); varhours=today.getHours(); varmin=today.getMinutes(); varsecond=today.getSeconds(); vartime=year+"年"+month+"月"+day+"日"+""+hours+"时"+min+"分"+second+"秒"; //varv=; if(gId('msgId').value===''){ alert("留言不能为空"); returnfalse; } //创建li else{ //创建一个新元素ul varulcrate=document.createElement('ul'); //创建新元素li varlicrate=document.createElement('li'); //创建一个时间盒子 vardivcrate=document.createElement('div'); //创建一个删除按钮 vardelbtn=document.createElement('input'); //给删除按钮赋属性 delbtn.setAttribute('type','button'); delbtn.setAttribute('class','delbtn'); delbtn.setAttribute('value','删除'); delbtn.setAttribute('onclick','delMsg(this)'); //给创建的ul赋属性 ulcrate.setAttribute('id','ulId'); //给时间盒子设置属性 //divcrate.setAttribute('class','dd'); divcrate.className="dd"; //向li里添加在输入框中获取的值 licrate.innerHTML=gId('msgId').value; //把，删除按钮，留言内容，时间盒子添加到创建的ul里 ulcrate.appendChild(delbtn); ulcrate.appendChild(licrate); ulcrate.appendChild(divcrate); //给时间盒子传递时间 divcrate.innerHTML=time; //把创建的ul添加到最外层的div里 gId('masMan').appendChild(ulcrate); //留言内容初始化 gId("msgId").value=""; } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

JS实现简易留言板增删功能

热门推荐

随机推荐