JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
Posted Steve Yu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript的案例（数据校验，js轮播图，页面定时弹窗）相关的知识，希望对你有一定的参考价值。
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轮播图，页面定时弹窗）的主要内容，如果未能解决你的问题，请参考以下文章