Question

大家好我想尝试实现一个计时器，根据使用.setTimeout（），会在几分钟和几秒内减少。在您回答之前，您应该知道，我已经处理了几个问题并尝试了几个实现，但没有任何工作。以下是代码：

  $("#start").click(function(){

var time = workTime.text();
timer.text(time + ":00");
time *= 60000;
console.log(time);
while(time !== 0){
time -= 1000;
setTimeout(takeSec, 1000);
}
});

function takeSec(){

   conosole.log("Timer Started");
var timeText = timer.text();
var minute = timeText.slice(0, timeText.indexOf(":"));
var second = timeText.slice(1);


if (second == "00") {
  minute--;
  timer.text(minute + ":59");
} else {
  second--;
  timer.text(minute + second);
}

}

编辑：对不起，我没有解释代码的行为。因此，当单击按钮时，所有关于代码的运行，总是从中减去时间，但setTimout（）不起作用。

Answer 1

逻辑有点棘手，但我认为this jsfiddle正是你要找的。

var btn = document.querySelector('button');
var workTime = document.querySelector('#work-time');
var timer = document.querySelector('#timer');
var timerRef, time;

btn.addEventListener("click", function () {
	clearTimeout(timerRef);
  time = +workTime.value || 0;
  timer.innerText = `${pad(time, 2)}:00`;
  time *= 60000;
  console.log(time);
	takeSec();
}, false);

function pad (num, size) { return ('000000000' + num).substr(-size); }

function takeSec () {
  console.log("taking second");
  var timeText = timer.innerText;
  var minute = timeText.slice(0, timeText.indexOf(":"));
  var second = timeText.slice(timeText.indexOf(":") + 1, timeText.length);
  console.log(timeText, minute, second);
  
  if (second == 0) {
  	minute--;
    timer.innerText = `${pad(minute, 2)}:59`;
  } else {
  	second--;
    timer.innerText = `${pad(minute, 2)}:${pad(second, 2)}`;
  }
  
  time -= 1000;
  
  if (time > 0) {
	  timerRef = setTimeout(takeSec, 1000);
  } else {
  	timer.innerText = 'DONE';
  }
}

<p id="timer"></p>

<input type="text" id="work-time">

<button>Start</button>

使用jquery按钮执行JavaScript .setTimeout（）

1 个答案: