定时器 和 延时执行
- JavaScript中提供了专门的定时器 和 延时执行的方法，接下来我们简单的介绍他们的基本语法
- 定时器分为计时器和延时器
1、延迟执行函数
- 语法：
setTimeout(fn,millisec)fn:是一个需要执行的代码函数
millisec:多少时间之后去执行这个延迟执行函数 - 作用：
setTimeout()方法用于在指定的毫秒数后调用函数 或者 计算表达式 - 说明：
setTimeout()方法只会执行fn代码一次 - 取消： 当延迟执行函数启动后可以通过调用对应的
clearTimeout()方法传入参数来关闭延时执行
/*01-延迟执行函数的基本用法 */
console.log("start",new Date());
setTimeout(function () {
/*1 秒后才执行回调函数中的代码*/
console.log("task",new Date());
},1000)
console.log("start",new Date());
2、定时器函数
- 语法：
setInterval(fn,millsec) - 作用：
setInterval()方法会按照指定的周期（以毫秒计算）来调用函数或者计算表达方法式。 - 说明：
setInterval()方法会不停地调用函数，直到clearInterval（）被调用或者 窗口关闭为止 - 取消： 当定时器开启后可以通过对应的
clearInterval()方法传入参数关闭定时器 - 场景： 定时器函数常用来处理一些需要长时间执行的重复性的工作，例如：轮播图
var timer = setInterval(function(){ cosnole.log('11'); },1000) //取消定时器 clearInterval(timer);
动态进度条案例
<!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: 800px;
height: 20px;
border-radius: 4px;
margin: 100px auto;
border: 2px solid green;
position: relative;
}
#jinDuTiao {
height: 20px;
background: orange;
border-radius: 4px;
float: left;
}
#num {
position: absolute;
transform: translateY(-50%);
top: 50%;
left: 5px;
}
</style>
</head>
<body>
<div class="box">
<div id="jinDuTiao" style="width: 0px;"></div>
<span id="num">0%</span>
</div>
<script>
/*
需用通过定时器 去改变 进度条宽度
在js中需要实现动画，就必须使用定时器
*/
var timer = setInterval(function () {
// 每执行一次定时器 进度条在原来的宽度基础上 + 10
// 获取 原来的宽度 jinDuTiao.style.width 得到是 '0px' 只想0数字
var style = parseInt(jinDuTiao.style.width);
// 定义一个变量用原来的值 +每次增加的值
var curStyle = style + 13;
// 当进度条的宽度为 800的时候，已经是 最大值
if (curStyle >= 800) {
// 当值大于800 的时候，直接让curStyle的 等于800
curStyle = 800;
// 当执行这个条件时候，进度条已经达到100%
// 定时器不需要在执行
// 清除定时器 this指向的window
clearInterval(timer)
}
// 在原来的基础上 + 10,在赋值给 元素的 宽度
jinDuTiao.style.width = curStyle + 'px';
// 给数字的元素添加left ，根据进度条的变化 而变化
num.style.left = curStyle + 2 + 'px';
// toFixed(2) 表示保留两位小数点
num.innerHTML = ((curStyle / 800) * 100).toFixed(2) + '%';
}, 100)
</script>
</body>
</html>
倒计时案例
<!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="button" id="btn" disabled value="倒计时开始">
<span id="num"></span>
<script src="./js/utils.js"></script>
<script>
let date = new Date()
let date1 = new Date('2020-11-17 8:00:00')
chaTime(date, date1, function (value) {
num.innerHTML = value.day + "天" + value.hours + "时" + value.mint + "分" + value.secd + "秒"
})
setInterval(function () {
let date = new Date()
chaTime(date, date1, function (value) {
num.innerHTML = value.day + "天" + value.hours + "时" + value.mint + "分" + value.secd + "秒"
})
}, 1000)
// // js/utils.js 的函数调用
// // 求两个时间的时间差 (时间戳的差值)
// function chaTime(datePre, dateCur, callback) {
// let timePre = datePre.getTime(); //得到是 datePre到格林威治时间的毫秒数
// let timeCur = dateCur.getTime(); //得到是dateCur到格林威治时间的毫秒数
// // 得到两个时间的时间差（毫秒数）
// let chaTime = Math.abs(timePre - timeCur);
// let day = parseInt(chaTime / 1000 / 60 / 60 / 24);
// let hours = parseInt((chaTime / 1000 / 60 / 60) % 24);
// let mint = parseInt((chaTime / 1000 / 60) % 60);
// let secd = parseInt((chaTime / 1000) % 60);
// // return day + '天' + hours + '小时' + m + '分' + s + '秒'
// // 这里return 返回一个值，可能影响后面的调用,所以这里用对象和回调函数封装
// let objTime = {
// day: day,
// hours: hours,
// mint: mint,
// secd: secd
// }
// callback(objTime)
// }
</script>
</body>
</html>
数码时钟
<!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>
<div class="clock">
<img src="" id="h1">
<img src="" id="h2">时
<img src="" id="m1">
<img src="" id="m2">分
<img src="" id="s1">
<img src="" id="s2">秒
</div>
<script>
// 利用当前的时间来决定你要显示的图片路径
var date = new Date(); //得到一个时间对象
// 一打开页面也需要显示时间
render(date)
// 不断去获取最新的时间
setInterval(function () {
date = new Date();
render(date)
}, 1000)
// 因为页面一开始的是也显示当前的时间，一下代码需要在没有执行定时器之间需要写一遍
// 定时器执行的时候，当前的时间有所有变化， 需要重计算时间，并更改 img路径
// 以下代码需要在定时器重复写一遍
// 都是实现根据时间更改图片的路径，需要封装
function render(date) {
// 求时间对象的 时 分 秒
var h = date.getHours(); //获取时间的 小时
var m = date.getMinutes(); //获取时间的 分钟
var s = date.getSeconds(); //获取时间的 秒
// 如果 小时是两位数的 hours1 两位数的 第一位数 12
// 如果小时 是一位数 hours1 = 0
var hours1 = h >= 10 ? parseInt(h / 10) : 0;
var hours2 = h >= 10 ? h % 10 : h;
h1.src = 'img/' + hours1 + '.png';
h2.src = 'img/' + hours2 + '.png'
// 计算分钟
var minutes1 = m >= 10 ? parseInt(m / 10) : 0;
var minutes2 = m >= 10 ? m % 10 : m;
m1.src = 'img/' + minutes1 + '.png';
m2.src = 'img/' + minutes2 + '.png'
//计算秒数
var seconds1 = s >= 10 ? parseInt(s / 10) : 0;
var seconds2 = s >= 10 ? s % 10 : s;
s1.src = 'img/' + seconds1 + '.png';
s2.src = 'img/' + seconds2 + '.png'
}
</script>
</body>
</html>
固定时间的时间差值（时间戳的差）
<!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>
<span id="show"></span>
<br>
<span id="show1"></span>
<script src="js/utils.js"></script>
<script>
var date1 = new Date('2020-6-19 12:00:33');
var date2 = new Date('2020-7-12 10:12:00');
chaTime(date1, date2, function (value) {
show.innerHTML = '这两个时间相差多' + value.day + '天' + value.hours + '小时' + value.minutes + '分钟' + value.seconds + '秒'
})
// 在页面停留时间 用 当前的时间 和 定时器不断获取的最新事件 进行的时间差
var preDate = new Date();
var newDate = new Date();
chaTime(preDate, newDate, function (value) {
show1.innerHTML = '在页面停留的时间' + value.day + '天' + value.hours + '小时' + value.minutes + '分' + value.seconds + '秒'
})
// 用定时器 去获取最新的时间
setInterval(function () {
newDate = new Date();
chaTime(preDate, newDate, function (value) {
show1.innerHTML = '在页面停留的时间' + value.day + '天' + value.hours + '小时' + value.minutes + '分' + value.seconds + '秒'
})
}, 1000)
// // js/utils.js 的函数调用
// // 求两个时间的时间差 (时间戳的差值)
// function chaTime(datePre, dateCur, callback) {
// let timePre = datePre.getTime(); //得到是 datePre到格林威治时间的毫秒数
// let timeCur = dateCur.getTime(); //得到是dateCur到格林威治时间的毫秒数
// // 得到两个时间的时间差（毫秒数）
// let chaTime = Math.abs(timePre - timeCur);
// let day = parseInt(chaTime / 1000 / 60 / 60 / 24);
// let hours = parseInt((chaTime / 1000 / 60 / 60) % 24);
// let mint = parseInt((chaTime / 1000 / 60) % 60);
// let secd = parseInt((chaTime / 1000) % 60);
// // return day + '天' + hours + '小时' + m + '分' + s + '秒'
// // 这里return 返回一个值，可能影响后面的调用,所以这里用对象和回调函数封装
// let objTime = {
// day: day,
// hours: hours,
// mint: mint,
// secd: secd
// }
// callback(objTime)
// }
</script>
</body>
</html>
电子时钟
<!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>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
getTimer()
setInterval(getTimer, 1000);
function getTimer() {
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth() + 1;
var dates = time.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = time.getDay();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
div.innerHTML = year + '年' + month + '月' + dates + '日' + arr[day] + h + ':' + m + ':' + s;
}
</script>
</body>
</html>
倒计时双十一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.time-item {
width: 450px;
height: 45px;
margin: 0 auto;
}
.time-item strong {
background: orange;
color: #fff;
line-height: 49px;
font-size: 36px;
font-family: Arial;
padding: 0 10px;
margin-right: 10px;
border-radius: 5px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.time-item>span {
float: left;
line-height: 49px;
color: orange;
font-size: 32px;
margin: 0 10px;
font-family: Arial, Helvetica, sans-serif;
}
.title {
width: 260px;
height: 50px;
margin: 200px auto 50px auto;
}
</style>
</head>
<body>
<h1 class="title">距离光棍节，还有</h1>
<div class="time-item">
<span><span id="day">00</span>天</span>
<strong><span id="hour">00</span>时</strong>
<strong><span id="minute">00</span>分</strong>
<strong><span id="second">00</span>秒</strong>
</div>
<script>
// 目标时间的时间戳
var endDate = new Date('2020-11-11 0:0:0');
var end = endDate.getTime();
// 获取天时分秒的盒子
var spanDay = document.getElementById('day');
var spanHour = document.getElementById('hour');
var spanMinute = document.getElementById('minute');
var spanSecond = document.getElementById('second');
// 开启定时器
setInterval(countdown, 1000);
countdown();
// 倒计时
function countdown() {
// 当前时间的时间戳
var nowDate = new Date();
var now = nowDate.getTime();
// 计算时间差（毫秒）
var leftTime = end - now;
// 相差的秒数
leftTime /= 1000;
// 求 相差的天数/小时数/分钟数/秒数
var day, hour, minute, second;
day = Math.floor(leftTime / 60 / 60 / 24);
hour = Math.floor(leftTime / 60 / 60 % 24);
minute = Math.floor(leftTime / 60 % 60);
second = Math.floor(leftTime % 60);
// 设置盒子的内容
spanDay.innerText = day;
spanHour.innerText = hour;
spanMinute.innerText = minute;
spanSecond.innerText = second;
}
</script>
</body>
</html>
回到顶部
<!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>
body {
height: 2000px;
position: relative;
}
#btn {
display: none;
position: fixed;
bottom: 50px;
right: 50px;
}
</style>
</head>
<body>
<button id="btn">回到顶部</button>
<script>
window.onscroll = function () {
// console.log(1)
// console.log(scrollY)
// 判断到达一定位置是，显示回到顶部按钮
if (scrollY >= 400) {
btn.style.display = "block"
} else {
btn.style.display = "none"
}
}
// 定义一个全局变量time
var time;
// 按钮点击事件，清除定时器，让滚动条缓慢回到顶部
btn.onclick = function () {
// 一次回到顶部
// scrollTo({ top: 0 })
// 但是想实现慢慢回到顶部的效果，使用定时器
clearInterval(time)
time = setInterval(function () {
// 在原来滚动的位置减去一个值
scrollTo({ top: scrollY - 10 })
// 判断什么时候停止定时器 当到达顶部时停止定时器
if (scrollY <= 0) {
clearInterval(time)
}
}, 10)
console.log(time)
// 定时器的返回值是一个数值
}
// 问题：当多次点击时，会出现多次定时器累加，使加快向上，如何解决呢？
// 保证当每次点击时,只开启一个定时器,需要每次点击前关闭之前的定时器
// 每次点击的时候 都会开辟一个地址空间，里面的局部变量只能可以让这个空间去使用
// 下一次点击的时候，另一个地址空间，不能访问上次空间里面的变量
// 把定时器的名字定义为全局变量
</script>
</body>
</html>
发送验证码短信
<!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>
</head>
<body>
手机号码： <input type="number"> <button>发送</button>
<script>
// 按钮点击之后，会禁用 disabled 为true
// 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
// 里面秒数是有变化的，因此需要用到定时器
// 定义一个变量，在定时器里面，不断递减
// 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
var btn = document.querySelector('button');
var time = 60; // 定义剩下的秒数
btn.addEventListener('click', function () {
btn.disabled = true;
var timer = setInterval(function () {
if (time == 0) {
// 清除定时器和复原按钮
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
}, 1000);
})
</script>
</body>
</html>
5秒跳转页面
<!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>
</head>
<body>
<button>点击</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function () {
// console.log(location.href);
location.href = 'http://www.baidu.com';
})
var timer = 5;
setInterval(function () {
if (timer == 0) {
location.href = 'http://www.baidu.com';
} else {
div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
timer--;
}
}, 1000);
</script>
</body>
</html>
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
