定时器setInterval
1.setInterval开启定时器
* setInterval() * - 定时调用 * - 可以将一个函数，每隔一段时间执行一次 * - 参数： * 1.回调函数，该函数会每隔一段时间被调用一次 * 2.每次调用间隔的时间，单位是毫秒 * * - 返回值： * 返回一个Number类型的数据 * 这个数字用来作为定时器的唯一标识 setInterval(function() {
h.innerHTML = count++; }, 1000); 2.关闭定时器
clearInterval()可以用来关闭一个定时器 方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器 * clearInterval()可以接收任意参数， * 如果参数是一个有效的定时器的标识，则停止对应的定时器 * 如果参数不是一个有效的标识，则什么也不做 开启定时 var timer = setInterval(function(){
},30) 关闭定时器 clearInterval(timer); 3.小练习：自动切换图片
//获取img标签 var img1 = document.getElementById("img1"); //创建一个数组来保存图片的路径 var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"]; //创建一个变量，用来保存当前图片的索引 var index = 0; //定义一个变量，用来保存定时器的标识 var timer; //为btn01绑定一个单击响应函数 var btn01 = document.getElementById("btn01"); btn01.onclick = function() {
/* * 目前，我们每点击一次按钮，就会开启一个定时器， * 点击多次就会开启多个定时器，这就导致图片的切换速度过快， * 并且我们只能关闭最后一次开启的定时器 */ //在开启定时器之前，需要将当前元素上的其他定时器关闭 clearInterval(timer); /* * 开启一个定时器，来自动切换图片 */ timer = setInterval(function() {
//使索引自增 index++; //判断索引是否超过最大索引 /*if(index >= imgArr.length){ //则将index设置为0 index = 0; }*/ index %= imgArr.length; //修改img1的src属性 img1.src = imgArr[index]; }, 1000); }; //为btn02绑定一个单击响应函数 var btn02 = document.getElementById("btn02"); btn02.onclick = function() {
//点击按钮以后，停止图片的自动切换，关闭定时器 /* * clearInterval()可以接收任意参数， * 如果参数是一个有效的定时器的标识，则停止对应的定时器 * 如果参数不是一个有效的标识，则什么也不做 */ clearInterval(timer); }; 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/198547.html原文链接：https://javaforall.net
