js倒计时

最新推荐文章于 2025-05-29 14:47:07 发布

原创最新推荐文章于 2025-05-29 14:47:07 发布 · 494 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #倒计时

学习专栏收录该内容

25 篇文章

订阅专栏

博主回顾购票项目中的倒计时功能，尝试重新编写。页面定义15分钟完成订单，否则自动取消。介绍了JS中所需数据，如span的class名、倒计时初始值等，还给出了JS代码，包括时间传入值、返回值、剩余时间计算及超时处理等内容。

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

以前做购票项目配过一个倒计时，今天试着写一写。

首先是页面：定义15分钟完成订单，否则自动取消。

js中需要用到的数据，span的class名，倒计时的初始值（span值）。

请在<span class="orderM" style="font-size:26px;color:red">15</span> 分钟<span 

class="orderS" style="font-size:26px;color:red">59</span>秒内完成订单确认<br/>

然后是js码：需要定义的有时间传入值、返回值，剩余时间计算以及超时处理。下面是代码：

    var setTimer = null;
       var timeVal = 0;
       timeVal = 900000;
       countFunc(timeVal);
         setTimer = setInterval(function() {
         timeVal = timeVal - 1000;
       countFunc(timeVal);
     }, 1000);
    function countFunc(leftTime) {
        if(leftTime >= 0) {
         var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
         var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
         var minutes = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟
         var seconds = parseInt(leftTime / 1000 % 60, 10); //计算剩余的秒数
           days = checkTime(days);
           hours = checkTime(hours);
           minutes = checkTime(minutes);
           seconds = checkTime(seconds);
         $(".orderD").html(days);
         $(".orderH").html(hours);
         $(".orderM").html(minutes);
         $(".orderS").html(seconds);
        } else {
        clearInterval(setTimer);
         $(".orderD").html("00");
         $(".orderH").html("00");
         $(".orderM").html("00");
         $(".orderS").html("00");
           var orderStatus = alert("订单确认时间已过，请重新下单~");
          window.location.href="film/orderFail.do?id=${ordersInfo.id}";
        }
        }
        function checkTime(i) { //将0-9的数字前面加上0，例1变为01
          if(i<10) {
             i = "0" + i;
          }
          return i;
    }

进行一下解释：

1、setTime为时间返回值。

2、timeVal为时间传入初始值（单位毫秒），由于现实倒时效果我们在初始计算时需减去1秒（timeVal-1000）。

3、当时间仍有剩余时，计算页面显示值。这里以分钟为例：

var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);

leftTime/1000/60得到分钟数，%60得到分钟十位数位显示数，如【14分钟】中的1，10为其计算单位。

4、之后通过$("").html("")显示。checkTime()进行了显示规范。

5、当时间小于0时提示并取消下单。