js簡單的留言功能程式碼例項
當然真正具有實用價值的留言板需要通過和資料庫的配合,把留言寫入資料庫,然後再顯示出來。
本章節只是演示一下如何使用純前端實現留言板功能,主要演練一下dom元素的操作。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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>
相關文章
- Angularjs製作簡單的路由功能簡單程式碼例項AngularJS路由
- js選項卡簡單程式碼例項JS
- js map集合簡單程式碼例項JS
- JSON簡單格式程式碼例項JSON
- js實現的留言本效果程式碼例項JS
- js簡單日曆效果程式碼例項JS
- js簡單摺紙效果程式碼例項JS
- jquery簡單計算機功能程式碼例項jQuery計算機
- js prototype原型應用簡單例項程式碼JS原型單例
- js解析xml檔案簡單程式碼例項JSXML
- js實現的字串簡單編碼和解碼程式碼例項JS字串
- JavaScript留言板效果程式碼例項JavaScript
- node.js [superAgent]請求簡單程式碼例項Node.js
- js自定義實現的簡單編碼和解碼程式碼例項JS
- jQuery實現的簡單投票簡單程式碼例項jQuery
- js微信視窗關閉事件簡單程式碼例項JS事件
- js自定義回撥函式簡單程式碼例項JS函式
- js簡單時間日期格式化程式碼例項JS
- js簡單富文字編輯器效果程式碼例項JS
- javascript閉包簡單程式碼例項JavaScript
- javascript作用域簡單例項程式碼JavaScript單例
- JavaScript 動畫效果簡單例項程式碼JavaScript動畫單例
- js對時間日期簡單格式化程式碼例項JS
- js 將xml轉換為table表格簡單程式碼例項JSXML
- js使用者登錄檔單驗證簡單程式碼例項JS
- jQuery表單驗證簡單程式碼例項jQuery
- JavaScript簡單的日曆效果程式碼例項JavaScript
- js獲取指定單元格的內容程式碼例項例項JS
- js讀寫二進位制檔案簡單程式碼例項JS
- 使用js簡單當前電腦是否聯網程式碼例項JS
- js將小數轉換為整數簡單程式碼例項JS
- jQuery鏈式呼叫簡單例項程式碼jQuery單例
- prototype原型繼承簡單程式碼例項原型繼承
- jquery自定義事件簡單例項程式碼jQuery事件單例
- jQuery簡單調色器程式碼例項jQuery
- 淡入淡出效果簡單程式碼例項
- js省市級聯選單程式碼例項JS
- css簡單水平導航選單程式碼例項CSS