一、setInterval定时器
setInterval（函数，毫秒）
setInterval函数会按照给定的时间间隔无限次数地调用指定的函数。
setInterval(function () {
console.log("Hello World");
}, 1000);
上述代码会每隔1000毫秒（即1秒）输出一次”Hello World”。
setInterval函数返回一个唯一的定时器ID，可以使用clearInterval函数来停止定时器。
var intervalID = setInterval(function () {
console.log("Hello World");
}, 1000);
clearInterval(intervalID);
上述代码开始执行定时器，并将返回的ID存储在变量intervalID中。调用clearInterval（intervalID）函数会停止定时器。
二、setTimeout定时器
setTimeout（函数，毫秒）
setTimeout函数会在指定的时间后调用指定的函数。
setTimeout(function () {
console.log("Hello World");
}, 1000);
上述代码会在1000毫秒（即1秒）后输出”Hello World”。
setTimeout函数返回一个唯一的定时器ID，可以使用clearTimeout函数来停止定时器。
var timeoutID = setTimeout(function () {
console.log("Hello World");
}, 1000);
clearTimeout(timeoutID);
上述代码开始执行定时器，并将返回的ID存储在变量timeoutID中。调用clearTimeout(timeoutID)函数会停止定时器。
三、使用定时器实现轮播图
轮播图广泛应用于网站和移动APP中，通过设置定时器可以轻松实现。
.slide {
width: 300px;
height: 200px;
overflow: hidden;
}.slide ul {
margin: 0px;
padding: 0px;
list-style-type: none;
height: 100%;
width: 300%;
position: relative;
left: 0px;
}.slide li {
float: left;
width: 33.33%;
height: 100%;
}function prev() {
var ul = document.getElementById("slide");
ul.style.left = "-100%";
}function next() {
var ul = document.getElementById("slide");
ul.style.left = "0px";
}setInterval(function () {
var ul = document.getElementById("slide");
if (ul.style.left == "0px") {
ul.style.left = "-100%";
} else {
ul.style.left = "0px";
}
}, 3000);
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/190993.html
微信扫一扫 
支付宝扫一扫 