达到目标时更改倒数计时器的外观？

Question

我已经构建了一个简单的倒数计时器，我想知道如何才能在倒数结束后将计时器更改为 div 来告诉用户倒数已完成？目前它只会像这样向倒计时添加底片：

倒计时：

[ 01 ][ 01 ][ 10 ][ 30 ]
 days hours  mins  secs

一旦超过时间限制：

[ 00 ][ -01 ][ -10 ][ -30 ]
 days hours  mins  secs

我什至不确定从哪里开始，但这是我的计时器在 HTML

中的设置方式

定时器HTML:

<div class="timer">
      <div><div id="d"></div>days</div>
      <div><div id="h"></div>hours</div>
      <div><div id="m"></div>min</div>
      <div><div id="s"></div>sec</div>
</div>

和我的 JS 函数：

// vars for current year
var current = new Date();

//Your current year
var current_year = current.getFullYear();

//Next year
var next_year = current_year + 1;

// Date you will count down to
// You can change the 'current_year' to 'next year' as well if you were counting down to someing in 2016
var target_date = new Date("july 4, " + current_year).getTime();

// Vars for units of time
var days, hours, minutes, seconds;

// Get the elements that will hold the numbers.
var $days = document.getElementById("d");
var $hours = document.getElementById("h");
var $minutes = document.getElementById("m");
var $seconds = document.getElementById("s");

// Calculate the countdown clock and set the HTML.
function update() {
  // Find the amount of "seconds" between now and target.
  var current_date = new Date().getTime();
  var seconds_left = (target_date - current_date) / 1000;

  // Do some time calcs
  days = parseInt(seconds_left / 86400);
  seconds_left = seconds_left % 86400;

  hours = parseInt(seconds_left / 3600);
  seconds_left = seconds_left % 3600;

  minutes = parseInt(seconds_left / 60);
  seconds = parseInt(seconds_left % 60);

  // Format the number strings and put them in the elements.
  $days.innerHTML = pad(days, 2);
  $hours.innerHTML = pad(hours, 2);
  $minutes.innerHTML = pad(minutes, 2);
  $seconds.innerHTML = pad(seconds, 2);
}

// update the HTML
// or else your boxes will be blank
update();

// update every 1 second.
setInterval(update, 1000);


// If num has less than size digits, add enough 0s to the front.
function pad(num, size) {
  var s = num+"";
  while (s.length < size) s = "0" + s;
  return s;
}

还有一个codepen进一步帮助解释。

我想我需要一些类似的东西..

一个var代表'completed'
一个函数说一旦var完成后，改变timer的class？

我真的不确定，如有任何帮助，我们将不胜感激！

Answer 1

首先，声明一个间隔标识符，然后用于删除计时器：

var myInterval = setInterval(update, 1000);

然后，您可以验证是否超时，并显示消息。

var all_seconds_left = (target_date - current_date) / 1000;
if(all_seconds_left <= 0){
    clearInterval(myInterval);
    document.querySelector("#myResultDIV").innerHTML = "All done!"
}

Answer 2

在您的 update 函数中，您可以添加：

if(target_date <= Date.now()) {
    // done!
}

然后您可以根据需要设置 timer div 的样式，但最简单的可能是这样的：

var timer = document.querySelectorAll('.timer');
timer.innerHTML = 'Done!';

Answer 3

你只想知道

Is the countdown is before or after now.

首先将你的 interval 放入这样的 var 中：

var countdownInterval = setInterval(update, 1000);

其次，在您的 update() 函数中，添加：

if(target_date <= Date.now()) {
    clearInterval(countdownInterval);
    document.querySelector(".timer").innerHTML = "Countdown ended!"
}

Answer 4

在您的 update() 函数中，您只需要检查 seconds_left 是否 <= 0，并按照您的建议更新 class.

我已经更新了您的 code 以包括更短的测试计时器，以及 class 添加项。

var seconds_left = (target_date - current_date) / 1000; // Unchanged

if ( seconds_left <= 0 ) {
    // Change class here
    var ele = document.getElementsByClassName('timer')[0];
    ele.classList.add('completed');
}

达到目标时更改倒数计时器的外观？

Changing the appearance of a countdown timer when goal is reached?

html

javascript

css

countdown