简单地运用JS的date对象实例，实现倒计时功能。
2020-10-26 本文已影响0人
似朝朝我心
效果图：
代码及详细注释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#font-text {
color: #409EFF;
font-size: 30px;
font-weight: bolder;
}
</style>
</head>
<body>
<div id="font-text"></div>
<script type="text/javascript">
//1.定义一个countDown功能函数（实现倒计时的功能）
function countDown() {
const deadline = new Date("2020/11/11 00:00:00")//设置具体的截止时间,以双十一为例子
let currentTime = new Date();//通过new一个Data日期对象实例，获取当前的时间
//下面这行代码，用于计算倒计时的时差，用我们设置的具体时间减去当前标准时间，算出的时差间隔就是我们的倒计时
intervalTime = deadline.getTime() - currentTime.getTime()
//console.log(intervalTime)//我们可以尝试下打印，发现打印出的是1970/1/1格林尼治距今的时间戳
if (intervalTime > 0) {//如果间隔时间>0，也就是双十一时间还没到，我们要干嘛
//换算格林尼治时间（即时间戳）
const day = Math.floor(intervalTime / 1000 / 60 / 60 / 24);//Math.floor方法向下取整
const hour = Math.floor(intervalTime / 1000 / 60 / 60 % 24);
const minute = Math.floor(intervalTime / 1000 / 60 % 60);
const second = Math.floor(intervalTime / 1000 % 60);
//下面这行代码是我们最终在页面实现的效果展示
const showText = `距离今年的双十一狂欢节还有${day}天${hour}时${minute}分${second}秒`//这里用了ES6的字符串模板写法
document.getElementById("font-text").innerHTML=showText;//输入到页面展示
}else{//如果双十一倒计时的时间到了，这时候我们要实现什么功能呢？
clearInterval(timer);//首先关掉计时器
//在这里就可以实现我们的业务逻辑代码相关了（调用封装好的函数），比如发红包雨啊!
document.getElementById("font-text").innerHTML="双十一已到，快点击红包雨吧！";
}
}
//下面的代码通过声明一个计时器，每秒钟调用一次我们的countDown功能函数，即实现了倒计时功能
const timer = setInterval(()=>{
countDown();
},1000)
</script>
</body>
</html>
