计算当前时间和一个指定时间点的时间差,是很常见的一个特效。
比如:
- 一些电商网站的倒计时秒杀。
- 高考倒计时
这些效果用 JavaScript 来实现,简直易如反掌。
主要用到的知识点:
- 时间对象:获取当前时间
- 时间对象:设定指定的时间点
- 时间对象的 getTime() 方法:获取指定时间距离1970 年 1 月 1 日0点0分之间的毫秒数。很明显,这个数据很大,但是没关系,JavaScript能处理的很好。利用两个时间跟1970年这个时间点的差,就可以得出两个时间之间的毫秒差,就可以转换为两个时间之间的时间差了。
现在距离2020年春节,1月25日0点0分0秒,还有:
<div id="showTime"></div>
<script>
// 设置目标时间点:2020年1月25日0点0分0秒。 这个时间是固定的,不用写在计时器里每次都获取。
let tagDate = new Date(2020 , 0 , 25);
// 获取目标跟 1970.1.1 的时间差
let tagGetTime = tagDate.getTime();
// 获取标签
let showTime = document.getElementById("showTime");
let timeGoFun = ()=>{
let now = new Date();
// 获取时间差,单位“毫秒”
let disTime = Math.abs( tagGetTime-now.getTime());
// 判断是否时间到了指定点
// 是,就终止计时器,终结函数运行。
if( disTime===0 ){
showTime.innerHTML = "时间到~!";
clearInterval(myset);
return false;
}
disTime = Math.floor( disTime/1000 ); // 把毫秒,转为秒
let miao = disTime % 60 ; // 秒
let fen = Math.floor( disTime / 60 % 60 ); // 分
let xiaoshi = Math.floor( disTime / 60 / 60 ) % 24; // 小时
let tian = Math.floor( disTime / 60 / 60 / 24 ); // 天
// 显示时间。利用了 ES6 的模版字符串,好处是可以存放变量。
showTime.innerHTML = `${tian}天${xiaoshi}时${fen}分${miao}秒`;
};
// 启动计时器,让时间走动起来。
let myset = setInterval(()=>{
timeGoFun();
},1000);
</script>
运行效果: