It is necessary to make a timer (not the reverse, but the usual) counting the time of minutes and seconds. For example, you click on the button, the calculation of the time of minutes and seconds starts. Click on another button, reset to 0;

Is there any library for this business, or an example of the implementation of such a timer?

  • one
    StackOverflow is not a resource where a solution will be written to you. Show what you have already done, and participants will help you to understand why this is not working. The code of such a timer can be laid in less than 10 lines, so it is unlikely that some libraries are needed here. Start learning with the setInverval() function - teran
  • Oh, I had this somewhere. I'll send it to you right now. - Dimava

3 answers 3

 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>

  • setInterval does not guarantee that the function will be called in exactly 100 ms. - Arnial
  • @Arnial agree (except for IE). you can try recursive setTimeout (), there is a clear control of the delay ... - C.Raf.T
  • I mean, the script can not be called after 100ms, but after 200 or 300. For example, because of gc, repatin / reflow or another long js function. It is better to add to the milisec time difference between the previous and the current call, rather than always increasing by 1. - Arnial
  • @Arnial and I can not disagree. But my example is absolutely primitive and created only as one of the possible options. - C.Raf.T

Written on 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>

    the easiest option

     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>