How to create a JQuery Clock Timer

Question

I have a simple quiz application and I want display a nice timer   clock at the top of the page which shows the user how long they ve been going for   If I could somehow show them a timer for Total Quiz Time and also a second one for This Question Time that would be even cooler but I should be able to figure out how to do myself that once I ve got one timer working   My question is   What s a nice  easy way to show a simple timer   clock using JQuery   straight JS is also ok  I know how to check time  but how do I get incrementing seconds   My own searches keep leading me to JQuery plugins  I want to roll my own  and also  event timers  which are not what I m looking for

User · Answer

setInterval as suggested by SLaks was exactly what I needed to make my timer. (Thanks mate!)

Using setInterval and this great blog post I ended up creating the following function to display a timer inside my "box_header" div. I hope this helps anyone else with similar requirements!

 function get_elapsed_time_string(total_seconds) {
  function pretty_time_string(num) {
    return ( num < 10 ? "0" : "" ) + num;
  }

  var hours = Math.floor(total_seconds / 3600);
  total_seconds = total_seconds % 3600;

  var minutes = Math.floor(total_seconds / 60);
  total_seconds = total_seconds % 60;

  var seconds = Math.floor(total_seconds);

  // Pad the minutes and seconds with leading zeros, if required
  hours = pretty_time_string(hours);
  minutes = pretty_time_string(minutes);
  seconds = pretty_time_string(seconds);

  // Compose the string for display
  var currentTimeString = hours + ":" + minutes + ":" + seconds;

  return currentTimeString;
}

var elapsed_seconds = 0;
setInterval(function() {
  elapsed_seconds = elapsed_seconds + 1;
  $('#box_header').text(get_elapsed_time_string(elapsed_seconds));
}, 1000);

User · Answer

You re looking for the setInterval function  which runs a function every x milliseconds   For example   var start   new Date   setInterval function             Timer   text  new Date - start    1000     Seconds       1000

User · Answer

A 24 hour clock   setInterval function             var currentTime   new Date            var hours   currentTime getHours            var minutes   currentTime getMinutes            var seconds   currentTime getSeconds                Add leading zeros         minutes    minutes  lt  10    0          minutes          seconds    seconds  lt  10    0          seconds          hours    hours  lt  10    0          hours              Compose the string for display         var currentTimeString   hours         minutes         seconds              clock   html currentTimeString      1000      x000D   x000D     24 hour clock   x000D  setInterval function     x000D   x000D    var currentTime   new Date    x000D    var hours   currentTime getHours    x000D    var minutes   currentTime getMinutes    x000D    var seconds   currentTime getSeconds    x000D   x000D       Add leading zeros x000D    hours    hours  lt  10    0          hours  x000D    minutes    minutes  lt  10    0          minutes  x000D    seconds    seconds  lt  10    0          seconds  x000D   x000D       Compose the string for display x000D    var currentTimeString   hours         minutes         seconds  x000D        clock   html currentTimeString   x000D   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 div class  clock  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Just used the  Uday answer code and build a reverse clock of hr mm Was just playing  so thought if anyone would might need this  so sharing the fiddle in comments  Dnt know why stackover flow is not allowing me to paste the link here

User · Answer

JQuery  use API                          document  ready function             function getdate                    var today   new Date                var h   today getHours                var m   today getMinutes                var s   today getSeconds                 if s lt 10                    s    0  s                              if  m  lt  10                    m    0    m                               h1   text h       m       s                setTimeout function   getdate     500                             button   click getdate                               HTML                      lt button gt start clock lt  button gt   lt h1 gt  lt  h1 gt

User · Answer

var timeInterval   5      var blinkTime   1      var open signal    signal1       var total signal   1         document  ready function              for  var i   1  i  lt   total signal  i                  var timer    i    1    timeInterval    timeInterval    i - 1                 var str html     lt div id  signal    i      gt                                  lt span class  float left  gt Signal     i        lt  span gt                                  lt div class  red float left  gt  lt  div gt                                  lt div class  yellow float left  gt  lt  div gt                                  lt div class  green float left  gt  lt  div gt                                  lt div class  timer float left  gt     timer     lt  div gt                                  lt div style  clear  both   gt  lt  div gt                                  lt  div gt  lt div class  div separate  gt  lt  div gt                     div demo   append str html                          div demo  green   eq 0  css  background-color    green                div demo  red   css  background-color    red                div demo  red   eq 0  css  background-color    white             setInterval function                  manageSignals               1000                function manageSignals             var obj timer                var temp i   parseInt open signal substr 6            if          open signal      timer   html       0               open signal    temp i    total signal     signal1     signal     temp i   1            for  var i   1  i  lt   total signal  i                  var next signal    i    total signal     signal1     signal     i   1                obj timer  signal    i    parseInt     signal    i      timer   html    - 1               if  obj timer  signal    i     -1  amp  amp  open signal    next signal  amp  amp  total signal  1                    obj timer  signal    i     timeInterval    total signal - 1   - 1                       signal    i      red   css  background-color    red                        signal    i      yellow   css  background-color    white                              else if  obj timer  signal    i     -1  amp  amp  open signal     signal    i                    obj timer  signal    i     timeInterval - 1                        signal    i      red   css  background-color    white                        signal    i      yellow   css  background-color    white                        signal    i      green   css  background-color    green                              else if  obj timer  signal    i     blinkTime  amp  amp  open signal     signal    i                        signal    i      yellow   css  background-color    yellow                        signal    i      green   css  background-color    white                                   signal    i      timer   html obj timer  signal    i                     lt  script gt

User · Answer

If you can use jQuery with Moment js  great library   this is the way   var crClockInit1   null  var crClockInterval   null  function crInitClock         crClockInit1   setInterval function             if  moment   format  SSS    lt   40                clearInterval crClockInit1               crStartClockNow                     30      function crStartClockNow         crClockInterval   setInterval function                 clock   html moment   format  D  MMMM YYYY H mm ss            1000       Start clock initialization with crInitClock    It s done this way to synchronize seconds  Without synchronization  you would start 1 second timer in half of second and it will be half second late after real time

User · Answer

var timeInterval   5      var blinkTime   1      var open signal    top left          document  ready function                  div top left  timer   html timeInterval               div top right  timer   html timeInterval               div bottom right  timer   html timeInterval   2               div bottom left  timer   html timeInterval   3                div top left  green   css  background-color    green                div top right  red   css  background-color    red                div bottom right  red   css  background-color    red                div bottom left  red   css  background-color    red             setInterval function                  manageSignals               1000                function manageSignals             var top left time   parseInt     div top left  timer   html    - 1          var top right time   parseInt     div top right  timer   html    - 1          var bottom left time   parseInt     div bottom left  timer   html    - 1          var bottom right time   parseInt     div bottom right  timer   html    - 1           if  top left time    -1  amp  amp  open signal     top left   open signal    top right           else if  top right time    -1  amp  amp  open signal     top right   open signal    bottom right           else if  bottom right time    -1  amp  amp  open signal     bottom right   open signal    bottom left           else if  bottom left time    -1  amp  amp  open signal     bottom left   open signal    top left            if  top left time    -1                if  open signal     top right                     top left time    timeInterval   3  - 1                      div top left  red   css  background-color    red                        div top left  yellow   css  background-color    white                        div top left  green   css  background-color    white                              else if  open signal     top left                     top left time   timeInterval - 1                      div top left  red   css  background-color    white                        div top left  yellow   css  background-color    white                        div top left  green   css  background-color    green                                     if  top right time    -1                if  open signal     bottom right                     top right time    timeInterval   3  - 1                      div top right  red   css  background-color    red                        div top right  yellow   css  background-color    white                        div top right  green   css  background-color    white                              else if  open signal     top right                     top right time   timeInterval - 1                      div top right  red   css  background-color    white                        div top right  yellow   css  background-color    white                        div top right  green   css  background-color    green                                     if  bottom right time    -1                if  open signal     bottom left                     bottom right time    timeInterval   3  - 1                      div bottom right  red   css  background-color    red                        div bottom right  yellow   css  background-color    white                        div bottom right  green   css  background-color    white                              else if  open signal     bottom right                     bottom right time   timeInterval - 1                      div bottom right  red   css  background-color    white                        div bottom right  yellow   css  background-color    white                        div bottom right  green   css  background-color    green                                     if  bottom left time    -1                if  open signal     top left                     bottom left time    timeInterval   3  - 1                      div bottom left  red   css  background-color    red                        div bottom left  yellow   css  background-color    white                        div bottom left  green   css  background-color    white                              else if  open signal     bottom left                     bottom left time   timeInterval - 1                      div bottom left  red   css  background-color    white                        div bottom left  yellow   css  background-color    white                        div bottom left  green   css  background-color    green                                     if  top left time    blinkTime  amp  amp  open signal     top left                     div top left  yellow   css  background-color    yellow                    div top left  green   css  background-color    white                      if  top right time    blinkTime  amp  amp  open signal     top right                     div top right  yellow   css  background-color    yellow                    div top right  green   css  background-color    white                      if  bottom left time    blinkTime  amp  amp  open signal     bottom left                     div bottom left  yellow   css  background-color    yellow                    div bottom left  green   css  background-color    white                      if  bottom right time    blinkTime  amp  amp  open signal     bottom right                     div bottom right  yellow   css  background-color    yellow                    div bottom right  green   css  background-color    white                           div top left  timer   html top left time               div top right  timer   html top right time               div bottom left  timer   html bottom left time               div bottom right  timer   html bottom right time

User · Answer

var eventdate   new Date  January 01  2014 00 00 00     function toSt n     s     if n lt 10  s   0   return s n toString       function countdown      cl document clock   d new Date     count Math floor  eventdate getTime  -d getTime    1000    if count lt  0      cl days value   ----       cl hours value  --       cl mins value  --       cl secs value  --       return       cl secs value toSt count 60    count Math floor count 60    cl mins value toSt count 60    count Math floor count 60    cl hours value toSt count 24    count Math floor count 24    cl days value count        setTimeout  countdown    500       Hello  I ve a similar assignment which involved creating a Javascript Countdown Clock  Here s the code I used  Plug the above code between the  lt  script language  Javascript    lt   script   tags  Keep in mind that just having this javascript won t do much if you don t have the html to display the clock  I ll leave writing the html to you  Design the clock however you wish

User · Answer

How about the best of both worlds  I combined the answer with the OP s format   function pretty time string num        return   num  lt  10    0           num       var start   new Date       setInterval function       var total seconds    new Date - start    1000        var hours   Math floor total seconds   3600     total seconds   total seconds   3600     var minutes   Math floor total seconds   60     total seconds   total seconds   60     var seconds   Math floor total seconds      hours   pretty time string hours     minutes   pretty time string minutes     seconds   pretty time string seconds      var currentTimeString   hours         minutes         seconds         timer   text currentTimeString      1000

User · Answer

Here s  SLaks answer  but in pure ES6 JavaScript    x000D   x000D  var start   new Date  x000D     timer   document querySelector   Timer    x000D   x000D  setInterval function timestamp    x000D       timer innerText      timestamp - start    1000  Seconds   x000D     1000   x000D   x000D   x000D

[javascript] How to create a JQuery Clock / Timer

Examples related to javascript

Examples related to jquery

Examples related to timer

Examples related to clock