为了账号安全,请及时绑定邮箱和手机立即绑定

Javascript:如何倒计时和循环计时器,将日期时间从 23:59:59

Javascript:如何倒计时和循环计时器,将日期时间从 23:59:59

互换的青春 2021-06-29 12:57:32
我正在建立一个电子商务网站。我想创建一个倒数计时器。我想做的是从23:59:59开始倒计时到00:00:00。一旦计时器在00:00:00结束,我想再次从23:59:59重新启动计时器。所以我必须使用循环。现在我创建了不循环的倒数计时器。它从2019/06/14 00:00:00开始,到2019/06/17 23:59:59结束。倒计时结束后,显示屏上会显示活动已结束的消息。应用程序.jsfunction CountdownTimer(elm, tl, mes) {    this.initialize.apply(this, arguments);  }  CountdownTimer.prototype = {    initialize: function (elm, tl, mes) {      this.elem = document.getElementById(elm);      this.tl = tl;      this.mes = mes;    },    countDown: function () {      var timer = '';      var today = new Date();      var day = Math.floor((this.tl - today) / (24 * 60 * 60 * 1000));      var hour = Math.floor((day * 24) + ((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));      var min = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / (60 * 1000)) % 60;      var sec = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / 1000) % 60 % 60;      var milli = Math.floor(((this.tl - today) % (24 * 60 * 60 * 1000)) / 10) % 100;      var me = this;      if ((this.tl - today) > 0) {        if (hour) timer += '<span class="cdt_num">' + hour + '</span><small>hours</small>';        timer += '<span class="cdt_num">' + this.addZero(min) + '</span><small>minutes</small><span class="cdt_num">' + this.addZero(sec) + '</span><small>seconds</small><span class="cdt_num">' + this.addZero(milli) + '</span>';        this.elem.innerHTML = timer;        tid = setTimeout(function () {          me.countDown();        }, 10);      } else {        this.elem.innerHTML = this.mes;        return;      }    },    addZero: function (num) {      return ('0' + num).slice(-2);    }  }我希望有人知道如何修复这些代码以将 DateTime 时间从 23:59:59 转换为 00:00:00 并添加循环功能。
查看完整描述

3 回答

?
慕仙森

TA贡献1827条经验 获得超7个赞

hh:mm:ss日期的一部分可以从它的 ISO 字符串表示中检索:


var end = Date.now() + 3000;


setInterval(function tick() {

  document.body.textContent = new Date(Date.now() - end).toJSON().slice(11, 19) 

}, 1000)


查看完整回答
反对 回复 2021-07-01
  • 3 回答
  • 0 关注
  • 204 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信