plain count up timer in javascript

Question

I am looking for a simple count up timer in javascript  All the scripts I find are  all singing all dancing    I just want a jQuery free  minimal fuss count up timer that displays in minutes and seconds   Thanks

User · Answer

The following code works as a count-up timer. It's pure JavaScript code which shows hour:minute:second. It also has a STOP button:

_x000D_

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);
           if(hour < 10)
             hour = "0"+hour;
           if(minute < 10)
             minute = "0"+minute;
           if(seconds < 10)
             seconds = "0"+seconds;
           document.getElementById("timer").innerHTML = hour + ":" + minute + ":" + seconds;
        }

_x000D_

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

_x000D_

User · Answer

Just wanted to put my 2 cents in  I modified  Ajay Singh s function to handle countdown and count up Here is a snip from the jsfiddle    var countDown   Math floor Date now     1000  runClock null  function e  r   console log  e seconds      countDown   var t   setInterval function      runClock function        console log  done        clearInterval t       function timeElapsed  timeRemaining       console log  timeElapsed seconds         countDown      100     https   jsfiddle net 3g5xvaxe

User · Answer

I had to create a timer for teachers grading students  work  Here s one I used which is entirely based on elapsed time since the grading begun by storing the system time at the point that the page is loaded  and then comparing it every half second to the system time at that point   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  lt  10   i    0    i       add zero in front of numbers  lt  10     return i     startTimeCounter      This way  it really doesn t matter if the  setTimeout  is subject to execution delays  the elapsed time is always relative the system time when it first began  and the system time at the time of update

User · Answer

Timer for jQuery - smaller  working  tested    x000D   x000D      var sec   0  x000D      function pad   val     return val  gt  9   val    0    val    x000D      setInterval  function    x000D              seconds   html pad   sec 60    x000D              minutes   html pad parseInt sec 60 10     x000D         1000   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt span id  minutes  gt  lt  span gt   lt span id  seconds  gt  lt  span gt  x000D   x000D   x000D    Pure JavaScript    x000D   x000D      var sec   0  x000D      function pad   val     return val  gt  9   val    0    val    x000D      setInterval  function    x000D          document getElementById  seconds   innerHTML pad   sec 60   x000D          document getElementById  minutes   innerHTML pad parseInt sec 60 10    x000D         1000   x000D   lt span id  minutes  gt  lt  span gt   lt span id  seconds  gt  lt  span gt  x000D   x000D   x000D    Update   This answer shows how to pad   Stopping setInterval MDN is achieved with clearInterval MDN  var timer   setInterval   function         1000        clearInterval   timer      Fiddle

User · Answer

Check this    x000D   x000D  var minutesLabel   document getElementById  minutes    x000D  var secondsLabel   document getElementById  seconds    x000D  var totalSeconds   0  x000D  setInterval setTime  1000   x000D   x000D  function setTime     x000D      totalSeconds  x000D    secondsLabel innerHTML   pad totalSeconds   60   x000D    minutesLabel innerHTML   pad parseInt totalSeconds   60    x000D    x000D   x000D  function pad val    x000D    var valString   val       x000D    if  valString length  lt  2    x000D      return  0    valString  x000D      else   x000D      return valString  x000D      x000D    x000D   lt label id  minutes  gt 00 lt  label gt   lt label id  seconds  gt 00 lt  label gt  x000D   x000D   x000D

User · Answer

Check out these solutions   Compute elapsed time

User · Answer

Cybernate  I was looking for the same script today thanks for your input  However I changed it just a bit for jQuery     function clock           body   prepend   lt div id  clock  gt  lt label id  minutes  gt 00 lt  label gt   lt label id  seconds  gt 00 lt  label gt  lt  div gt              var totalSeconds   0          setInterval setTime  1000           function setTime                           totalSeconds                  clock  gt   seconds   html pad totalSeconds 60                    clock  gt   minutes   html pad parseInt totalSeconds 60                       function pad val                        var valString   val                   if valString length  lt  2                                return  0    valString                            else                               return valString                              document  ready function        clock              the css part    lt style gt   clock       padding  10px      position absolute      top  0px      right  0px      color  black     lt  style gt

User · Answer

Here is one using  padStart      lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt     lt meta charset  UTF-8    gt     lt title gt timer lt  title gt   lt  head gt   lt body gt     lt span id  minutes  gt 00 lt  span gt   lt span id  seconds  gt 00 lt  span gt      lt script gt      const minutes   document querySelector   minutes       const seconds   document querySelector   seconds       let count   0       const renderTimer        gt          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     lt  script gt   lt  body gt   lt  html gt    From MDN      The padStart   method pads the current string with another string  repeated  if needed  so that the resulting string reaches the given length  The padding is applied from the start  left  of the current string

User · Answer

Fiddled around with the Bakudan s code and other code in stackoverflow to get everything in one   Update  1   Added more options  Now Start  pause  resume  reset and restart  Mix the functions to get desired results   Update  2   Edited out previously used JQuery codes for pure JS and added as code snippet   For previous Jquery based fiddle version   https   jsfiddle net wizajay rro5pna3 305    x000D   x000D  var Clock     x000D    totalSeconds  0  x000D    start  function      x000D      if   this interval    x000D          var self   this  x000D          function pad val    return val  gt  9   val    0    val    x000D          this interval   setInterval function      x000D            self totalSeconds    1  x000D   x000D            document getElementById  min   innerHTML   pad Math floor self totalSeconds   60   60    x000D            document getElementById  sec   innerHTML   pad parseInt self totalSeconds   60    x000D             1000   x000D        x000D       x000D   x000D    reset  function      x000D      Clock totalSeconds   null   x000D      clearInterval this interval   x000D      document getElementById  min   innerHTML    00   x000D      document getElementById  sec   innerHTML    00   x000D      delete this interval  x000D       x000D    pause  function      x000D      clearInterval this interval   x000D      delete this interval  x000D       x000D   x000D    resume  function      x000D      this start    x000D       x000D   x000D    restart  function      x000D       this reset    x000D       Clock start    x000D      x000D     x000D   x000D   x000D  document getElementById  startButton   addEventListener  click   function      Clock start        x000D  document getElementById  pauseButton   addEventListener  click   function      Clock pause        x000D  document getElementById  resumeButton   addEventListener  click   function      Clock resume        x000D  document getElementById  resetButton   addEventListener  click   function      Clock reset        x000D  document getElementById  restartButton   addEventListener  click   function      Clock restart        x000D   lt span id  min  gt 00 lt  span gt   lt span id  sec  gt 00 lt  span gt  x000D   x000D   lt input id  startButton  type  button  value  Start  gt  x000D   lt input id  pauseButton  type  button  value  Pause  gt  x000D   lt input id  resumeButton  type  button  value  Resume  gt  x000D   lt input id  resetButton  type  button  value  Reset  gt  x000D   lt input id  restartButton  type  button  value  Restart  gt  x000D   x000D   x000D

User · Answer

Extending from  Chandu  with some UI added    lt html gt   lt head gt   lt script   src  https   code jquery com jquery-3 2 1 min js    integrity  sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4     crossorigin  anonymous  gt  lt  script gt   lt  head gt   lt style gt  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      lt  style gt   lt body align  center  gt   lt button onclick  set timer    class  button  gt START lt  button gt   lt button onclick  stop timer    class  button  gt STOP lt  button gt  lt br gt  lt br gt   lt label id  minutes  gt 00 lt  label gt  lt span class  bigger  gt   lt  span gt  lt label id  seconds  gt 00 lt  label gt   lt  body gt   lt  html gt   lt script gt   function pad val      valString   val         if valString length  lt  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        lt  script gt    Looks as follows

User · Answer

Here is an React  Native  version   import React    Component   from  react   import       View      Text    from  react-native    export default class CountUp extends Component         state             seconds  null             get formatedTime             const   seconds     this state           return               pad parseInt seconds   60                pad seconds   60             join                  componentWillMount             this setState   seconds  0                componentDidMount             this timer   setInterval                   gt  this setState                   seconds    this state seconds                             1000                       componentWillUnmount             clearInterval this timer              render             return                lt View gt                   lt Text gt  this formatedTime  lt  Text gt               lt  View gt                      function pad num        return num toString   length  gt  1   num    0  num

User · Answer

Note  Always include jQuery before writing jQuery scripts  Step1  setInterval function is called every 1000ms  1s   Stpe2  In that function  Increment the seconds  Step3  Check the Conditions   x000D   x000D   lt span id  count-up  gt 0 00 lt  span gt  x000D   lt script gt  x000D     var min      0  x000D        var second   00  x000D        var zeroPlaceholder   0  x000D        var counterId   setInterval function    x000D                          countUp    x000D                           1000   x000D   x000D        function countUp      x000D            second    x000D            if second    59   x000D              second   00  x000D              min   min   1  x000D              x000D            if second    10   x000D                zeroPlaceholder       x000D             else x000D            if second    00   x000D                zeroPlaceholder   0  x000D              x000D   x000D            document getElementById  count-up   innerText   min     zeroPlaceholder second  x000D          x000D   lt  script gt  x000D   x000D   x000D

[javascript] plain count up timer in javascript

Examples related to javascript