Javascript: Как я могу обратный отсчет и зациклить таймер, конвертировать дату и время в время с 23:59:59 до 00:00:00 - PullRequest
Новая
       51

Javascript: Как я могу обратный отсчет и зациклить таймер, конвертировать дату и время в время с 23:59:59 до 00:00:00

0 голосов
/ 14 июня 2019

Я создаю сайт электронной коммерции. И я хочу создать таймер обратного отсчета.

Я хочу начать отсчет с 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 и добавления функции цикла.

Ответы [ 3 ]

1 голос
/ 14 июня 2019

Я бы предложил использовать moment.js и формат длительности момента , это значительно упрощает работу с датами и интервалами. 

// 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>
0 голосов
/ 14 июня 2019

Часть даты 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)
0 голосов
/ 14 июня 2019

Вот решение с помощью moment.js

moment().endOf('day').diff(), которое даст вам миллисекунды до конца дня.

Момент не имеет встроенных функций для форматирования длительности, поэтому мы используеммаленькая хитрость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>
...