倒计时（计时器）在新的一天之前不显示工作

时间：2018-01-22 16:45:00

标签： javascript html css timer

我试图将一个应该倒计时的计时器组合到每天16点钟。但它会在24:00之后首先说出多少小时，分钟和秒。

这对我来说很难解释，所以我希望可以在我的代码示例中找到它：

＆＃13;
＆＃13; 
(function($){
var start = new Date;
start.setHours(16, 0, 0); // 16pm           
var dataDate = start;
var countdown = {
    END_DATE: Date.parse(dataDate),
    END_DATE_MESSAGE: "",
    NOW: new Date(),
    count: 3,
    padding: 20,
    circleSize: 150,
    border: 20,
    update: 1, 
    circles: {         
      HOURS: {
        title: "HOURS",
          seconds: 3600000,
          max: 24,
          color: '#FF3333'
      },
      MINUTES: {
          title: "MINUTES",
          seconds: 60000,
          max: 60,
          color: '#FF3333'
      },
      SECONDS: {
          title: "SECONDS",
          seconds: 1000,
          max: 60,
          color: '#FF3333'
      }
    },
    init: function () {
      countdown.canvas = document.createElement('canvas');
      countdown.ctx = countdown.canvas.getContext('2d');
      countdown.size = {
        w: ((countdown.circleSize + countdown.border) * countdown.count + (countdown.padding * (countdown.count - 1))),
        h: (countdown.circleSize + countdown.border + countdown.padding * 5)
      };
      countdown.canvas.setAttribute('width', countdown.size.w);
      countdown.canvas.setAttribute('height', countdown.size.h);
      $("#countdown").append(countdown.canvas);
      countdown.ctx.textAlign = 'center';
      countdown.actualSize = countdown.circleSize + countdown.border;
      countdown.TIME_LEFT = new Date(countdown.END_DATE).getTime();
      var INTERVAL = setInterval(function(){
        var NOW = new Date();          
          if (NOW < countdown.END_DATE ) {
            countdown.start();
          } else {
            //countdown.END_DATE.setDate(END_DATE.getDate() + 1);
            countdown.completed();
          }
      }, countdown.update);
    },
    start: function () {
      // this clears the redraw text issue after loading the intel font
      countdown.ctx.setTransform(1, 0, 0, 1, 0, 0);
      countdown.ctx.clearRect(0, 0, countdown.size.w, countdown.size.h);
      var idx = 0;
      countdown.time = (new Date().getTime()) - countdown.TIME_LEFT;
      for (var key in countdown.circles) {
        countdown.draw(idx++, key, countdown.circles[key], countdown.circles[key].color);
      }
    },
    draw: function (idx, label, circle, color) {
      var x, y, value,
      circleSeconds = circle.seconds;
      value = parseFloat(countdown.time / circleSeconds);
      countdown.time -= Math.round(parseInt(value)) * circleSeconds;
      value = Math.abs(value);
      x = (countdown.circleSize * .5 + countdown.border * .5);
      x += (idx * (countdown.circleSize + countdown.padding + countdown.border));
      y = countdown.circleSize * .5;
      y += countdown.border * .5;
      var degrees = 360 - (value / circle.max) * 360.0;
      var endAngle = degrees * (Math.PI / 180);
      countdown.ctx.save();
      countdown.ctx.translate(x, y);
      countdown.ctx.clearRect(countdown.actualSize * -0.5, countdown.actualSize * -0.5, countdown.actualSize, countdown.actualSize);
      // OUTLINE
      countdown.ctx.beginPath();
      countdown.ctx.strokeStyle = "rgba(64,64,64, .2)";
      countdown.ctx.arc(0, 0, countdown.circleSize / 2, 0, 2 * Math.PI, 2);
      countdown.ctx.lineWidth = countdown.border;
      countdown.ctx.stroke();
      // FILL
      countdown.ctx.beginPath();
      countdown.ctx.strokeStyle = color;
      countdown.ctx.arc(0, 0, countdown.circleSize / 2, 0, endAngle, 1);
      countdown.ctx.lineWidth = countdown.border;
      countdown.ctx.stroke();
      // TEXT COLOR
      countdown.ctx.fillStyle = "rgba(32,32,32, .1)";
      // COUNTDOWN TIME
      countdown.ctx.font = 'bold 70px Roboto Condensed';
      countdown.ctx.fillText(Math.floor(value), 0, 20);
      // DAYS, HOURS, MINUTES
      countdown.ctx.font = 'bold 42px Roboto Condensed';
      if (Math.floor(value) === 1) {
        countdown.ctx.fillText(label.substring(0, label.length - 1), 0, 140);
      } else {
        countdown.ctx.fillText(label, 0, 140);
      }
      countdown.ctx.restore();
    },
    completed: function() {
      countdown.ctx.setTransform(1, 0, 0, 1, 0, 0);
      countdown.ctx.clearRect(0, 0, countdown.size.w, countdown.size.h);
      var idx = 0;
      countdown.time = "0";
      for (var key in countdown.circles) {
        countdown.draw(idx++, key, countdown.circles[key], "#e6e6e6");
      }
      // countdown.ctx.setTransform(1, 0, 0, 1, 0, 0);
      // countdown.ctx.clearRect(0, 0, countdown.size.w, countdown.size.h);
      // countdown.canvas.setAttribute('height', 160);
      // countdown.ctx.font = 'bold 140px intel-clear-pro';
      // countdown.ctx.fillText(countdown.END_DATE_MESSAGE, 0, 150);

      // countdown.canvas.setAttribute('style', 'display: none;');
      countdown.ctx.save();
    }
};
countdown.init();
})(jQuery);
＆＃13; 
#countdown{
  text-align: center;
  padding: 2px 0;
  font-family: 'Roboto Condensed', sans-serif;
}

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
    
.countdown-element {
  position:absolute; top:50%; height:10em; margin-top:-5em;
  text-align: center;
  margin: 5px 0px 0px 0px;
  color: #fff;
}

canvas {
  max-width: 90%;
  margin-top: 10px;
}
＆＃13; 
<h1 style="text-align: center">Time left</h1>
         <div id="countdown">
  <p class="countdown-element"></p>
</div>
＆＃13;
＆＃13;
＆＃13;

以下是显示问题的图片。

Picture 1(not working from 16pm to 24am)

Picture 2(Working from 24am to 16pm)

提前谢谢，这对我来说意味着很多。 ＆lt; 3：）

1 个答案:

答案 0 :(得分：1)

您需要在开始时检查开始时间是否过去，如果是，则添加一天。

var start = new Date(new Date().setHours(16,0,0));

// Has the start time already passed?
if (new Date() > start)
  start.setDate(start.getDate()+1);

所有new Date()内容看起来有点不对，但它确实有效。我已将下面示例中的时间更改为凌晨2点，以便更容易测试。

＆＃13;
＆＃13; 
(function($){
var start = new Date(new Date().setHours(2,0,0));

// Has the start time already passed?
if (new Date() > start)
  start.setDate(start.getDate()+1);
  
var countdown = {
    END_DATE: start,
    END_DATE_MESSAGE: "",
    NOW: new Date(),
    count: 3,
    padding: 20,
    circleSize: 150,
    border: 20,
    update: 1, 
    circles: {         
      HOURS: {
        title: "HOURS",
          seconds: 3600000,
          max: 24,
          color: '#FF3333'
      },
      MINUTES: {
          title: "MINUTES",
          seconds: 60000,
          max: 60,
          color: '#FF3333'
      },
      SECONDS: {
          title: "SECONDS",
          seconds: 1000,
          max: 60,
          color: '#FF3333'
      }
    },
    init: function () {
      countdown.canvas = document.createElement('canvas');
      countdown.ctx = countdown.canvas.getContext('2d');
      countdown.size = {
        w: ((countdown.circleSize + countdown.border) * countdown.count + (countdown.padding * (countdown.count - 1))),
        h: (countdown.circleSize + countdown.border + countdown.padding * 5)
      };
      countdown.canvas.setAttribute('width', countdown.size.w);
      countdown.canvas.setAttribute('height', countdown.size.h);
      $("#countdown").append(countdown.canvas);
      countdown.ctx.textAlign = 'center';
      countdown.actualSize = countdown.circleSize + countdown.border;
      countdown.TIME_LEFT = new Date(countdown.END_DATE).getTime();
      var INTERVAL = setInterval(function(){
        var NOW = new Date();          
          if (NOW < countdown.END_DATE ) {
            countdown.start();
          } else {
            //countdown.END_DATE.setDate(END_DATE.getDate() + 1);
            countdown.completed();
          }
      }, countdown.update);
    },
    start: function () {
      // this clears the redraw text issue after loading the intel font
      countdown.ctx.setTransform(1, 0, 0, 1, 0, 0);
      countdown.ctx.clearRect(0, 0, countdown.size.w, countdown.size.h);
      var idx = 0;
      countdown.time = (new Date().getTime()) - countdown.TIME_LEFT;
      for (var key in countdown.circles) {
        countdown.draw(idx++, key, countdown.circles[key], countdown.circles[key].color);
      }
    },
    draw: function (idx, label, circle, color) {
      var x, y, value,
      circleSeconds = circle.seconds;
      value = parseFloat(countdown.time / circleSeconds);
      countdown.time -= Math.round(parseInt(value)) * circleSeconds;
      value = Math.abs(value);
      x = (countdown.circleSize * .5 + countdown.border * .5);
      x += (idx * (countdown.circleSize + countdown.padding + countdown.border));
      y = countdown.circleSize * .5;
      y += countdown.border * .5;
      var degrees = 360 - (value / circle.max) * 360.0;
      var endAngle = degrees * (Math.PI / 180);
      countdown.ctx.save();
      countdown.ctx.translate(x, y);
      countdown.ctx.clearRect(countdown.actualSize * -0.5, countdown.actualSize * -0.5, countdown.actualSize, countdown.actualSize);
      // OUTLINE
      countdown.ctx.beginPath();
      countdown.ctx.strokeStyle = "rgba(64,64,64, .2)";
      countdown.ctx.arc(0, 0, countdown.circleSize / 2, 0, 2 * Math.PI, 2);
      countdown.ctx.lineWidth = countdown.border;
      countdown.ctx.stroke();
      // FILL
      countdown.ctx.beginPath();
      countdown.ctx.strokeStyle = color;
      countdown.ctx.arc(0, 0, countdown.circleSize / 2, 0, endAngle, 1);
      countdown.ctx.lineWidth = countdown.border;
      countdown.ctx.stroke();
      // TEXT COLOR
      countdown.ctx.fillStyle = "rgba(32,32,32, .1)";
      // COUNTDOWN TIME
      countdown.ctx.font = 'bold 70px Roboto Condensed';
      countdown.ctx.fillText(Math.floor(value), 0, 20);
      // DAYS, HOURS, MINUTES
      countdown.ctx.font = 'bold 42px Roboto Condensed';
      if (Math.floor(value) === 1) {
        countdown.ctx.fillText(label.substring(0, label.length - 1), 0, 140);
      } else {
        countdown.ctx.fillText(label, 0, 140);
      }
      countdown.ctx.restore();
    },
    completed: function() {
      countdown.ctx.setTransform(1, 0, 0, 1, 0, 0);
      countdown.ctx.clearRect(0, 0, countdown.size.w, countdown.size.h);
      var idx = 0;
      countdown.time = "0";
      for (var key in countdown.circles) {
        countdown.draw(idx++, key, countdown.circles[key], "#e6e6e6");
      }
      // countdown.ctx.setTransform(1, 0, 0, 1, 0, 0);
      // countdown.ctx.clearRect(0, 0, countdown.size.w, countdown.size.h);
      // countdown.canvas.setAttribute('height', 160);
      // countdown.ctx.font = 'bold 140px intel-clear-pro';
      // countdown.ctx.fillText(countdown.END_DATE_MESSAGE, 0, 150);

      // countdown.canvas.setAttribute('style', 'display: none;');
      countdown.ctx.save();
    }
};
countdown.init();
})(jQuery);
＆＃13; 
#countdown{
  text-align: center;
  padding: 2px 0;
  font-family: 'Roboto Condensed', sans-serif;
}

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
    
.countdown-element {
  position:absolute; top:50%; height:10em; margin-top:-5em;
  text-align: center;
  margin: 5px 0px 0px 0px;
  color: #fff;
}

canvas {
  max-width: 90%;
  margin-top: 10px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 style="text-align: center">Time left</h1>
         <div id="countdown">
  <p class="countdown-element"></p>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题