js简单的留言功能代码实例
分类:实例代码
当然真正具有实用价值的留言板需要通过和数据库的配合,把留言写入数据库,然后再显示出来。
本章节只是演示一下如何使用纯前端实现留言板功能,主要演练一下dom元素的操作。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> #box{ width: 800px; margin: 0 auto; } textarea{ width: 800px; } #ul1{ list-style: none; position: relative; } #li:first-child{ color: red; font-weight: bold; } #li{ border-bottom: 1px dashed #ebebeb; margin:10px 0; padding:8px 0; } #ddd{ text-decoration: none; position: absolute; bottom: 0; right: 0; margin:0 5px; display: block; cursor: pointer; } </style> </head> <body> <div id="box"> <h3>在下面可以进行留言</h3> <textarea name="" id="text" rows="10"></textarea> <input type="button" value="确认发布" id="btn"/> <h3>全部留言</h3> <hr/> </div> <script> var box = document.getElementById("box"); var text = document.getElementById("text"); var btn = document.getElementById("btn"); var ul = document.createElement("ul"); ul.id = "ul1"; ul.className = "li1"; var div = document.createElement("div"); var div2 = document.createElement("div2"); var date = new Date(); var year = date.getFullYear(); var yue = date.getMonth() + 1; var ri = date.getDate(); var week = date.getDay(); var hour = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); var br = document.createElement("br"); btn.onclick = function() { //创建时间 div = document.createTextNode(" " + year + "-" + yue + "-" + ri + ""); div2 = document.createTextNode(week + " " + hour + ":" + min + ":" + sec); var li = document.createElement("li"); li.id = "li"; //创建删除功能 var oA = document.createElement("a"); oA.id = "ddd"; oA.href = "#"; oA.innerHTML = "删除"; oA.className = "del"; oA.style.display = "block"; //删除 oA.onclick = function() { ul.removeChild(this.parentNode); }; //添加头像 var aImg = document.createElement("img"); var num = parseInt(Math.random() * 8 + 1); aImg.src = "img/face" + num + ".gif"; //解决兼容问题 var ali = ul.children; if (ali.length == 0) { ul.appendChild(li); } else { ul.insertBefore(li, ali[0]); } //添加节点 box.appendChild(ul); var textnode = document.createTextNode(text.value); li.appendChild(aImg); li.appendChild(textnode); li.appendChild(oA); li.appendChild(div); li.appendChild(div2); } </script> </body> </html>
js简单的留言功能代码实例,这样的场景在实际项目中还是用的比较多的,关于js简单的留言功能代码实例就介绍到这了。
js简单的留言功能代码实例属于前端实例代码,有关更多实例代码大家可以查看。