простой таймер обратного отсчета в JavaScript

Question

Я ищу простой таймер обратного отсчета в JavaScript.Все сценарии, которые я нахожу, «все поют все танцуют».Я просто хочу jQuery бесплатный, минимальный таймер обратного отсчета, который отображается в минутах и ​​секундах.Спасибо.

Answer 1

Проверьте это:

var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);

function setTime() {
  ++totalSeconds;
  secondsLabel.innerHTML = pad(totalSeconds % 60);
  minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}

function pad(val) {
  var valString = val + "";
  if (valString.length < 2) {
    return "0" + valString;
  } else {
    return valString;
  }
}

<label id="minutes">00</label>:<label id="seconds">00</label>

Answer 2

Таймер для jQuery - меньше, работает, тестируется.

    var sec = 0;
    function pad ( val ) { return val > 9 ? val : "0" + val; }
    setInterval( function(){
        $("#seconds").html(pad(++sec%60));
        $("#minutes").html(pad(parseInt(sec/60,10)));
    }, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="minutes"></span>:<span id="seconds"></span>

Чистый JavaScript:

    var sec = 0;
    function pad ( val ) { return val > 9 ? val : "0" + val; }
    setInterval( function(){
        document.getElementById("seconds").innerHTML=pad(++sec%60);
        document.getElementById("minutes").innerHTML=pad(parseInt(sec/60,10));
    }, 1000);

<span id="minutes"></span>:<span id="seconds"></span>

Обновление:

Этот ответ показывает, как дополнять.

Остановка setInterval ^MDN достигается с clearInterval ^MDN

var timer = setInterval ( function(){...}, 1000 );
...
clearInterval ( timer );

Fiddle

Answer 3

Следующий код работает как таймер обратного отсчета.Это чистый код JavaScript, который показывает hour:minute:second.Также имеется кнопка СТОП:

<div id="timer"></div>
<div id ="stop_timer" onclick="clearInterval(timerVar)">Stop time</div>

var timerVar = setInterval(countTimer, 1000);
var totalSeconds = 0;
function countTimer() {
   ++totalSeconds;
   var hour = Math.floor(totalSeconds /3600);
   var minute = Math.floor((totalSeconds - hour*3600)/60);
   var seconds = totalSeconds - (hour*3600 + minute*60);

   document.getElementById("timer").innerHTML = hour + ":" + minute + ":" + seconds;
}

Answer 4

Мне пришлось создать таймер для учителей, оценивающих работу учеников.Вот тот, который я использовал, который полностью основан на времени, прошедшем с момента начала классификации, сохраняя системное время в момент загрузки страницы, а затем сравнивая его каждые полсекунды с системным временем в этой точке:

var startTime = Math.floor(Date.now() / 1000); //Get the starting time (right now) in seconds
localStorage.setItem("startTime", startTime); // Store it if I want to restart the timer on the next page

function startTimeCounter() {
    var now = Math.floor(Date.now() / 1000); // get the time now
    var diff = now - startTime; // diff in seconds between now and start
    var m = Math.floor(diff / 60); // get minutes value (quotient of diff)
    var s = Math.floor(diff % 60); // get seconds value (remainder of diff)
    m = checkTime(m); // add a leading zero if it's single digit
    s = checkTime(s); // add a leading zero if it's single digit
    document.getElementById("idName").innerHTML = m + ":" + s; // update the element where the timer will appear
    var t = setTimeout(startTimeCounter, 500); // set a timeout to update the timer
}

function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}

startTimeCounter();

Таким образом, на самом деле не имеет значения, если 'setTimeout' подвержен задержкам выполнения, истекшее время равно всегда относительно системного времени, когда оно началось, и системного времени в то время.обновления.

Answer 5

Возился с кодом Бакудана и другим кодом в stackoverflow, чтобы получить все в одном.Извините, он использует jquery, но очень прост в использовании.Имеет возможность приостановить, а затем возобновить ее.

Обновлено: добавлены дополнительные параметры.Теперь запустить, приостановить, возобновить, сбросить и перезапустить.Смешайте функции, чтобы получить желаемые результаты.

Пошлите сюда: https://jsfiddle.net/wizajay/rro5pna3/

<span id="min">00</span>:<span id="sec">00</span>
<input id="startButton" type="button" value="Start">
<input id="pauseButton" type="button" value="Pause">
<input id="resumeButton" type="button" value="Resume">
<input id="resetButton" type="button" value="Reset">
<input id="restartButton" type="button" value="Restart">


var Clock = {
totalSeconds: 0,

start: function () {
    var self = this;
    function pad(val) { return val > 9 ? val : "0" + val; }
    this.interval = setInterval(function () {
    self.totalSeconds += 1;


    $("#min").text(pad(Math.floor(self.totalSeconds / 60 % 60)));
    $("#sec").text(pad(parseInt(self.totalSeconds % 60)));
  }, 1000);
},

reset: function () {
Clock.totalSeconds = null; 
clearInterval(this.interval);
$("#min").text("00");
$("#sec").text("00");
},

pause: function () {
clearInterval(this.interval);
delete this.interval;
},

resume: function () {
if (!this.interval) this.start();
},

restart: function () {
 this.reset();
 Clock.start();
}
};


$('#startButton').click(function () { Clock.start(); });
$('#pauseButton').click(function () { Clock.pause(); });
$('#resumeButton').click(function () { Clock.resume(); });
$('#resetButton').click(function () { Clock.reset(); });
$('#restartButton').click(function () { Clock.restart(); });

Answer 6

var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);

function setTime() {
  ++totalSeconds;
  secondsLabel.innerHTML = pad(totalSeconds % 60);
  minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}

function pad(val) {
  var valString = val + "";
  if (valString.length < 2) {
    return "0" + valString;
  } else {
    return valString;
  }
}

<label id="minutes">00</label>:<label id="seconds">00</label>

Answer 7

Примечание: всегда включайте jQuery перед написанием скриптов jQuery

Шаг 1: Функция setInterval вызывается каждые 1000 мс (1 с)

Stpe2: В этой функции. Увеличение секунд

Шаг 3: Проверьте условия

<span id="count-up">0:00</span>
<script>
	  var min    = 0;
      var second = 00;
      var zeroPlaceholder = 0;
      var counterId = setInterval(function(){
                        countUp();
                      }, 1000);

      function countUp () {
          second++;
          if(second == 59){
            second = 00;
            min = min + 1;
          }
          if(second == 10){
              zeroPlaceholder = '';
          }else
          if(second == 00){
              zeroPlaceholder = 0;
          }

          document.getElementById("count-up").innerText = min+':'+zeroPlaceholder+second;
      }
</script>

Answer 8

@ Cybernate, сегодня я искал тот же сценарий, спасибо за ваш вклад.Однако я немного изменил это для jQuery ...

function clock(){
    $('body').prepend('<div id="clock"><label id="minutes">00</label>:<label id="seconds">00</label></div>');
         var totalSeconds = 0;
        setInterval(setTime, 1000);
        function setTime()
        {
            ++totalSeconds;
            $('#clock > #seconds').html(pad(totalSeconds%60));
            $('#clock > #minutes').html(pad(parseInt(totalSeconds/60)));
        }
        function pad(val)
        {
            var valString = val + "";
            if(valString.length < 2)
            {
                return "0" + valString;
            }
            else
            {
                return valString;
            }
        }
}
$(document).ready(function(){
    clock();
    });

часть css:

<style>
#clock {
    padding: 10px;
    position:absolute;
    top: 0px;
    right: 0px;
    color: black;
}
</style>

Answer 9

Вот один из них, использующий .padStart():

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' />
  <title>timer</title>
</head>
<body>
  <span id="minutes">00</span>:<span id="seconds">00</span>

  <script>
    const minutes = document.querySelector("#minutes")
    const seconds = document.querySelector("#seconds")
    let count = 0;

    const renderTimer = () => {
      count += 1;
      minutes.innerHTML = Math.floor(count / 60).toString().padStart(2, "0");
      seconds.innerHTML = (count % 60).toString().padStart(2, "0");
    }

    const timer = setInterval(renderTimer, 1000)
  </script>
</body>
</html>

От MDN :

Метод padStart () дополняет текущую строку другой строкой (при необходимости повторяется), чтобы полученная строка достигла заданной длины. Заполнение применяется с начала (слева) текущей строки.

Answer 10

Расширение от @Chandu с добавлением некоторого пользовательского интерфейса:

<html>
<head>
<script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
</head>
<style>
button {
background: steelblue; 
border-radius: 4px; 
height: 40px; 
width: 100px; 
color: white; 
font-size: 20px; 
cursor: pointer; 
border: none; 
}
button:focus {
outline: 0; 
}
#minutes, #seconds {
font-size: 40px; 
}
.bigger {
font-size: 40px; 
}
.button {
  box-shadow: 0 9px #999;
}

.button:hover {background-color: hotpink}

.button:active {
  background-color: hotpink;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
<body align='center'>
<button onclick='set_timer()' class='button'>START</button>
<button onclick='stop_timer()' class='button'>STOP</button><br><br>
<label id="minutes">00</label><span class='bigger'>:</span><label id="seconds">00</label>
</body>
</html>
<script>

function pad(val) {
  valString = val + "";
  if(valString.length < 2) {
     return "0" + valString;
     } else {
     return valString;
     }
}

totalSeconds = 0;
function setTime(minutesLabel, secondsLabel) {
    totalSeconds++;
    secondsLabel.innerHTML = pad(totalSeconds%60);
    minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));
    }

function set_timer() {
    minutesLabel = document.getElementById("minutes");
    secondsLabel = document.getElementById("seconds");
    my_int = setInterval(function() { setTime(minutesLabel, secondsLabel)}, 1000);
}

function stop_timer() {
  clearInterval(my_int);
}


</script>

Выглядит следующим образом: