HTML/JavaScript 倒数计时器

Question

我有一个倒计时器，目前允许用户输入时间并从那里开始倒计时。我想让文本在一定时间后改变颜色，例如：

文本在 50% 时变为橙色，然后在仅剩 25% 的输入时间时文本变为红色。

我已经不知所措了，非常感谢您提供一些详细的建议，谢谢！

这是我当前的代码：

var secondsRemaining;
var intervalHandle;

function resetPage() {
  document.getElementById('inputArea').style.display = 'block';
}

function tick() {
  //grab h1
  var timeDisplay = document.getElementById('time');

  //turn seconds into mm:55
  var min = Math.floor(secondsRemaining / 60);
  var sec = secondsRemaining - (min * 60);

  //add leading 0 if seconds less than 10
  if (sec < 10) {
    sec = '0' + sec;
  }
  //concatenate with colon
  var message = min.toString() + ':' + sec;
  // now change the display
  timeDisplay.innerHTML = message;

  //stop if down to zero
  if (secondsRemaining === 0) {
    alert('Countdown Finished!');
    clearInterval(intervalHandle);
    resetPage();
  }
  // subtract from seconds remaining
  secondsRemaining--;
}

function startCountdown() {
  //get contents
  var minutes = document.getElementById('minutes').value;
  //check if not a number
  if (isNaN(minutes)) {
    alert("Please enter a number!");
    return;
  }
  //how many seconds?
  secondsRemaining = minutes * 60;
  //call tick
  intervalHandle = setInterval(tick, 1000);
  //hide form
  document.getElementById('inputArea').style.display = 'none';
}

window.onload = function() {

  // create text input
  var inputMinutes = document.createElement('input');
  inputMinutes.setAttribute('id', 'minutes');
  inputMinutes.setAttribute('type', 'text');
  inputMinutes.setAttribute('placeholder', 'Enter Time');
  //create button
  var startButton = document.createElement('input');
  startButton.setAttribute('type', 'button');
  startButton.setAttribute('value', 'Start Countdown');
  startButton.onclick = function() {
    startCountdown();
  };
  // add to DOM
  document.getElementById('inputArea').appendChild(inputMinutes);
  document.getElementById('inputArea').appendChild(startButton);
}

html,
body {
  font-family: helvetica;
  color: #222;
  background: #eaeaea;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container {
  width: 400px;
  margin: auto;
}

h1 {
  font-size: 30em;
  text-align: center;
  margin: 40px 0;
  padding: 0;
  border-right: none;
  border-left: none;
}

input {
  display: block;
  width: 80%;
  border: 5px solid #E6E6E6;
  background: #fff;
  height: 50px;
  margin-bottom: 5px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  font-size: 19px;
  text-align: center;
  border-radius: 5px;
}

input[type=button] {
  line-height: 30px;
  font-size: 19px;
  border: 2px solid #E6E6E6;
  background: #f5b932;
  color: #333;
  font-weight: bold;
  margin-top: 5px;
  transition: .4s ease-in-out;
}

input[type=text]:focus {
  outline: none;
}

input[type=button]:focus {
  outline: none;
}

input[type=button]:hover {
  background: #f5b934;
  cursor: pointer;
}

.center-count {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 20vw;
}

<div id="container">
  <div id="inputArea"></div>

</div>
<br>
<br>
<br>
<h1 id="time">0:00</h1>

Answer 1

尝试这样的事情：

已提取 minutes 以便能够计算运行上的百分比。
添加了两个改变颜色的条件...

var secondsRemaining;
var intervalHandle;

// Total time
var minutes;

function resetPage() {
  document.getElementById('inputArea').style.display = 'block';
}

function tick() {
  //grab h1
  var timeDisplay = document.getElementById('time');

  //turn seconds into mm:55
  var min = Math.floor(secondsRemaining / 60);
  var sec = secondsRemaining - (min * 60);

  //add leading 0 if seconds less than 10
  if (sec < 10) {
    sec = '0' + sec;
  }
  //concatenate with colon
  var message = min.toString() + ':' + sec;
  // now change the display
  timeDisplay.innerHTML = message;

  // Change color by percentage
  // Below 25% = 60 / 4 : red
  if (secondsRemaining < minutes * 15) {
    timeDisplay.style.color = "red";
  }
  // Below 50% = 60 / 2 : orange
  else if (secondsRemaining < minutes * 30) {
    timeDisplay.style.color = "orange";
  }

  //stop if down to zero
  if (secondsRemaining === 0) {
    alert('Countdown Finished!');
    clearInterval(intervalHandle);
    resetPage();
  }
  // subtract from seconds remaining
  secondsRemaining--;
}

function startCountdown() {
  //get contents
  minutes = document.getElementById('minutes').value;
  //check if not a number
  if (isNaN(minutes)) {
    alert("Please enter a number!");
    return;
  }
  //how many seconds?
  secondsRemaining = minutes * 60;
  //call tick
  intervalHandle = setInterval(tick, 1000);
  //hide form
  document.getElementById('inputArea').style.display = 'none';
}

window.onload = function() {

  // create text input
  var inputMinutes = document.createElement('input');
  inputMinutes.setAttribute('id', 'minutes');
  inputMinutes.setAttribute('type', 'text');
  inputMinutes.setAttribute('placeholder', 'Enter Time');
  //create button
  var startButton = document.createElement('input');
  startButton.setAttribute('type', 'button');
  startButton.setAttribute('value', 'Start Countdown');
  startButton.onclick = function() {
    startCountdown();
  };
  // add to DOM
  document.getElementById('inputArea').appendChild(inputMinutes);
  document.getElementById('inputArea').appendChild(startButton);
}

html,
body {
  font-family: helvetica;
  color: #222;
  background: #eaeaea;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container {
  width: 400px;
  margin: auto;
}

h1 {
  font-size: 30em;
  text-align: center;
  margin: 40px 0;
  padding: 0;
  border-right: none;
  border-left: none;
}

input {
  display: block;
  width: 80%;
  border: 5px solid #E6E6E6;
  background: #fff;
  height: 50px;
  margin-bottom: 5px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  font-size: 19px;
  text-align: center;
  border-radius: 5px;
}

input[type=button] {
  line-height: 30px;
  font-size: 19px;
  border: 2px solid #E6E6E6;
  background: #f5b932;
  color: #333;
  font-weight: bold;
  margin-top: 5px;
  transition: .4s ease-in-out;
}

input[type=text]:focus {
  outline: none;
}

input[type=button]:focus {
  outline: none;
}

input[type=button]:hover {
  background: #f5b934;
  cursor: pointer;
}

.center-count {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 20vw;
}

<div id="container">
  <div id="inputArea"></div>

</div>
<br>
<br>
<br>
<h1 id="time">0:00</h1>

Answer 2

试试这个：

    function tick() {
  //grab h1
  var timeDisplay = document.getElementById('time');



  //Convert remaining seconds to presentage of total seconds
  precentageS = Math.floor(secondsRemaining/totalSeconds)*100


  //Change color based on persentage
  if(precentageS <= 50){
          document.getElementById("time").style.color = "orange";
  }else if(precentageS <= 25){
          document.getElementById("time").style.color = "red";
  }else{
          document.getElementById("time").style.color = "blue";
  }



  //turn seconds into mm:55
  var min = Math.floor(secondsRemaining / 60);
  var sec = secondsRemaining - (min * 60);

  //add leading 0 if seconds less than 10
  if (sec < 10) {
    sec = '0' + sec;
  }
  //concatenate with colon
  var message = min.toString() + ':' + sec;
  // now change the display
  timeDisplay.innerHTML = message;

  //stop if down to zero
  if (secondsRemaining === 0) {
    alert('Countdown Finished!');
    clearInterval(intervalHandle);
    resetPage();
  }
  // subtract from seconds remaining
  secondsRemaining--;
}

function startCountdown() {
  //get contents
  var minutes = document.getElementById('minutes').value;
  //check if not a number
  if (isNaN(minutes)) {
    alert("Please enter a number!");
    return;
  }
  //how many seconds?
  secondsRemaining = minutes * 60;
  totalSeconds = secondsRemaining;
  //call tick
  intervalHandle = setInterval(tick, 1000);
  //hide form
  document.getElementById('inputArea').style.display = 'none';
}

我所做的是在 secondsRemaining 之后添加了一个 totalSeconds 变量，这样我就可以跟踪我们开始了多少秒。然后，我将 secondsRemaining 转换为 totalSeconds 的百分比，并根据您想更改颜色的次数设置 if 语句。

Answer 3

我会采用百分比方法，这是经过验证的代码。

为 initialTime asked 设置一个新变量。

var initialTime;

var secondsRemaining;
var intervalHandle;

function resetPage() {
  document.getElementById('inputArea').style.display = 'block';
}

function tick() {
  //grab h1
  var timeDisplay = document.getElementById('time');

  //turn seconds into mm:55
  var min = Math.floor(secondsRemaining / 60);
  var sec = secondsRemaining - (min * 60);

  //add leading 0 if seconds less than 10
  if (sec < 10) {
    sec = '0' + sec;
  }
  //concatenate with colon
  var message = min.toString() + ':' + sec;
  // now change the display
  timeDisplay.innerHTML = message;

然后在每次报价时，检查计数器上实际剩余的百分比是多少。

    var remainingPercentage = secondsRemaining*100/initialTime;

    if (remainingPercentage === 75) {
    timeDisplay.style.color = "orange";
    }

    if (remainingPercentage === 50) {
    timeDisplay.style.color = "yellow";
    }

    if (remainingPercentage === 25) {
    timeDisplay.style.color = "red";
    }


  //stop if down to zero
  if (secondsRemaining === 0) {
    alert('Countdown Finished!');
    clearInterval(intervalHandle);
    resetPage();
  }
  // subtract from seconds remaining
  secondsRemaining--;
}

function startCountdown() {
  //get contents
  var minutes = document.getElementById('minutes').value;
  //check if not a number
  if (isNaN(minutes)) {
    alert("Please enter a number!");
    return;
  }
  //how many seconds?

第一次设置secondsRemaining时，也把它存入initialTime

  secondsRemaining = initialTime = minutes * 60;

  //call tick
  intervalHandle = setInterval(tick, 1000);
  //hide form
  document.getElementById('inputArea').style.display = 'none';
}

window.onload = function() {

  // create text input
  var inputMinutes = document.createElement('input');
  inputMinutes.setAttribute('id', 'minutes');
  inputMinutes.setAttribute('type', 'text');
  inputMinutes.setAttribute('placeholder', 'Enter Time');
  //create button
  var startButton = document.createElement('input');
  startButton.setAttribute('type', 'button');
  startButton.setAttribute('value', 'Start Countdown');
  startButton.onclick = function() {
    startCountdown();
  };
  // add to DOM
  document.getElementById('inputArea').appendChild(inputMinutes);
  document.getElementById('inputArea').appendChild(startButton);
}

HTML/JavaScript 倒数计时器

HTML/JavaScript Countdown Timer

javascript

html

countdown