javascript - 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

试试这个:

    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';
}

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