Таймер обратного отсчета HTML / JavaScript - PullRequest
Новая
       44

Таймер обратного отсчета HTML / JavaScript

0 голосов
/ 10 мая 2018

У меня есть таймер обратного отсчета, который в настоящее время позволяет пользователю ввести время и начать отсчет оттуда. Я бы хотел, чтобы цвет текста менялся через определенное время, например:

Текст становится оранжевым при 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>

Ответы [ 3 ]

0 голосов
/ 10 мая 2018

Попробуйте это: 

    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 после секундного остатка, чтобы я мог отслеживать, сколько секунд мы начали с.Затем я преобразовываю secondsRemaining в процент от totalSeconds и получаю операторы if в зависимости от того, сколько раз вы хотели бы изменить цвет.

0 голосов
/ 10 мая 2018

Я бы пошел с процентным подходом, вот ваш код с этой проверкой.

Установить новую переменную для начального времени запроса. 

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?

При первой установке секунд, оставшихся, сохраните их также в 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);
}
0 голосов
/ 10 мая 2018

Попробуйте что-то вроде этого:

  • Извлечено 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>
...