JavaScript留言板效果代码实例
分类:实例代码
分享一段代码实例,它实现了简单的留言板效果。
这里主要演练的是对于dom元素的相关操作技巧,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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>
JavaScript留言板效果代码实例,这样的场景在实际项目中还是用的比较多的,关于JavaScript留言板效果代码实例就介绍到这了。
JavaScript留言板效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。