生活随笔
收集整理的這篇文章主要介紹了
JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.數據校驗
?? ??? ??? ?步驟
?? ??? ??? ?1.確定事件（onsubmit）并綁定一個函數
?? ??? ??? ?2.書寫這個函數，獲取數據，并綁定id
?? ??? ??? ?3.對用戶輸入數據進行判斷
?? ??? ??? ?4.數據合法，讓表單提交，非法不讓表單提交
?? ??? ??? ?
?? ??? ??? ?如何控制表單提交：onsubmit用于提交的位置，定義函數是給出一個返回值
?? ??? ??? ?οnsubmit=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> ?
轉載于:https://www.cnblogs.com/littlepage/p/9438825.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀
總結
以上是生活随笔為你收集整理的JavaScript的案例（数据校验，js轮播图，页面定时弹窗）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
