延时器
setTimeout(回调函数,毫秒数)
功能：延迟指定的毫秒数，只执行一次回调函数
清除延时器：clearTimeout（延时器的返回值）
<script type="text/javascript">
setTimeout(function(){
console.log(1s后);
},1000)
</script>
计时器
setInterval(回调函数,毫秒数)
功能：每隔指定的毫秒数，执行一次回调函数
清除计时器：clearInterval（计时器的返回值）
//body
<div id="box">10</div>
//js
<script type="text/javascript">
var num = document.getElementById("box")
var n = num.innerHTML;
var t;
t = setInterval(function(){
if(n<=5){
clearInterval(t)
}else{
n --;
num.innerHTML=n;
}
},1000)
</script>
案例
1.倒计时功能，点击开始，开始后可随时按暂停，数字到0后会自动重置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{width:200px;height:200px;border: solid 1px black;margin: 30px auto;font:80px/200px "";text-align: center}
#btn{display: block;margin: 0 auto;width: 100px;height:40px;}
</style>
</head>
<body>
<div id="box">10</div>
<input type="button" value="开始" id="btn">
</body>
<script>
// 1.获取元素
var box = document.getElementById("box")
var btn = document.getElementById("btn")
// 用来保存计时器的返回值，用作将来清除用
var t1;
// 2.获取两次初始值：n用作运算，num用作重置
var n = box.innerHTML;
var num = box.innerHTML;
// 点击按钮的状态：true表示开始，false表示暂停,到0自动重置
var count = true;
// 3.点击事件
btn.onclick = function(){
// 4.判断状态，决定执行什么功能，初始状态是true，表示开始功能
if(count){
// 开始1.清除上一次计时器
clearInterval(t1)
// 开始2.开启计时器
t1 = setInterval(function(){
// 开始3.判断数字是否到终点
if(n <= 0){
// 到终点要清除计时器
clearInterval(t1);
// 判断状态是否为重置
// 重置1.重置按钮文字
btn.value = "开始2";
// 重置2.重置显示的数字
box.innerHTML = num;
// 重置3.重置计算的数字
n = num;
// 重置4.重置按钮的状态为初始的开始状态
count = true;
}else{
// 没有到终点，正常减1
n--;
// 设置显示数字
box.innerHTML = n;
}
},1000)
// 正常点击开始之后，下次的功能应该是暂停，所以修改按钮的显示文字为重置
btn.value = "暂停";
// 修改按钮的下次点击状态为false，表示暂停
count = false;
}else if(count == false){ //5.判断状态是否为暂停
// 暂停1.清除计时器
clearInterval(t1)
// 暂停2.设置下次按钮的文字为继续
btn.value = "继续";
// 暂停3.设置按钮的下次被点击的状态为true，表示开始
count = true;
}
}
</script>
</html>
2.倒计时功能，与上面例子差不多，不同的是需要手动重置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{width:200px;height:200px;border: solid 1px black;margin: 30px auto;font:80px/200px "";text-align: center}
#btn{display: block;margin: 0 auto;width: 100px;height:40px;}
</style>
</head>
<body>
<div id="box">10</div>
<input type="button" value="开始" id="btn">
</body>
<script>
// 1.获取元素
var box = document.getElementById("box")
var btn = document.getElementById("btn")
// 用来保存计时器的返回值，用作将来清除用
var t1;
// 2.获取两次初始值：n用作运算，num用作重置
var n = box.innerHTML;
var num = box.innerHTML;
// 点击按钮的状态：0表示开始，1表示暂停，2表示重置
var count = 0;
// 3.点击事件
btn.onclick = function(){
// 4.判断状态，决定执行什么功能，初始状态是0，表示开始功能
if(count == 0){
// 开始1.清除上一次计时器
clearInterval(t1)
// 开始2.开启计时器
t1 = setInterval(function(){
// 开始3.判断数字是否到终点
if(n <= 1){
// 到终点要清除计时器
clearInterval(t1);
// 设置显示数字为0
box.innerHTML = 0;
// 修改按钮的显示文件
btn.value = "重置";
// 修改按钮的下次点击状态为2，因为已经结束了，所以下次状态是：重置
count = 2;
}else{
// 没有到终点，正常减1
n--;
// 设置显示数字
box.innerHTML = n;
}
},1000)
// 正常点击开始之后，下次的功能应该是暂停，所以修改按钮的显示文字为重置
btn.value = "暂停";
// 修改按钮的下次点击状态为1，表示暂停
count = 1;
}else if(count == 1){ //5.判断状态是否为暂停
// 暂停1.清除计时器
clearInterval(t1)
// 暂停2.设置下次按钮的文字为继续
btn.value = "继续";
// 暂停3.设置按钮的下次被点击的状态为0，表示开始
count = 0;
}else if(count == 2){ //6.判断状态是否为重置
// 重置1.重置按钮文字
btn.value = "开始2";
// 重置2.重置显示的数字
box.innerHTML = num;
// 重置3.重置计算的数字
n = num;
// 重置4.重置按钮的状态为初始的开始状态
count = 0;
}
}
</script>
</html>
3.抽奖系统
<!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>抽奖系统</title>
<style type="text/css">
#cont{font:60px/200px "";text-align: center;height: 200px;}
#btn{width:200px;height: 60px;font-size: 30px;display: block;margin: 20px auto;}
</style>
</head>
<body>
<div id="cont">请点击开始按钮,开始抽奖</div>
<input type="button" name="btn" id="btn" value="开始" />
</body>
<script>
//目标:实现抽奖系统
//准备:给button标签绑定onclick事件
var btnObj = document.getElementById('btn');
var conObj = document.getElementById('cont');
// 定时器返回值
var times;
// 设一个状态值
var btnStatus=true;
btnObj.onclick=function(){
// 判断是否是第一次点击
if(btnStatus){ // 点击开始
// console.log(111);
// 1 准备班级学生姓名字符串
var str = "张三,李四,王五,小明,小红,小雪";
// 2 分割字符串为数组
var studentArr = str.split(',');
// console.log(studentArr);
// 3 生成随机数,当做索引,获取一个数组元素
// 获取数组长度
var len = studentArr.length;
// 4 使用定时器,多次生成随机数,获取人员姓名,并且追加到页面中
times = setInterval(function(){
// 直接取整
var num = parseInt(Math.random()*len);
var studentName = studentArr[num];
//console.log(studentName);
// 5 将人员姓名追加到页面中
conObj.innerHTML = studentName;
},100);
// 更改开始按钮的字
btnObj.value='就你了'
// 修改点击的状态
btnStatus = false;
}else{ // 第二次点击,停止定时器
// 清除定时器
clearInterval(times);
// 修改点击的状态
btnStatus = true;
// 更换按钮的字
btnObj.value='再次抽奖'
}
}
</script>
</html>
4.右下角的倒计时小广告
//css
#box{width: 200px;height: 250px;border:1px solid #000;position: fixed;right: 0;bottom: 0;}
#close{width: 35px;height: 25px;font: 12px/2 "";color: gray;position: absolute;left: 0;top: 0;text-align: center;background-color: white;border: none;outline: none;}
#adv{font: 12px/2 "";color: #fff;position:absolute;right: 0;top: 0;background: rgba(115, 115, 115);padding: 0 10px;}
//body
<div id="box">
<input type="button" value="X" id="close">
<span id="adv">广告还有<b id="num">10</b>秒</span>
</div>
<script type="text/javascript">
window.onload=function(){
var box = document.getElementById("box");
var num = document.getElementById("num");
var close = document.getElementById("close");
var t;
var n=num.innerHTML;
close.onclick = function(){
// 重新定向网址,流氓软件做法
// location.href = 'www.baidu.com';
box.style.display = "none"
}
t = setInterval(function(){
if(n<=1){
box.style.display = "none"
}else{
n--;
num.innerHTML = n;
}
},1000)
}
</script>
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
