js實現的留言本效果程式碼例項
本章節分享一段程式碼例項,它實現了簡單的留言本功能。
點選按鈕能夠提交留言,並即時顯示,如果沒有填寫任何內容,則給出對應提示。
點選可以刪除當前留言,具體看程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ padding:0; margin:0; } li{list-style:none;} #parent{ width:600px; margin:0 auto; } h4{ line-height:40px; margin-bottom:10px; border-bottom:1px solid #333; color:#FF3300 } p{ width:100%; background:#f1f1f1; position:relative; margin-bottom:25px; } #box{ width:580px; padding:25px 10px 0; border:1px solid #ddd; margin-bottom:10px; } span{ position:absolute; top:-20px; right:0px; } em{ position:relative; top:-13px; } #text{ width:100%; height:90px; overflow:auto; } #btn{ width:20%; height:50px; } </style> <script type="text/javascript"> i=1; function fnsubmit(){ var odiv=document.getElementById("box"); var oem=odiv.getElementsByTagName("em")[0]; var otext=document.getElementById("text"); var oli=odiv.getElementsByTagName("li"); var add_li=document.createElement("li"); var o_span=document.createElement("span"); if(otext.value==""){ alert("請填寫留言內容!"); return; } oem.style.display="none"; o_span.style.position="absolute"; o_span.style.top="-20px"; o_span.style.right="20px"; o_span.style.background="#cccccc"; add_li.style.position="relative"; add_li.index=i; add_li.style.background="#cccccc"; add_li.style.marginBottom="20px"; var str=document.createTextNode(i+"、"+otext.value); var strspan=document.createTextNode("確定刪除"+i+"、"+otext.value+"內容?"); add_li.appendChild(o_span); o_span.style.display="none"; o_span.appendChild(strspan); add_li.appendChild(str); odiv.appendChild(add_li); i++; for(j=0;j<oli.length;j++){ var m=j; oli[j].onmouseover=function(){ this.style.background="#ffff00"; (this.childNodes(o_span)).style.display="block"; }; oli[j].onmouseout=function(){ this.style.background="#cccccc"; (this.childNodes(o_span)).style.display="none"; }; oli[j].onclick=function(){ m--; odiv.removeChild(this); if(m<0){ oem.style.display="block"; }; }; }; } window.onload=function(){ var obt=document.getElementById("btn"); obt.onclick=function(){ fnsubmit() } } </script> </head> <body> <div id="parent"> <h4>留言內容:</h4> <div id="box"><em>這裡會顯示留言內容……</em></div> <input type="text" id="text"> <br /> <input id="btn" type="button" value="發表留言" /> </div> <br /> </body> </html>
相關文章
- js實現的垂直選項卡效果程式碼例項JS
- js實現的div拖動效果例項程式碼JS
- js實現的元素抖動效果程式碼例項JS
- js實現刮刮樂抽獎效果程式碼例項JS
- angularjs實現的購物車效果程式碼例項AngularJS
- js模擬實現多型效果程式碼例項JS多型
- js點選div實現閃爍效果程式碼例項JS
- jquery實現的選項卡效果例項程式碼jQuery
- js實現的國家、省、市級聯效果程式碼例項JS
- js實現的數字四捨五入效果程式碼例項JS
- canvas實現的驗證碼效果程式碼例項Canvas
- jquery實現的分頁效果例項程式碼jQuery
- canvas實現的鋸齒效果程式碼例項Canvas
- canvas實現的鐘表效果程式碼例項Canvas
- javascript實現animate()動畫效果程式碼例項JavaScript動畫
- css實現矩形切角效果程式碼例項CSS
- js重力球效果程式碼例項JS
- js煙花效果程式碼例項JS
- js鐘錶效果程式碼例項JS
- js秒錶效果程式碼例項JS
- js實現的div元素尺寸彈性縮放效果程式碼例項JS
- 原生js實現的多個陣列合並效果程式碼例項JS陣列
- 利用canvas實現的驗證碼效果程式碼例項Canvas
- js實現jquery的extend()程式碼例項JSjQuery
- js實現的警告框例項程式碼JS
- html實現簡單ListViews效果的例項程式碼HTMLView
- css3實現的折角效果程式碼例項CSSS3
- css實現的div垂直居中效果程式碼例項CSS
- javascript實現的淡入淡出效果程式碼例項JavaScript
- javascript實現的燃放煙火效果程式碼例項JavaScript
- jquery實現的滑動軸效果程式碼例項jQuery
- canvas實現的雪花飄落效果程式碼例項Canvas
- canvas實現的藍色雨滴效果程式碼例項Canvas
- canvas實現的彈力小球效果程式碼例項Canvas
- CSS實現的柱狀圖效果例項程式碼CSS
- javascript實現的動畫效果簡單例項程式碼JavaScript動畫單例
- js元素的震動效果程式碼例項JS
- css實現圖片灰度效果程式碼例項CSS