下面将会讲解JavaScript里面的定时器,定时器是js原生提供的一种延迟执行代码的方式,现在在这里将其配合一些案例详细讲解一下。案例里面的代码注释有详细解释,可以帮助大家学习。
目录
定时器的分类
- 延迟定时器(setTimeout)--将代码延迟多长时间执行
- 间隔定时器(setInterval)--将代码每隔多长时间执行一次
延迟定时器(setTimeout)
语法:
setTimeout(函数,时间)
函数:需要延迟执行的代码
时间:隔多长时间执行 单位:毫秒 1000毫秒=1秒
三种setTimeout书写方式
//延时3s在控制台打印:我被执行了
//第一种方式,把函数写在setTimeout里面
setTimeout(function(){
console.log('我被执行了');
},3000)
//第二种方式,在setTimeout写函数名字
setTimeout(fun,3000)
function fun(){
alert('我是延迟定时器')
}
//第三种方式,在setTimeout里面“调用”函数,别忘了加单引号否则setTimeout不起效果
setTimeout('fun()',3000)
function fun(){
alert('我是延迟定时器')
}
案例:点击按钮延时3秒出现弹窗
//点击按钮,3s后弹窗显示信息:我是延迟定时器
//记得别忘了在h5里面写上按钮
document.querySelector('button').onclick=function(){//按钮的点击事件
setTimeout(fun,3000)//延时3s
}
function fun(){
alert('我是延迟定时器')
}
效果:点击按钮3s后
案例:打开页面后间隔5秒显示图片
<img src="../img/a1.jpg" alt="" srcset="">
/*图片在此,样式设置为display='none'使其不可见*/
/*多余样式设置不做赘述*/
var img=document.querySelector('img')
setTimeout(function(){
img.style.display='block'//在此设置display='block'使图片可见
},5000)//延时五秒
案例:点击按钮后间隔3s出现图片,如果存在图片,则3s后图片消失
html5:
<button id="but1">点击</button>
<div id="div1" style="display: block"></div>
css样式:
#div1 {
height: 300px;
width: 300px;
background-size: cover;
background-image: url(./1024img/狗头.jpg);
}
JavaScript:
var but1 = document.getElementById("but1");
var div1 = document.getElementById("div1");
but1.onclick = function () {//按钮点击事件
if (div1.style.cssText == "display: none;") {//判断图片是否存在,不存在则执行a1
setTimeout(a1, 2000);//设置函数a1的延时2s
function a1() {
div1.style.cssText = "display: block;";//改变display使得图片可见
}
} else {//否则执行a2
setTimeout(a2, 2000);//设置函数a2延时2s
function a2() {
div1.style.cssText = " display: none;";//改变display使得图片不可见
}
}
};
效果:
显示:
消失:
间隔定时器(setInterval)
语法:
setInterval(函数,时间)
书写方式举例
与延迟定时器类似,故不赘述
setInterval(function(){
console.log('我是间隔定时器');
},1000)
案例:图片切换
效果:
未点击
点击后每秒切换
html5:
<button id="but1">点击切换图片1s一次</button>
<img id="tupian" src="./1024img/风暴城.jpg" alt="" />
css样式:
img {
width: 500px;
height: 300px;
}
JavaScript:
var but1 = document.getElementById("but1");//获取按钮
var tupian = document.getElementById("tupian");//获取图片标签img
//利用数组来存放图片的路径
var arr = [
"./1024img/20220325201733_1.jpg",
"./1024img/20220410195718_1.jpg",
"./1024img/20220410200346_1.jpg",
"./1024img/风暴城.jpg",
];
//按钮的点击事件
but1.onclick = function () {
setInterval(tu, 1000);//设置函数tu的延时,为1s
var i = 0;
function tu() {
if (i <= 3) {//如果i<=3,即为数组下标不大于3
tupian.src = arr[i];//在数组中提取图片给img的src路径
i++;
} else {//如果i>3,即为大于了数组下标,则将i重置为0
i = 0;
}
}
};
案例:10s的倒计时
效果:
HTML5:
<button id="but">点击进行倒计时</button>
<div id="div">秒</div>
JavaScript:
var but = document.getElementById("but");//获取按钮
var div = document.getElementById("div");//获取div
but.onclick = function () {//按钮点击事件
var a = 10;
setInterval(aa, 1000);//函数aa间隔1s
function aa() {//定义函数aa
if (a > 0) {//判断条件,在a>0的时候才执行
a--;
console.log(a);
div.innerText = a + "秒";//改变div的内容,把变量a填充到div里面
} else if (a <= 0) {//如果a<=0,则将a重置为10
a = 10;
a--;
console.log(a);
div.innerText = a + "秒";
}
}
};
定时器的区别:
- setTimeout只执行一次
- setInterval间隔一段时间执行一次
清除定时器
语法:
clearInterval(定时器名字)
clearTimeout(定时器的名字)
举例说明:
页面打开后一直间隔1s打印一个1,点击按钮btn后停止。
var btn = document.getElementById('btn')//获取按钮
var timer = setInterval(function () {//名为timer的定时器
console.log(1);//输出打印1
}, 1000)
btn.onclick = function () {//按钮点击事件
clearInterval(timer)//停止名为timer的定时器
}
案例:验证码倒计时
日常生活中大家经常遇见输入手机号,然后点击发送验证码这个网页功能,现在来模仿做一下,点击发送验证码后,60s倒计时的效果。
在点击发送验证码按钮后,弹窗随机显示几个字母或数字组合成的字符串,在输入框输入后,(不会检验输入的字符串是否一模一样)即可发送验证码,进入60s倒计时。倒计时结束则按钮重置,清除定时器,可以重新发送验证码进行倒计时。
只是模仿效果,并不会往手机里面发真的验证码。
初始:
点击后:
输入后开始倒计时:
HTML5:
<input type="text" id="inp" />
<button id="ma">发送验证码</button>
JavaScript:
var inp = document.getElementById("inp");//获取输入框input,好像没有用到它
var ma = document.getElementById("ma");//获取按钮
function suiji(n) {
//定义一个数组,里面有若干的数字,字母
var str = ["d","w","f","r","1","2","3","4","5","6","7","8","9","o","v","p","q",];
var b = " ";//声明变量b,为空
for (var i = 0; i < n; i++) {//for循环控制输出几个字符串
b += str[random1(0, str.length - 1)];
//字符串从数组中随机取出,random1为作者在下面封装的函数,在下面讲解
}
prompt("请输入验证码" + b);//弹窗显示上面随机取出的b
console.log(b);
}
ma.onclick = function () {//按钮的点击事件
var ding = setInterval(dao, 1000);//为函数dao设置定时器间隔1s
var shi = 60;//声明变量shi赋值为60
suiji(4);//调用函数suiji并且传参为4
function dao() {
if (shi > 0) {//if判断shi大于0
ma.disabled = "true"; //设置按钮无法点击
ma.innerHTML = shi;将shi显示在按钮上
shi--;//递减
} else {//如果shi小于0
clearInterval(ding);//则清除定时器
ma.innerHTML = "发送验证码";//重置按钮
ma.disabled = " "; //按钮可以点击
}
}
};
生成随机数字的函数
function random1(min, max) {//在min,max里面生成随机数
if (min >= max) {//如果min>max则两者调换位置,防止输入最大值最小值时输入反了
var a;
a = max;
max = min;
min = a;
}
//利用js里面的数学方法
return Math.floor(Math.random() * (max - min + 1) + min);
//Math.random()取0-1之间的随机小数,Math.floor()向下取整 如4.1---4
}