删除留言代码html代码,JS实现简易留言板增删功能

本文实例为大家分享了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: 10px auto;

border-radius: 5px;

background: #A6A6A6;

border: 1px solid #a6a6a6;

}

.bbslist>ul {

margin: 8px 10px 10px 10px;

display: block;

clear: both;

text-align: center;

box-shadow: 3px 3px 25px #A6A6A6;

}

.bbslist>ul>li {

background: #f4f4f4;

margin: 10px 0;

line-height: 30px;

height: 30px;

border-radius: 5px;

text-align: center;

box-shadow: 3px 3px 17px #A6A6A6;

padding: 0 5px;

font-size: 12px;

border: 1px solid #a6a6a6;

position: relative;

transition: all 0.5s;

animation: liBg 0.3s;

overflow: hidden;

}

@keyframes liBg {

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: 1px solid #a6a6a6;

margin: 20px auto;

border-radius: 5px;

box-shadow: 3px 3px 17px #A6A6A6;

animation: msgHeight 0.5s;

overflow: hidden;

}

@keyframes msgHeight {

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: 1px solid #ddd;

padding-left: 5px;

line-height: 30px;

font-size: 12px;

clear: both;

margin: 10px auto;

border-radius: 5px;

}

.btnSty {

width: 30%;

height: 25px;

margin: 0 auto;

display: block;

cursor: pointer;

transition: all 0.2s;

border-radius: 5px;

box-shadow: 3px 3px 10px #A6A6A6;

}

.btnSty:hover {

width: 20%;

height: 30px;

border-radius: 5px;

box-shadow: 3px 3px 10px #A6A6A6;

}

.userSty {

width: 25%;

height: 25px;

margin: 8px 18px 3px 18px;

border-radius: 5px;

box-shadow: 3px 3px 10px #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: 2px 2px 3px #A6A6A6; */

}

• — — — 留言列表 — — —

//定义一个函数用来重复获取gId("value"),中value的ID属性

function gId(n) {

return document.getElementById(n);

}

//获取姓名

gId("userId").onclick = function () {

var username = prompt("请输入您的姓名:");

alert("您好！" + username + "。");

gId("userId").value = username + "的留言：";

}

//删除留言

function delMsg(d) {

var parentUl = d.parentNode;

var parentDiv = parentUl.parentNode;

parentDiv.removeChild(parentUl);

}

//提交留言

gId('btnId').onclick = function () {

//获取时间

var today = new Date();

var year = today.getFullYear();

var month = today.getMonth() + 1;

var day = today.getDate();

var hours = today.getHours();

var min = today.getMinutes();

var second = today.getSeconds();

var time = year + "年" + month + "月" + day + "日" + " " + hours + "时" + min + "分" + second + "秒";

// var v = ;

if (gId('msgId').value === '') {

alert("留言不能为空");

return false;

}

//创建li

else {

//创建一个新元素ul

var ulcrate = document.createElement('ul');

//创建新元素li

var licrate = document.createElement('li');

//创建一个时间盒子

var divcrate = document.createElement('div');

//创建一个删除按钮

var delbtn = 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 = "";

}

}

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