2

Нужно сделать таймер(не обратного, а обычного) подсчёта времени минут и секунд. Например нажимаешь на button, запускаеться подсчёт времени минут и секунд. Нажимаешь на другой button , сбрасывается на 0;

Есть ли какая библиотека для этого дела, или пример реализации такого таймера ?

2
  • 1
    StackOverflow это не тот ресурс, где вам наготово напишут решение. Показывайте то, что вы уже сдедали, а участники помогут разобраться с тем, почему это не работает. Код такого таймера можно уложить менее чем в 10 строк, поэтому вряд ли здесь необходимы какие то библиотеки. Начните изучение с функции setInverval()
    – teran
    13 окт 2016 в 9:02
  • О, у меня было такой где-то. Сейчас пришлю.
    – Dimava
    13 окт 2016 в 9:06

3 ответа 3

1

var milisec = 0;
var sec = 0;
var min = 0;
var timer;
$("#start").click(startTimer);

function startTimer() {
  timer = setInterval(function() {
    $("#milisec").text(milisec);
    milisec++;
    if (milisec == 100) {
      milisec = 0;
      sec++;
      $("#sec").text(sec);
    }
    if (sec == 60) {
      sec = 0;
      min++;
      $("#min").text(min);
    }
  }, 100);
}

$("#stop").click(function() {
  clearInterval(timer);
})
$("#cliear").click(function() {
  $("#milisec, #sec, #min ").text("0");
  milisec = 0;
  sec = 0;
  min = 0;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="timer">
<span id="min">0</span><i>:</i>
<span id="sec">0</span><i>:</i>
<span id="milisec">0</span>
<br>
</span>
<button id="start">Start</button>
<br>
<button id="stop">Stop</button>
<br>
<button id="cliear">Cliear</button>

4
  • setInterval не гарантирует что функция будет вызвана ровно через 100 мс.
    – Arnial
    13 окт 2016 в 9:23
  • @Arnial согласен(за исключением IE). можно попробовать рекурсивный setTimeout (), там есть четкий контроль задержки...
    – C.Raf.T
    13 окт 2016 в 9:32
  • Я к тому, что скрипт может быть вызван не через 100мс, а через 200 или 300. К примеру из-за gc, repatin/reflow или другой долгой js функции. Лучше прибавлять к milisec разницу во времени между предыдущем и текущем вызовом, а не увеличивать всегда на 1.
    – Arnial
    13 окт 2016 в 9:41
  • @Arnial и с этим не могу не согласиться. Но мой пример абсолютно примитивен и создан лишь как один из возможных вариантов.
    – C.Raf.T
    13 окт 2016 в 9:50
1

Написан на css.

window.createTimeCounter = function createTimeCounter(f, log) {
  var box = $('<div/>').addClass('timebox');
  ////////
  function num(n, t) {
      var s = '';
      for (var i = 0; i < n; i++) {
        s += i % 10 + '<br>';
      }
      s += '0';
      var a = 'time' + n + ' ' + t + 's linear infinite';
      if (log)
        console.log(n, t, a);
      return $('<div/>').html(s).addClass('timenumber')
        .css('animation', a);
    }
    ////////

  function hol(c, r, i) {
      if ('hmsc'.indexOf(c) == -1) return $('<b/>').html(c);
      var h = $('<div/>').addClass('timeholder');
      var a = {
        c: {
          def: [0.01, 10],
          11: [0.1, 10],
        },
        s: {
          def: [1, 10],
          20: [60, 6]
        },
        m: {
          def: [60, 10],
          20: [3600, 6]
        },
        h: {
          def: [3600, 10],
        }
      };
      var ac = a[c];
      var b = ac[10 * r + i];
      if (!b) {
        b = ac.def;
        b[2] = b[0];
        for (var j = 0; j < r - i; j++) b[2] *= b[1];
        b[0] = b[2];
      }
      if (log)
        console.log(10 * r + i, c, r, i, ac, ac.def, b);
      return h.append(
        num(b[1], b[0]));


    }
    ///////

  for (var i = 0; i < f.length; i++) {
    var c = f.charAt(i);
    var r = new RegExp(c, 'g');
    var reps = (f.match(r) || '').length;
    var ind = (f.substr(0, i).match(r) || '').length;;
    box.append(hol(c, reps, ind));
  }
  return box;
}
s = document.createElement('style');
s.innerHTML =
  '@keyframes time10 { 0% {top: 0px;} 100% {top: -200px;}}' +
  '@keyframes time6 { 0% {top: 0px;} 100% {top: -120px;}}' +
  '.timebox {display: inline-block;}' +
  '.timeholder { display: inline-block; width: 12px; height: 20px; overflow-y: hidden;}' +
  '.timebox b { display: inline-block; vertical-align: super; line-height: 20px;}' +
  '.timenumber { width: 10px; text-align: center; margin: auto; position: relative; line-height: 20px;}' +
  '.timebox * { border: 1px solid black;}';
document.head.appendChild(s);
createTimeCounter('hhh:mm:ss', 8).appendTo($('body'));
$('body').append('<br>');
createTimeCounter('ssss.cccccccc').appendTo($('body'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1

самый простой вариант

var secs, now, timer,
    mins = 0


function time(){
  secs = Math.floor((Date.now() - now)/1000)
  if(secs == 60 ){
    now = Date.now()
    mins++
  }
  if(secs < 10){
    secs = '0' + secs
  }
  timerid.innerHTML = mins + ':' + secs
}

start.onclick = function(){
  now = Date.now()
  mins = 0
  timer = setInterval(time)
}
<button id="start">старт/сбросить</button>
<span id="timerid">0:00</span>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.