JavaScript的案例（數據校驗，js輪播圖，頁面定時彈窗）
阿新 • • 發佈：2018-08-07
頁面 span one align 數據校驗 lse 格式 用戶輸入 ade
1.數據校驗
步驟
1.確定事件（onsubmit）並綁定一個函數
2.書寫這個函數，獲取數據，並綁定id
3.對用戶輸入數據進行判斷
4.數據合法，讓表單提交，非法不讓表單提交
如何控制表單提交：onsubmit用於提交的位置，定義函數是給出一個返回值
onsubmit=return checkform()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function checkForm(){ var uValue=document.getElementById("username").value; if(uValue==""){ document.getElementById("remind").innerHTML="用戶名不能為空 "; return false; } var pValue=document.getElementById("password").value; if(pValue==""){ alert("密碼不能為空"); return false; } var eValue=document.getElementById("email".value); if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(eValue)){ alert("郵箱格式不正確") return false } } </script> </head> <body> <div align="center"> <form action="#" method="get" name="regForm" onsubmit="return checkForm()"> 用戶名：<input type="text" name="username" id="username"/><br /> <font id="remind" color="red"></font><br /><br /> 密 碼：<input type="password" name="password" id="password"/><br /><br /><br /> 郵 箱：<input type="text" name="email" id="email" /><br /><br /><br /> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </form> </div> </body> </html>
2.js輪播圖
步驟
1.確定事件（onload）並為其綁定一個函數
2.書寫綁定的這個函數
3.書寫定時任務
4.書寫定時任務裏面的函數
5.通過變量的方式進行循環
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 500px; height: 350px; margin: auto; text-align: center; } </style> <script type="text/javascript"> function init(){ setInterval("changeImg()",1000) } var i=0; function changeImg(){ document.getElementById("img").src="img/"+(i%5+1)+".jpg"; i++; } </script> </head> <body onload="init()"> <div> <img src="img/1.jpg" width="500px" id="img"/> </div> </body> </html>
3.頁面定時彈窗
1.確定事件（onload）並為其綁定一個函數
2.書寫綁定函數，並綁定id
3.隱藏一個廣告圖片
4.利用定時器將display顯現（block）
5.清除定時器，書寫隱藏圖片定時操作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定時彈出廣告</title> <script type="text/javascript"> function tim(){ a=setTimeout("showAd()",3000); } function showAd(){ adEle=document.getElementById("img"); adEle.style.display="block" clearTimeout(a); b=setTimeout("hidAd()",3000) } function hidAd(){ adEle.style.display="none" } </script> </head> <body onload="tim()"> <img src="img/廣告.jpg" style="display: none;" id="img"/> </body> </html>
JavaScript的案例（數據校驗，js輪播圖，頁面定時彈窗）