Question

我正在建立一个电子商务网站。我想创建一个倒数计时器。

我想做的是将计数从 23:59:59 开始倒数到 00:00:00 。计时器在 00:00:00 结束后，我想从 23:59:59 重新启动计时器。所以我必须使用循环。

现在，我创建了不循环的倒数计时器。它从 2019/06/14 00:00:00 开始，到 2019/06/17 23:59:59 结束。倒数结束后，显示屏上显示一条消息，表明活动已结束。

app.js

function 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);
    }
  }

  // 
  function CDT() {
    var myD = Date.now(); 
    var start = new Date('2019-06-14T00:00+09:00'); 
    var myS = start.getTime(); 
    var end = new Date('2019-06-17T23:59+09:00'); 
    var myE = end.getTime(); 


    if (myS <= myD && myE >= myD) {
      var text = '<span>Until the end</span>';
      var tl = end;
    } 
    else if (myS > myD) {
      var text = '<span>Start</span><span>from</span>';
      var tl = start;
    } 
    else {
      var text = "";
    } 

    var timer = new CountdownTimer('cdt_date', tl, '<small>ended</small>'); 
    timer.countDown();
    target = document.getElementById("cdt_txt");
    target.innerHTML = text;
  }
  window.onload = function () {
    CDT();
  }

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>timer</title>
</head>
<body>
    <div class="cdt_wrapper">
        <div class="cdt-btn">
            <div class=cdt>
                <span class="cdt_txt" id="cdt_txt"></span>
                <br>
                <span class="cdt_date" id="cdt_date"></span>
            </div>
        </div>

    </div>
    <script src="app.js"></script>
</body>
</html>

我希望有人知道如何解决这些代码，以将DateTime时间从23:59:59转换为00:00:00并添加循环功能。

Answer 1

我建议使用moment.js和moment duration format，它们会使处理日期和间隔变得更加容易。

// We can set endTime to whatever we want here (e.g. Midnight today )
// Use moment().endOf('day') to do this.
let endTime = moment().add(24, 'hours');

// Show time remaining now.
showTimeRemaining();

// Set a timer to update the displayed clock every 1000 milliseconds.
setInterval(showTimeRemaining, 1000);

function showTimeRemaining() {
    let timeRemaining = moment.duration(endTime.diff(moment()));
    document.getElementById("time_remain").innerHTML = "Time remaining: " + timeRemaining.format("hh:mm:ss");

    if (moment() > endTime) {
       resetTimer();
    }
}

function resetTimer() {
   console.log("Resetting timer..");
   endTime = moment().add(24, 'hours');
}

<h4 id="time_remain">Time remaining: </h4>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/2.3.2/moment-duration-format.js"></script>

Answer 2

这是带有moment.js的解决方案

moment().endOf('day').diff()将为您提供毫秒，直到一天结束。

Moment没有用于格式化持续时间的内置函数，因此我们使用了一些技巧。 moment.utc(X).format('hh:mm:ss')将在时间戳X毫秒处创建一个新时刻，我们可以使用format（）函数对其进行格式化。

setInterval(function(){
const timeString = moment.utc(moment().endOf('day').diff()).format('HH:mm:ss')
document.getElementById('timer').innerHTML = timeString;
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<div id="timer"></div>

Answer 3

日期的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)

Javascript：如何倒计时和循环计时器，将日期时间从23:59:59转换为00:00:00

3 个答案: