首页 > 蚂蚁部落 > 正文

js实简单留言板效果代码实例
2017-08-29 10:16:22   来源:   评论:0 点击:

分享一段代码实例,它实现了简单的留言板效果。这里主要演练的是对于dom元素的相关操作技巧,代码实例如下:[HTML] 纯文本查看 复制代码&

分享一段代码实例,它实现了简单的留言板效果。

这里主要演练的是对于dom元素的相关操作技巧,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">* {  margin: 0;  padding: 0;}body, html {  height: 100%;  width: 100%;}#wrap {  width: 600px;  background: rgb(200,200,200);  margin: 20px auto;  padding: 10px;}li {  list-style: none;}#content_view {  padding: 10px;}#content_view li {  padding: 10px 0;  line-height: 22px;}#content_view #userName {  height: 30px;  width: 520px;  font-size: 16px;  vertical-align: top;}#content_view #content {  width: 520px;  height: 100px;  font-size: 16px;  vertical-align: top;}#content_view #submit {  width: 100px;  height: 30px;  border: 1px solid gray;  background: white;  position: relative;  left: 48px;  font-size: 16px;}#comment_list h2 {  margin-top: 10px;}#comment_list h3 {  padding: 10px;  background: mistyrose;}#comment_list p {  padding: 10px;  font-size: 14px;  text-indent: 2em;}#comment_list a {  text-decoration: none;  float: right;  top: 20px;}</style><script type="text/javascript">window.onload = function() {  var userName = document.getElementById("userName");  var content = document.getElementById("content");  var submitBtn = document.getElementById("submit");  var ul = document.getElementById("comment_ul");  var timer = null;  submitBtn.onclick = function() {    var name = userName.value;    var comment_P = content.value;     if (name == "" || comment_P == "") {      alert("留言者的姓名和留言内容不能为空!");      return;    }     userName.value = "";    content.value = "";    var li = document.createElement('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 start = 0;    var end = li.offsetHeight;     li.style.height = 0;    var change = end - start;    var t = 0;    var endT = 20;     clearInterval(timer);    timer = setInterval(function() {      t++;      if (t == endT) {        clearInterval(timer);      }       li.style.height = Tween.Bounce.easeOut(t, start, change, endT) + 'px';    }, 30);      var deleteAObj = li.getElementsByTagName('a')[0];     deleteAObj.onclick = function() {       var deleteLi = this.parentNode.parentNode;      var start = li.offsetHeight;      var end = 0;      var change = end - start;      var t = 0;      var endT = 20;      clearInterval(timer);      timer = setInterval(function() {        t++;        if (t == endT) {           ul.removeChild(deleteLi);          clearInterval(timer);        }        li.style.height = Tween.Quart.easeIn(t, start, change, endT) + 'px';      }, 30);    }  }}</script></head><body>  <div id="wrap">     <div id="content_view">      <ul>        <li>          QQ:<input type="text" id="userName" />        </li>        <li>          留言:<textarea name="" id="content" cols="30" rows="10"></textarea>        </li>        <li>          <input type="button" value="提交" id="submit" />        </li>      </ul>    </div>     <div id="comment_list">      <h2>显示留言</h2>      <ul id="comment_ul">      </ul>    </div>   </div></body></html>

相关热词搜索:

上一篇:js和css3实现的点赞放大效果代码实例
下一篇:js钟表效果代码实例

分享到: 收藏
评论排行