JavaScript的案例(数据校验,js轮播图,页面定时弹窗)

时间:2021-12-09 04:32:24

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="用户名不能为空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
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 />
密&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" name="password" id="password"/><br /><br /><br />
邮&nbsp;&nbsp;&nbsp;&nbsp;箱:<input type="text" name="email" id="email" /><br /><br /><br />
<input type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>