1. 确定事件
2. 事件要触发函数,所以我们是要声明函数
3. 函数里面通常是去做一些交互才操作, 弹框, 修改页面内容,动态去添加一些东西
知识点储备
定时器
setinterval:每隔多少毫秒执行一次函数
setTimeout:多少毫秒后执行一次函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器</title>
<script>
function test(){
console.log("setinterval被调用了");
}
var timeID;
function startDin(){
//timeID=setInterval("test()",3000);
timeID=setTimeout("test()",3000);
}
function StopDin(){
//clearInterval(timeID);
clearTimeout(timeID);
}
</script>
</head>
<body>
<input type="button" value="开启定时器" onclick="startDin()" /><br />
<input type="button" value="关闭定时器" onclick="StopDin()" />
</body>
</html>
效果图
点击开定时器后,设置3秒后条用函数,在截图之前这个函数被执行了13次。
点击定时器后,等了很久还是只调用了一次函数,说明该属性只能执行一次就结束。
切换图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换图片</title>
<script>
function changeimg(){
var img =document.getElementById("img1")
img.src="img/10.jpg";
}
</script>
</head>
<body>
<input type="button" value="切换图片" onclick="changeimg()" /><br />
<img src="img/美女.jpg" id="img1"/>
</body>
</html>
效果图
没有点切换图片前的网页如下所示
点击切换图片按钮后如下图所示
案例一:使用JS完成图片的轮播效果
步骤分析:
1、当前页面加载了一个图片后,每隔多少秒后就自动切换到另外一个图片,故这次需要采用setinterval
2、如何动态改变图片,就动态改变图片的地址
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script>
var index=1;
function changead(){
var img=document.getElementById("imgad");
img.src="img/"+(index%3+1)+".jpg"
index++;
}
function init(){
//启动定时器
setInterval("changead()",3000);
}
</script>
</head>
<body onload="init()">
<img src="img/1.jpg" id="imgad"/>
</body>
</html>
知识储备
图片的显示和隐藏(点击显示按钮图片就显示出来,点击隐藏按钮图片就隐藏着了)
-
显示广告 img.style.display = "block"
-
隐藏广告 img.style.display = "none"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片的显示和隐藏</title>
<script>
function showimg(){
var imgh=document.getElementById("imgh");
imgh.style.display="block"
}
function hideimg(){
var imgh=document.getElementById("imgh");
imgh.style.display="none"
}
</script>
</head>
<body>
<input type="button" value="显示" onclick="showimg()" />
<input type="button" value="隐藏" onclick="hideimg()" /><br />
<img src="img/1-161104143944.gif" id="imgh"/>
</body>
</html>
案例二:定时弹出广告
需求分析:开始进入网页后,在某个时间突然弹出广告(图)
-
确定事件: 页面加载完成的事件 onload
-
事件要触发函数: init()
-
init函数里面做一件事:
-
启动一个定时器 : setTimeout()
-
显示一个广告
-
再去开启一个定时5秒钟之后,关闭广告
-
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹出广告</title>
<script>
function init(){
setTimeout("showimg()",3000);
console.log("hhh");
}
function showimg(){
var img1 =document.getElementById("img1");
img1.style.display="block";
setTimeout("stopimg()",5000);
}
function stopimg(){
var img1 =document.getElementById("img1");
img1.style.display="none";
}
</script>
</head>
<body onload="init()">
<img src="img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" id="img1" style="display: none;"/>
</body>
</html>
知识储备
【HTML中innerHTML属性】
【JS中的常用事件】
onfocus 事件: 获得焦点事件
onblur : 失去焦点
onkeyup : 按键抬起事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验</title>
<script>
function showtips(spanID,msg){
var span1=document.getElementById(spanID);
span1.innerHTML=msg;
}
function checkusername(){
var uVaule=document.getElementById("uname").value;
//console.log(uVaule);
var span2=document.getElementById("user_name");
if(uVaule.length<6){
span2.innerHTML="用户名小于6位,请重新输入";
return false;
}else{
span2.innerHTML="用户名输入正确!";
return true;
}
}
function checkForm(){
var flag = checkusername();
return flag;
}
</script>
</head>
<body>
<form action="轮播图.html" onsubmit="return checkForm()">
用户名:<input id="uname" type="text" onblur="checkusername()" onfocus="showtips('user_name','用户名长度不能小于6位')" /><span id="user_name"></span><br />
<input type="submit" value="注册" />
</form>
</body>
</html>
案例三:表单校验
需求分析:每当用户输入出错的时候,我们是弹出了一个对话框,提示用户去修改。这样的用户体验效果非常不好。我们今天就是需要来对他进行一个修改,当用户输入信息有问题的时候,我们就再输入框的后面给他一个友好提示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的表单校验</title>
<script type="text/javascript" src="../js/regutils.js" ></script>
<script>
function showtips(spanID,msg){
var span1=document.getElementById(spanID);
span1.innerHTML=msg;
}
//验证用户名
function checkusername(){
var uVaule=document.getElementById("uname").value;
//console.log(uVaule);
var span2=document.getElementById("user_name");
if(uVaule.length<6){
span2.innerHTML="<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span2.innerHTML="<font color='red' size='2'>恭喜您,可用</font>";
return true;
}
}
//验证密码
function checkpassword(){
var upassword=document.getElementById("upassword").value;
var span3=document.getElementById("user_password");
if(upassword.length<6){
span3.innerHTML="<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span3.innerHTML="<font color='red' size='2'>恭喜您,够用</font>";
return true;
}
}
//验证确认密码
function checkurepassword(){
var upassword=document.getElementById("upassword").value;
var urepassword=document.getElementById("urepassword").value;
var span4=document.getElementById("user_urepassword");
//对密码长度进行验证
if(upassword!=urepassword){
span4.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
return false;
}else{
span4.innerHTML = "<font color='red' size='2'>恭喜您,两次密码一致</font>";
return true;
}
}
//验证邮箱
function checkEmail2(){
var umail = document.getElementById("uemail").value;
var flag = checkEmail(umail);
var span = document.getElementById("user_email");
//对邮箱输入进行校验
if(flag){
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}else{
span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
return false;
}
}
function checkForm(){
var flag=checkEmail()&&checkurepassword()&&checkpassword()&&checkusername();
}
</script>
</head>
<body>
<form action="轮播图.html" onsubmit="return checkForm()">
用户名:<input id="uname" type="text" onblur="checkusername()" onfocus="showtips('user_name','用户名长度不能小于6位')" /><span id="user_name"></span><br />
密码:<input id="upassword" type="password" onblur="checkpassword()" onfocus="showtips('user_password','密码长度不能小于6位')" /><span id="user_password"></span><br />
确认密码:<input id="urepassword" type="password" onblur="checkurepassword()" onfocus="showtips('user_urepassword','两次密码必须一致')" /><span id="user_urepassword"></span><br />
邮箱:<input id="uemail" type="text" onblur="checkEmail2()" onfocus="showtips('user_email','邮箱格式必须正确')" /><span id="user_email"></span><br />
手机号:<input type="text" id="text" /><br />
<input type="submit" value="注册" />
</form>
</body>
</html>