案例一：使用JS完成注册页面表单校验
<!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切换照片
<!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; 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完成的首页轮播图
案例三：使用js完成首页定时弹出广告图片
BOM对象是js里面重要的一部分应该花点时间研究
下面的代码实现了定时弹出广告的子程序
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); }
案例四：表单校验功能完善
下面的代码主要在表单的校验中加入了一些提示信息，使得界面更加人性化
<!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>