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

最新推荐文章于 2022-11-11 15:55:19 发布

stones4zd

最新推荐文章于 2022-11-11 15:55:19 发布

阅读量2.2k

点赞数 2

分类专栏： javascript 文章标签： js时间对象倒计时间

本文链接：https://blog.csdn.net/weixin_42703239/article/details/104073382

版权

javascript 专栏收录该内容

74 篇文章

订阅专栏

本文详细介绍如何使用JavaScript实现倒计时特效，包括电商网站的秒杀倒计时和高考倒计时等常见应用场景。通过设定指定时间点，获取当前时间，并计算两者之间的时间差，最终将时间差以天、小时、分钟和秒的形式展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

比如：

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

高考倒计时

这些效果用 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>

运行效果：