Таймер обратного отсчета до будущей даты работает для всех показателей, кроме дней - PullRequest
Новая
       10

Таймер обратного отсчета до будущей даты работает для всех показателей, кроме дней

0 голосов
/ 19 сентября 2018

Я работаю над этим таймером обратного отсчета, который показывает круговой индикатор выполнения во время обратного отсчета.Все работает, но индикатор выполнения для круга дней.Это показывает правильное количество дней, но это не делает круг вообще.Вот HTML: 

<div style="text-align: center">
 <div id="countdown"></div>
  <div id="count-circles"></div>
</div>

Вот javascript. Переменные inputDate и inputName вводятся пользователем на фронтальном интерфейсе.Итак, они вводят дату и заголовок, а затем я беру эту дату, чтобы начать вычисления.Это первый раз, когда я работал с canvas, поэтому не уверен, что это может быть проблемой.Надеюсь, вы можете помочь!

 var inputDate = c.options.date_field;
 var inputName = c.options.name_field;
 var target_date = new Date(inputDate).getTime(); 
 var countdown = document.getElementById("countdown");

var day = inputDate,
    size = 200,
    lineWidth = 8,
    rgb = 'rgb(14,84,166)',
    rgba = 'rgba(158,158,158,0)',
    fill = 'rgb(23,23,23)',
    textColor = 'black',
    $countdown = $('.js-countdown'),
    $days = '<canvas id="s-days" height="' + size + '" width="' + size + '" />',
    $hours = '<canvas id="s-hours" height="' + size + '" width="' + size + '" />',
    $minutes = '<canvas id="s-minutes" height="' + size + '" width="' + size + '" />',
    $seconds = '<canvas id="s-seconds" height="' + size + '" width="' + size + '" />';

var seconds = moment(day).diff(moment(), 'seconds'),
    minutes = Math.floor(seconds / 60),
    hours = Math.floor(minutes / 60),
    days = Math.floor(hours / 24);

$hours = $($hours).appendTo('#count-circles');
$minutes = $($minutes).appendTo('#count-circles');
$seconds = $($seconds).appendTo('#count-circles');
$seconds = $($seconds).appendTo('#count-circles');
$days = $($days).appendTo('#count-circles');

var dateInterval = setInterval(function(){
    getSeconds();
}, 100);

var clearCircle = function(ctx) {
    ctx.clearRect(0, 0, size, size);
}

var drawText = function(canvas, ctx, txt) {
    var x = canvas.width / 2;
    var y = canvas.height / 2;
    ctx.font = '18pt Caveat';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = textColor;
    ctx.fillText(txt, x, y);
}

var setTrack = function(ctx) {
    ctx.strokeStyle = rgba;
    ctx.lineWidth = lineWidth/2;
    ctx.beginPath();
    ctx.arc(size/2, size/2, size/2-11, 0, Math.PI*2);
    ctx.fillStyle = fill;
    //ctx.fill();
    ctx.stroke();
}

var createCircle = function(ctx, now, total) {
    ctx.strokeStyle = rgb;
    ctx.lineWidth = lineWidth;
    ctx.beginPath();
    ctx.arc(
      size/2,
      size/2,
      size/2-8,
      Math.PI/-2,
      ( Math.PI * 2 ) * ( now / total ) + ( Math.PI / -2 ),
      false
    );
    ctx.stroke();
}

var getSeconds = function() {
    seconds = moment(day).diff(moment(), 'seconds');
    var s = (seconds%60 === 0) ? 60 : seconds%60;
    if(seconds%60 === 0) getMinutes();

    var c = $seconds[0];
    var ctx = c.getContext("2d");

    clearCircle(ctx);
    setTrack(ctx);
    drawText(c, ctx, s + 's');
    createCircle(ctx, s, 60);

}

var getMinutes = function() {
    minutes = Math.floor(seconds / 60);
    var m = (minutes%60 === 0) ? 60 : minutes%60;
    if(minutes%60 === 0) getHours();

    var c = $minutes[0];
    var ctx = c.getContext("2d");

    clearCircle(ctx);
    setTrack(ctx);
    drawText(c, ctx, m + 'm');
    createCircle(ctx, m, 60);

}

var getHours = function() {
    hours = Math.floor(minutes / 60);
    var h = (hours%24 === 0) ? 24 : hours%24;
    if(hours%24 === 0) getDays();

    var c = $hours[0];
    var ctx = c.getContext("2d");

    clearCircle(ctx);
    setTrack(ctx);
    drawText(c, ctx, h + 'h');
    createCircle(ctx, h, 24);

}

var getDays = function() {
    days = Math.floor(hours / 24);
    var d = (days%target_date === 0) ? target_date : days%target_date;
    var c = $days[0];
    var ctx =c.getContext("2d");

    clearCircle(ctx);
    setTrack(ctx);
    drawText(c, ctx, d + ' days');
    createCircle(ctx, d, target_date);
}

getMinutes();
getHours();
getDays();

});
...