JS制作倒计时--计算两个时间点的时间差

计算当前时间和一个指定时间点的时间差,是很常见的一个特效。

比如:

  • 一些电商网站的倒计时秒杀。

  • 高考倒计时

这些效果用 JavaScript 来实现,简直易如反掌。

主要用到的知识点:

  1. 时间对象:获取当前时间
  2. 时间对象:设定指定的时间点
  3. 时间对象的 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>

运行效果:

发布了73 篇原创文章 · 获赞 97 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/weixin_42703239/article/details/104073382
今日推荐