留言板代码 php js,javascript实现留言板功能

这篇文章主要为大家详细介绍了JS实现留言板功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

每天一个JS 小demo之留言板。主要知识点：DOM方法的理解和运用

Document

.wrap {

width: 400px;

margin: 30px auto;

}

textarea {

display: block;

width: 100%;

height: 60px;

}

input {

display: block;

width: 60%;

margin: 15px auto;

}

li {

padding: 5px 10px;

position: relative;

word-break: break-all;

}

.red {

color: #000;

background: #f1f1f1;

}

.pink {

color: #000;

background: #ccc;

}

a {

position: absolute;

right: 0;

top: -20px;

background: yellow;

color: #fff;

}

#list {

margin: 0;

padding: 0;

list-style: none;

font: 14px/26px "宋体";

}

.clos {

position: absolute;

top: 0;

right: -50px;

width: 50px;

color: #fff;

background: #000;

padding: 5px 0;

text-decoration: none;

text-align: center;

}

.clos:hover {

box-shadow: 0 0 5px rgba(0,0,0,.5)

}

window.onload = function(){

var btn = document.querySelector('input');

var text = document.querySelector('textarea');

var list = document.querySelector('#list');

var colors = ["red","pink"];

var nub = 0;

btn.onclick = function(){

if(text.value.trim() == ""){

alert("打点字吧");

return false;

}

var li = document.createElement("li");

li.innerHTML = text.value;

// li.className = colors[nub%colors.length];

/* 判断a标签已经被添加，就让a标签显示出来，否则就添加 */

if(list.children[0]&&list.children[0].className=="red"){

li.className = "pink";

} else {

li.className = "red";

}

var a = null;

li.onmouseover = function(){

if(a) {

a.style.display = "block";

} else {

a = document.createElement("a");

a.href = "javascript:;";

a.className = "clos";

a.innerHTML = "删除";

a.onclick = function (){

list.removeChild(this.parentNode);

};

this.appendChild(a);

}

};

li.onmouseout = function(){

a.style.display = "none";

};

list.insertBefore(li,list.children[0]);

text.value = "";

nub++;

};

};

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