输入值的起始计数器

时间:2019-05-09 09:16:17

标签: javascript

当用户单击开始按钮时,如何将输入值设置为countDownAmount?以下是我使用的代码。也有人可以指导我如何添加重置按钮。

var timerElm = document.getElementById("timer");
var startTime = Date.now();
var countDownAmount = document.getElementById('amount').value; // ms (3603000)
var countDownEnd = startTime + countDownAmount;
var tickAudio = new Audio('https://freesound.org/data/previews/254/254316_4062622-lq.mp3');
var lastSeconds;

function formatTime(hours, minutes, seconds, mseconds) {
  hours = String(hours);
  minutes = String(minutes);
  seconds = String(seconds);
  mseconds = String(mseconds);

  while (mseconds.length < 3) {
    mseconds = "0" + mseconds;
  }
  seconds = (seconds.length < 2) ? "0" + seconds : seconds;
  minutes = (minutes.length < 2) ? "0" + minutes : minutes;
  return hours + "h  " + minutes + "m  " + seconds + "s  " + mseconds + "ms";
}

function updateTimer() {
  var remainingTime = countDownEnd - Date.now();
  var hours = Math.floor(remainingTime / (60 * 60 * 1000));
  var minutes = Math.floor(remainingTime / (60 * 1000)) % 60;
  var seconds = Math.floor(remainingTime / 1000) % 60;
  var mseconds = remainingTime % 1000;

  if (lastSeconds && lastSeconds !== seconds && !hours && !minutes && seconds <= 10) {
    tickAudio.play();
  }
  
  lastSeconds = seconds;

  if (remainingTime < 0) {
    hours = 0;
    minutes = 0;
    seconds = 0;
    mseconds = 0;
  } else {
    requestAnimationFrame(updateTimer);
  }

  // printout
  timerElm.innerHTML = formatTime(hours, minutes, seconds, mseconds);
}

updateTimer();
#timer {
  font-size: 32px;
  text-align: center;
}
<div id="timer"></div>
min: <input id="amount">
<button id="startcount">start</button>

这是小提琴:

https://jsfiddle.net/ricegirl/5u21rhzb/7/

0 个答案:

没有答案