day3_JavaScript
案例一：使用JS完成註冊頁面表單校驗html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>獲取元素</title> <script> window.onload = function(){ //獲取頁面指定位置的元素 var uEle = document.getElementById("username"); //alert(uEle); //獲取頁面指定位置的內容(值) var uValue = uEle.value; alert(uValue); } </script> </head> <body> 用戶名：<input type="text" name="username" id="username"/><br /> 密碼: <input type="password" name="password" /> </body> </html>
使用JS完成註冊頁面表單校驗小程序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊頁面</title> <script> function checkForm(){ //alert("aa"); /**校驗用戶名*/ //1.獲取用戶輸入的數據 var uValue = document.getElementById("user").value; //alert(uValue); if(uValue==""){ //2.給出錯誤提示信息 alert("用戶名不能爲空!"); return false; } /*校驗密碼*/ var pValue = document.getElementById("password").value; if(pValue==""){ alert("密碼不能爲空!"); return false; } /**校驗確認密碼*/ var rpValue = document.getElementById("repassword").value; if(rpValue!=pValue){ alert("兩次密碼輸入不一致!"); return false; } /*校驗郵箱*/ var eValue = document.getElementById("eamil").value; if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){ alert("郵箱格式不正確!"); return false; } } </script> </head> <body> <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px"> <!--1.logo部分--> <tr> <td> <!--嵌套一個一行三列的表格--> <table border="1px" width="100%"> <tr height="50px"> <td width="33.3%"> <img src="../img/logo2.png" height="47px" /> </td> <td width="33.3%"> <img src="../img/header.png" height="47px" /> </td> <td width="33.3%"> <a href="#">登陸</a> <a href="#">註冊</a> <a href="#">購物車</a> </td> </tr> </table> </td> </tr> <!--2.導航欄部分--> <tr height="50px"> <td bgcolor="black"> <a href="#"> <font size="5" color="white">首頁</font> </a> <a href="#"> <font color="white">手機數碼</font> </a> <a href="#"> <font color="white">電腦辦公</font> </a> <a href="#"> <font color="white">鞋靴箱包</font> </a> <a href="#"> <font color="white">家用電器</font> </a> </td> </tr> <!--3.註冊表單--> <tr> <td height="600px" background="../img/regist_bg.jpg"> <!--嵌套一個十行二列的表格--> <form action="#" method="get" name="regForm" onsubmit="return checkForm()"> <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr height="40px"> <td colspan="2"> <font size="4">會員註冊</font> USER REGISTER </td> </tr> <tr> <td> 用戶名 </td> <td> <input type="text" name="user" size="34px" id="user"/> </td> </tr> <tr> <td> 密碼 </td> <td> <input type="password" name="password" size="34px" id="password"/> </td> </tr> <tr> <td> 確認密碼 </td> <td> <input type="password" name="repassword" size="34px" id="repassword"></input> </td> </tr> <tr> <td> Emaile </td> <td> <input type="text" name="email" size="34px" id="eamil"/> </td> </tr> <tr> <td> 姓名 </td> <td> <input type="text" name="username" size="34px"/> </td> </tr> <tr> <td> 性別 </td> <td> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td> 出生日期 </td> <td> <input type="text" name="birthday" size="34px"/> </td> </tr> <tr> <td> 驗證碼 </td> <td> <input type="text" name="yzm" /> <img src="../img/yanzhengma.png" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="註冊" /> </td> </tr> </table> </form> </td> </tr> <!--4.廣告圖片--> <tr> <td> <img src="../img/footer.jpg" width="100%"/> </td> </tr> <!--5.友情連接和版權信息--> <tr> <td align="center"> <a href="#">關於咱們</a> <a href="#">聯繫咱們</a> <a href="#">招賢納士</a> <a href="#">法律聲明</a> <a href="#">友情連接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服務聲明</a> <a href="#">廣告聲明</a> <p> Copyright © 2005-2018 版權全部 </p> </td> </tr> </table> </body> </html>
案例二：使用js完成首頁輪播圖效果函數
下面的小程序的目的是：經過button切換照片spa
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>切換圖片</title> <style> div{ border: 1px solid white; width:500px ; height: 350px; margin: auto; text-align: center; } </style> <script> var i=1; function changeImg(){ i++; document.getElementById("img1").src="../../img/"+i+".jpg"; if(i==3){ i=0; } } </script> </head> <body> <div> <input type="button" value="下一張" onclick="changeImg()"/> <img src="../../img/1.jpg" width="100%" height="100%" id="img1"/> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首頁</title> <style> #father{ border: 0px solid red; width: 1300px; height: 2170px; margin: auto; } /*#logo{ border: 0px solid black; width: 1300px; height: 50px; }*/ .top{ border: 0px solid blue; width: 431px; height: 50px; float: left; } #top{ padding-top: 12px; height: 38px; } #menu{ border: 0px solid red; width: 1300px; height: 50px; background-color: black; margin-bottom: 10px; } ul li{ display: inline; color: white; } #clear{ clear: both; } #product{ border: 0px solid red; width: 1300px; height: 558px; } #product_top{ border: 0px solid blue; width: 100%; height: 45px; padding-top: 8px; } #product_bottom{ border: 0px solid green; width: 100%; height: 500px; } #product_bottom_left{ border: 0px solid red; width: 200px; height: 500px; float: left; } #product_bottom_right{ border: 0px solid blue; width: 1094px; height: 500px; float: left; } #big{ border: 0px solid red; width: 544px; height: 248px; float: left; } .small{ border: 0px solid blue; width: 180px; height: 248px; float: left; /*讓裏面的內容居中*/ text-align: center; } #bottom{ text-align: center; } a{ text-decoration: none; } </style> <script> function init(){ //書寫輪圖片顯示的定時操做 setInterval("changeImg()",3000); } //書寫函數 var i=0 function changeImg(){ i++; //獲取圖片位置並設置src屬性值 document.getElementById("img1").src="../img/"+i+".jpg"; if(i==3){ i=0; } } </script> </head> <body onload="init()"> <div id="father"> <!--定時彈出廣告圖片位置--> <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none"/> <!--1.logo部分--> <div id="logo"> <div class="top"> <img src="../img/logo2.png" height="46px"/> </div> <div class="top"> <img src="../img/header.png" height="46px" /> </div> <div class="top" id="top"> <a href="#">登陸</a> <a href="#">註冊</a> <a href="#">購物車</a> </div> </div> <div id="clear"> </div> <!--2.導航欄部分--> <div id="menu"> <ul> <a href="#"><li style="font-size: 20px;">首頁</li></a> <a href="#"><li>手機數碼</li></a> <a href="#"><li>家用電器</li></a> <a href="#"><li>鞋靴箱包</li></a> <a href="#"><li>孕嬰保健</li></a> <a href="#"><li>奢侈品</li></a> </ul> </div> <!--3.輪播圖部分--> <div id=""> <img src="../img/1.jpg" width="100%" id="img1"/> </div> <!--4.最新商品--> <div id="product"> <div id="product_top"> <span style="font-size: 25px;padding-top: 8px;">最新商品</span> <img src="../img/title2.jpg" /> </div> <div id="product_bottom"> <div id="product_bottom_left"> <img src="../img/big01.jpg" width="100%" height="100%"/> </div> <div id="product_bottom_right"> <div id="big"> <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> </div> </div> </div> <!--5.廣告圖片--> <div id=""> <img src="../img/ad.jpg" width="100%" /> </div> <!--6.熱門商品--> <div id="product"> <div id="product_top"> <span style="font-size: 25px;padding-top: 8px;">熱門商品</span> <img src="../img/title2.jpg" /> </div> <div id="product_bottom"> <div id="product_bottom_left"> <img src="../img/big01.jpg" width="100%" height="100%"/> </div> <div id="product_bottom_right"> <div id="big"> <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">電燉鍋</p></a> <p style="color: red;">¥399</p> </div> </div> </div> </div> <!--7.廣告圖片--> <div id=""> <img src="../img/footer.jpg" width="100%"/> </div> <!--8.友情連接和版權信息--> <div id="bottom"> <a href="#">關於咱們</a> <a href="#">聯繫咱們</a> <a href="#">招賢納士</a> <a href="#">法律聲明</a> <a href="#">友情連接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服務聲明</a> <a href="#">廣告聲明</a> <p> Copyright © 2005-2016 版權全部 </p> </div> </div> </body> </html>
上面是使用js完成的首頁輪播圖code
案例三：使用js完成首頁定時彈出廣告圖片orm
BOM對象是js裏面重要的一部分應該花點時間研究htm
下面的代碼實現了定時彈出廣告的子程序對象
function init(){ //書寫輪圖片顯示的定時操做 setInterval("changeImg()",3000); //1.設置顯示廣告圖片的定時操做 time = setInterval("showAd()",3000); } //書寫函數 var i=0 function changeImg(){ i++; //獲取圖片位置並設置src屬性值 document.getElementById("img1").src="../img/"+i+".jpg"; if(i==3){ i=0; } } //2.書寫顯示廣告圖片的函數 function showAd(){ //3.獲取廣告圖片的位置 var adEle = document.getElementById("img2"); //4.修改廣告圖片元素裏面的屬性讓其顯示 adEle.style.display = "block"; //5.清除顯示圖片的定時操做 clearInterval(time); //6.設置隱藏圖片的定時操做 time = setInterval("hiddenAd()",3000); } //7.書寫隱藏廣告圖片的函數 function hiddenAd(){ //8.獲取廣告圖片並設置其style屬性的display值爲none document.getElementById("img2").style.display= "none"; //9.清除隱藏廣告圖片的定時操做 clearInterval(time); }
案例四：表單校驗功能完善blog
下面的代碼主要在表單的校驗中加入了一些提示信息，使得界面更加人性化圖片
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊頁面</title> <!--<script> function checkForm(){ //alert("aa"); /**校驗用戶名*/ //1.獲取用戶輸入的數據 var uValue = document.getElementById("user").value; //alert(uValue); if(uValue==""){ //2.給出錯誤提示信息 alert("用戶名不能爲空!"); return false; } /*校驗密碼*/ var pValue = document.getElementById("password").value; if(pValue==""){ alert("密碼不能爲空!"); return false; } /**校驗確認密碼*/ var rpValue = document.getElementById("repassword").value; if(rpValue!=pValue){ alert("兩次密碼輸入不一致!"); return false; } /*校驗郵箱*/ var eValue = document.getElementById("eamil").value; if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){ alert("郵箱格式不正確!"); return false; } } </script>--> <script> /*function showTips(){ document.getElementById("userspan").innerHTML="<font color='gray'>用戶名必填！</font>"; } function checkUser(){ //1.獲取用戶輸入的用戶名數據 var uValue = document.getElementById("user").value; //2.進行校驗 if(uValue==""){ document.getElementById("userspan").innerHTML="<font color='red'>用戶名不能爲空!</font>"; }else{ document.getElementById("userspan").innerHTML=""; } }*/ function showTips(id,info){ document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>"; } function check(id,info){ //1.獲取用戶輸入的用戶名數據 var uValue = document.getElementById(id).value; //2.進行校驗 if(uValue==""){ document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>"; }else{ document.getElementById(id+"span").innerHTML=""; } } </script> </head> <body> <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px"> <!--1.logo部分--> <tr> <td> <!--嵌套一個一行三列的表格--> <table border="1px" width="100%"> <tr height="50px"> <td width="33.3%"> <img src="../img/logo2.png" height="47px" /> </td> <td width="33.3%"> <img src="../img/header.png" height="47px" /> </td> <td width="33.3%"> <a href="#">登陸</a> <a href="#">註冊</a> <a href="#">購物車</a> </td> </tr> </table> </td> </tr> <!--2.導航欄部分--> <tr height="50px"> <td bgcolor="black"> <a href="#"> <font size="5" color="white">首頁</font> </a> <a href="#"> <font color="white">手機數碼</font> </a> <a href="#"> <font color="white">電腦辦公</font> </a> <a href="#"> <font color="white">鞋靴箱包</font> </a> <a href="#"> <font color="white">家用電器</font> </a> </td> </tr> <!--3.註冊表單--> <tr> <td height="600px" background="../img/regist_bg.jpg"> <!--嵌套一個十行二列的表格--> <form action="#" method="get" name="regForm" onsubmit="return checkForm()"> <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr height="40px"> <td colspan="2"> <font size="4">會員註冊</font> USER REGISTER </td> </tr> <tr> <td> 用戶名 </td> <td> <input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用戶名必填！')" onblur="check('user','用戶名不能爲空！')"/><span id="userspan"></span> </td> </tr> <tr> <td> 密碼 </td> <td> <input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密碼必填')" onblur="check('password','密碼不能爲空!')"/><span id="passwordspan"></span> </td> </tr> <tr> <td> 確認密碼 </td> <td> <input type="password" name="repassword" size="34px" id="repassword"></input> </td> </tr> <tr> <td> Emaile </td> <td> <input type="text" name="email" size="34px" id="eamil"/> </td> </tr> <tr> <td> 姓名 </td> <td> <input type="text" name="username" size="34px"/> </td> </tr> <tr> <td> 性別 </td> <td> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td> 出生日期 </td> <td> <input type="text" name="birthday" size="34px"/> </td> </tr> <tr> <td> 驗證碼 </td> <td> <input type="text" name="yzm" /> <img src="../img/yanzhengma.png" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="註冊" /> </td> </tr> </table> </form> </td> </tr> <!--4.廣告圖片--> <tr> <td> <img src="../img/footer.jpg" width="100%"/> </td> </tr> <!--5.友情連接和版權信息--> <tr> <td align="center"> <a href="#">關於咱們</a> <a href="#">聯繫咱們</a> <a href="#">招賢納士</a> <a href="#">法律聲明</a> <a href="#">友情連接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服務聲明</a> <a href="#">廣告聲明</a> <p> Copyright © 2005-2016 商城 版權全部 </p> </td> </tr> </table> </body> </html>
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
