Question

我的网站上有两个倒计时器。一个计时器会自动启动，但下一个计时器只能在第一个计时器完成后启动。这应该永远循环，即从一个接一个的时钟开始。

以下是我尝试的代码：

function count() {
    var startTime = document.getElementById('hms').innerHTML;
    var pieces = startTime.split(":");
    var time = new Date();
    time.setHours(pieces[0]);
    time.setMinutes(pieces[1]);
    time.setSeconds(pieces[2]);
    var timedif = new Date(time.valueOf() - 1000);
    var newtime = timedif.toTimeString().split(" ")[0];
    document.getElementById('hms').innerHTML = newtime;
    if (newtime !== '00:00:00') {
        setTimeout(count, 1000);
    } else {
        count1();
    }

}

count();

function count1() {
    var startTime = document.getElementById('hms1').innerHTML;
    var pieces = startTime.split(":");
    var time = new Date();
    time.setHours();
    time.setMinutes(pieces[1]);
    time.setSeconds(pieces[2]);
    var timedif = new Date(time.valueOf() - 1000);
    var newtime = timedif.toTimeString().split(" ")[0];
    document.getElementById('hms1').innerHTML = newtime;
    if (newtime !== '00:00:00') {
        setTimeout(count, 1000);
    } else {
        count();
    }

}

HTML：

<div id="hms">00:00:10</div>


<div id="hms1">00:02:10</div>

我无法完成这项工作。帮助！

Answer 1

count应该开始超时以运行count1，并且反过来：

initial_count = 5; // say 5 sec. count-down
initial_count1 = 7;
ic = initial_count;
function count() {
  ic--
  if (ic>=0)
    setTimeout(count, 1000); // refresh every 1sec.
  else {
    ic = initial_count1;
    count1();
  }
}

function count1() {
  ic--
  if (ic>=0)
    setTimeout(count1, 1000); // refresh every 1sec.
  else {
    ic = initial_count;
    count();
  }
}

count(); // start the first alarm.

添加所有剩余的逻辑......

Answer 2

function count() {
    var startTime = document.getElementById('hms').innerHTML;
    var pieces = startTime.split(":");
    var time = new Date(); time.setHours(pieces[0]);
    time.setMinutes(pieces[1]);
    time.setSeconds(pieces[2]);
    var timedif = new Date(time.valueOf() - 1000);
    var newtime = timedif.toTimeString().split(" ")[0];
    document.getElementById('hms').innerHTML=newtime;
   if(newtime!=='00:00:00'){
    setTimeout(count, 1000);
   }else
   {
     count1();
   }

}

count();


function count1() {
    var startTime = document.getElementById('hms1').innerHTML;
    var pieces = startTime.split(":");
    var time = new Date(); time.setHours();
    time.setMinutes(pieces[1]);
    time.setSeconds(pieces[2]);
    var timedif = new Date(time.valueOf() - 1000);
    var newtime = timedif.toTimeString().split(" ")[0];
    document.getElementById('hms1').innerHTML=newtime;
    if(newtime!=='00:00:00' && newtime!=='00:00:01' ){
        setTimeout(count, 1000);
    }else
    {
        count();
    }

   }

 count1();

Answer 3

您当前的代码几乎就在那里 - 有几个小问题：

time.setHours在第23行缺少参数，应如下所示：

var time = new Date(); time.setHours(pieces[0]);
第30行应调用备用函数：

setTimeout(count1, 1000);
一次只能运行一个计数器，因此无需最后一行（count1()）。

这是一个updated JSBin。

但是，这里的DRY解决方案更适合避免必须管理两个功能：

var currentTimer = 'hms';
var alternateTimer = 'hms1';

function count() {
  var timer = document.getElementById(currentTimer);

  var startTime = timer.innerHTML;
  var pieces = startTime.split(':');
  var time = new Date();

  time.setHours(pieces[0]);
  time.setMinutes(pieces[1]);
  time.setSeconds(pieces[2]);

  var timedif = new Date(time.valueOf() - 1000);
  var newtime = timedif.toTimeString().split(' ')[0];

  // Update DOM
  timer.innerHTML = newtime;

  if(newtime === '00:00:00') {
    // Swap the two timers
    currentTimer = [alternateTimer, alternateTimer = currentTimer][0];
  }

  setTimeout(count, 1000);
}

count();

希望有所帮助！

一个接一个地启动1个计时器，并使用javascript

3 个答案: