留言板_留言薄 csdn-CSDN博客

本文链接：https://blog.csdn.net/WgGaopeng/article/details/76273540

一、留言板的css部分：

margin: 0;

padding: 0;

}

body,html{

width: 100%;

height: 100%;

}

#wrap{

width: 600px;

background-color: gainsboro;

margin: 20px auto;

border: 1px solid red;

padding: 10px;

}

li{

list-style: none;

}

#content_view {

padding: 10px;

}

#content_view li{

padding: 10px 0;

line-height: 22px;

}

#content_view li #userName{

height: 30px;

width: 530px;

font-size: 18px;

/*垂直对齐文本的顶部*/

vertical-align: top;

}

#content_view #content{

width: 530px;

height: 100px;

font-size: 18px;

vertical-align: top;

}

#content_view #submit{

width: 100px;

height: 30px;

border: 1px solid gray;

background-color: white;

position: relative;

left: 35px;

font-size: 18px;

}

#comment_list{

}

#comment_list h2{

margin-top: 10px;

margin-bottom: 20px;

}

#comment_li h3{

background-color: mistyrose;

padding: 10px;

}

#comment_li p{

padding: 10px;

font-size: 16px;

text-indent: 2em;

}

#comment_li a{

float: right;

text-decoration: none;

}

</style>

</head>

二、留言板的Html部分：

<body>

<ul>

<li>

QQ:<input id="userName" type="text" />

</li>

<li>

留言:<textarea name="" id="content" rows="10" cols="30"></textarea>

</li>

<li>

</li>

</ul>

</div>

</ul>

</div>

</body>

三、留言板的js部分：

//窗口加载事件

//只要网页中的所有元素加载完成之后,才会触发里面的代码

window.onload = function (){

//获取姓名姓名输入框

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

//获取内容输入框

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

//获取提交按钮

var submitBtn = document.getElementById("submit");

//获取用来显示留言的ul列表

var ul = document.getElementById("comment_li");

var timer;

var li;

//提交按钮的点击事件

submitBtn.onclick = function (){

//获取姓名输入框里的内容

var name = userName.value;

//获取留言内容

var comment_p = content.value;

//判断,不允许输入框为空

if (name == "" || comment_p == "") {

alert("留言者的姓名和留言内容不能为空!");

return;//提前终止函数的执行

}

//提交之后,清空输入框

userName.value = "";

content.value = "";

//创建li节点 (显示留言)

li = document.createElement("li");

//<li><h3>小明</h3><p>小强,好久不见!<a href="###">删除</a></p></li>

//li里添加内容

li.innerHTML = '<h3>' + name + '</h3><p>' + comment_p + '<a href="###">删除</a></p>';

//插入节点

if (ul.children.length > 0) {

//每次添加的新留言,插入到第一条

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

} else{

//说明此时时第一条留言

ul.appendChild(li);

}

//添加要执行的动画

var t = 0;

var start = 0;//添加属性开始量

var end = li.offsetHeight;//属性的结束量

//每次执行tween.js动画之前,将li的高度置为0

li.style.height = 0;

var change = end - start;//属性的变化量

var d = 20;

clearInterval(timer);

timer = setInterval(function (){

t++;

if(t == d){

//清除定时器

clearInterval(timer);

}

//执行动画

li.style.height = Tween.Bounce.easeOut(t,start,change,d) + "px";

},30);

//获取删除a链接标签

var deleteObj = li.getElementsByTagName("a")[0];

//删除按钮的点击事件

deleteObj.onclick = function (){

//获取删除按钮所在的li节点

var deleteLi =this.parentNode.parentNode;

var t = 0;

var start = deleteLi.offsetHeight;

var end = 0;

var change = end - start;

var d = 20;

clearInterval(timer);

timer = setInterval(function (){

t++;

if(t == d){

//删除li

ul.removeChild(deleteLi);

//清除定时器

clearInterval(timer);

}

deleteLi.style.height = Tween.Quad.easeIn(t,start,change,d) + "px";

},30);

}

</script>

</html>