定时器
setTimeout(); 延迟执行setInterval(); 循环执行clearTimeout(); 清除延迟执行的定时器clearInterval(); 清除循环执行的定时器
1. 定时器怎么使用
setTimeout(function() {
console.log("延迟了5s才执行");
}, 5000);
// 开启一个循环定时器, 同时返回该定时器id, 赋值给变量timer
var timer = setInterval(function() {
console.log("每隔1s执行一次");
}, 1000);
// 清除定时器时,需要使用定时器id
btn.onclick = function() {
clearInterval(timer);
};2. 倒计时案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
h1 {
width: 250px;
margin: 100px auto 50px auto;
}
.item {
width: 500px;
height: 50px;
margin: 0 auto;
text-align: center;
font-size: 30px;
color: orange;
}
strong {
background-color: orange;
padding: 0 10px;
color: #fff;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>距离光棍节,还有</h1>
<div class="item">
<span><span class="day">00</span>天</span>
<strong><span class="hour">00</span>时</strong>
<strong><span class="min">00</span>分</strong>
<strong><span class="second">00</span>秒</strong>
</div>
<script>
var endTime = new Date("2019-11-11");
var dayEl = document.querySelector(".day");
var hourEl = document.querySelector(".hour");
var minEl = document.querySelector(".min");
var secondEl = document.querySelector(".second");
setInterval(function() {
// 获取当前时间
var nowTime = new Date();
var cha = endTime - nowTime; // 获取相差的毫秒数
// console.log(cha);
// 转换 天 时 分 秒
var DAY_MS = 1000 * 60 * 60 * 24;
var HOUR_MS = 1000 * 60 * 60;
var MIN_MS = 1000 * 60;
var SECOND_MS = 1000;
var day = Math.floor(cha / DAY_MS);
console.log(day);
var hour = Math.floor((cha % DAY_MS) / HOUR_MS);
var min = Math.floor((cha % HOUR_MS) / MIN_MS);
var second = Math.floor((cha % MIN_MS) / SECOND_MS);
dayEl.innerText = wrap(day);
hourEl.innerText = wrap(hour);
minEl.innerText = wrap(min);
secondEl.innerText = wrap(second);
}, 1000);
function wrap(num) {
return num < 10 ? "0" + num : num;
}
</script>
</body>
</html>3. 短信验证码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<button>发送</button>
<script>
var btn = document.querySelector('button');
btn.onclick = function () {
var count = 5;
btn.disabled = true;
btn.innerText = count + 's';
var timer = setInterval(function () {
if (count === 1) {
clearInterval(timer);
btn.disabled = false;
btn.innerText = '发送';
} else {
count--;
btn.innerText = count + 's';
}
}, 1000);
}
</script>
</body>
</html>文档更新时间: 2023-01-06 10:23 作者：孙老师
