How to create a stopwatch using JavaScript

Question

if stopwatch  gt   track song  duration    track song  duration finds the duration of a soundcloud track   I am looking to create a stopwatch function that starts counting milliseconds when you click on the swap ID stopwatch so that when the function has been  clicked  for a certain amount of time the if function will do something  In my case replace an image  And also that the function will reset it itself when clicked again   so like stopwatch   current time - clicked time How can I set up the clicked time  current time   new Date   getTime      And is this in milliseconds       swap   click function

User · Answer

This is my simple take on this question  I hope it helps someone out oneday  somewhere     x000D   x000D  let output   document getElementById  stopwatch    let ms   0  let sec   0  let min   0   function timer         ms        if ms  gt   100           sec           ms   0           if sec     60           min           sec   0           if min     60           ms  sec  min   0               Doing some string interpolation     let milli   ms  lt  10    0   ms   ms      let seconds   sec  lt  10    0   sec   sec      let minute   min  lt  10    0    min   min       let timer     minute    seconds    milli        output innerHTML  timer       Start timer function start     time   setInterval timer 10       stop timer function stop        clearInterval time      reset timer function reset        ms   0      sec   0      min   0       output innerHTML    00 00 00    const startBtn   document getElementById  startBtn    const stopBtn    document getElementById  stopBtn    const resetBtn   document getElementById  resetBtn     startBtn addEventListener  click  start false   stopBtn addEventListener  click  stop false   resetBtn addEventListener  click  reset false   x000D       lt p class  stopwatch  id  stopwatch  gt           lt  -- stopwatch goes here -- gt       lt  p gt       lt button class  btn-start  id  startBtn  gt Start lt  button gt       lt button class  btn-stop  id  stopBtn  gt Stop lt  button gt       lt button class  btn-reset  id  resetBtn  gt Reset lt  button gt  x000D   x000D   x000D

User · Answer

Please see stopwatch js for a very clean and simple Vanilla Javascript ES6 solution

User · Answer

Solution by Mosh Hamedani  Creating a StopWatch function constructor   Define 4 local variables   startTime endTime isRunning duration set to 0   Next create 3 methods   start stop reset   start method   check if isRunning is true if so throw an error that start cannot be called twice  set isRunning to true assign the current Date object to startTime    stop method   check if isRunning is false if so throw an error that stop cannot be called twice  set isRunning to false assign the current Date object to endTime  calculate the seconds by endTime and startTime Date object increment duration with seconds   reset method    reset all the local variables    Read-only property  if you want to access the duration local variable you need to define a property using Object defineProperty  It s useful when you want to create a read-only property   Object defineProperty takes 3 parameters   the object which to define a property  in this case the current object  this   the name of the property the value of the key property  We want to create a Read-only property so we pass an object as a value  The object contain a get method that return the duration local variable  in this way we cannot change the property only get it    The trick is to use Date   object to calculate the time   Reference the code below  function StopWatch       let startTime      endTime      isRunning      duration   0     this start   function          if  isRunning  throw new Error  StopWatch has already been started          isRunning   true       startTime   new Date            this stop   function          if   isRunning  throw new Error  StopWatch has already been stop          isRunning   false       endTime   new Date         const seconds    endTime getTime   - startTime getTime      1000      duration    seconds          this reset   function          duration   0      startTime   null      endTime   null      isRunning   false          Object defineProperty this   duration         get  function            return duration                  const sw   new StopWatch

User · Answer

well after a few modification of the code provided by mace i ended up  building a stopwatch  https   codepen io truestbyheart pen EGELmv     lt  DOCTYPE html gt   lt html lang  en  gt     lt head gt       lt meta charset  UTF-8    gt       lt meta name  viewport  content  width device-width  initial-scale 1 0    gt       lt meta http-equiv  X-UA-Compatible  content  ie edge    gt       lt title gt Stopwatch lt  title gt       lt style gt       center        margin  30   30        font-family  tahoma              stopwatch            border 1px solid  000           background-color   eee           text-align  center           width 656px           height  230px           overflow  hidden               stopwatch span           display  block           font-size  100px               stopwatch p           display  inline-block           font-size  40px               stopwatch a         font-size 45px              a link       a visited           color   000           text-decoration  none           padding  12px 14px           border  1px solid  000              lt  style gt     lt  head gt     lt body gt         lt div id  center  gt               lt div class  timer stopwatch  gt  lt  div gt         lt  div gt        lt script gt        const Stopwatch   function elem  options            let timer   createTimer              startButton   createButton  start   start             stopButton   createButton  stop   stop             resetButton   createButton  reset   reset             offset            clock            interval            hrs   0            min   0              default options         options   options                options delay   options delay    1              append elements         elem appendChild timer           elem appendChild startButton           elem appendChild stopButton           elem appendChild resetButton               initialize         reset                private functions         function createTimer               return document createElement  span                       function createButton action  handler              if  action      reset                 let a   document createElement  a                a href         action              a innerHTML   action              a addEventListener  click   function event                  handler                  event preventDefault                                return a              else if  action      reset                 let a   document createElement  a                a href         action              a innerHTML   action              a addEventListener  click   function event                  clean                  event preventDefault                                return a                                 function start               if   interval                offset   Date now                interval   setInterval update  options delay                                  function stop               if  interval                clearInterval interval               interval   null                                 function reset               clock   0            render 0                      function clean               min   0            hrs   0            clock   0            render 0                      function update               clock    delta              render                       function render               if  Math floor clock   1000      60                min                reset                if  min     60                  min   0                hrs                                        timer innerHTML               hrs     lt p gt hrs lt  p gt     min     lt p gt min lt  p gt     Math floor clock   1000     lt p gt sec lt  p gt                       function delta               var now   Date now                d   now - offset             offset   now            return d                               Initiating the Stopwatch       var elems   document getElementsByClassName  timer           for  var i   0  len   elems length  i  lt  len  i              new Stopwatch elems i                 lt  script gt     lt  body gt   lt  html gt

User · Answer

A simple and easy clock for you and don t forget  me      x000D   x000D  var x  x000D  var startstop   0  x000D   x000D  function startStop        Toggle StartStop    x000D   x000D    startstop   startstop   1  x000D   x000D    if  startstop     1    x000D      start    x000D      document getElementById  start   innerHTML    Stop   x000D      else if  startstop     2    x000D      document getElementById  start   innerHTML    Start   x000D      startstop   0  x000D      stop    x000D      x000D   x000D    x000D   x000D   x000D  function start     x000D    x   setInterval timer  10   x000D       Start    x000D   x000D  function stop     x000D    clearInterval x   x000D       Stop    x000D   x000D  var milisec   0  x000D  var sec   0     holds incrementing value    x000D  var min   0  x000D  var hour   0  x000D   x000D     Contains and outputs returned value of  function checkTime    x000D   x000D  var miliSecOut   0  x000D  var secOut   0  x000D  var minOut   0  x000D  var hourOut   0  x000D   x000D     Output variable End    x000D   x000D   x000D  function timer     x000D       Main Timer    x000D   x000D   x000D    miliSecOut   checkTime milisec   x000D    secOut   checkTime sec   x000D    minOut   checkTime min   x000D    hourOut   checkTime hour   x000D   x000D    milisec     milisec  x000D   x000D    if  milisec     100    x000D      milisec   0  x000D      sec     sec  x000D      x000D   x000D    if  sec    60    x000D      min     min  x000D      sec   0  x000D      x000D   x000D    if  min    60    x000D      min   0  x000D      hour     hour  x000D   x000D      x000D   x000D   x000D    document getElementById  milisec   innerHTML   miliSecOut  x000D    document getElementById  sec   innerHTML   secOut  x000D    document getElementById  min   innerHTML   minOut  x000D    document getElementById  hour   innerHTML   hourOut  x000D   x000D    x000D   x000D   x000D     Adds 0 when value is  lt 10    x000D   x000D   x000D  function checkTime i    x000D    if  i  lt  10    x000D      i    0    i  x000D      x000D    return i  x000D    x000D   x000D  function reset     x000D   x000D   x000D      Reset   x000D   x000D    milisec   0  x000D    sec   0  x000D    min   0 x000D    hour   0  x000D   x000D    document getElementById  milisec   innerHTML    00   x000D    document getElementById  sec   innerHTML    00   x000D    document getElementById  min   innerHTML    00   x000D    document getElementById  hour   innerHTML    00   x000D   x000D    x000D   lt h1 gt  x000D     lt span id  hour  gt 00 lt  span gt    x000D     lt span id  min  gt 00 lt  span gt    x000D     lt span id  sec  gt 00 lt  span gt    x000D     lt span id  milisec  gt 00 lt  span gt  x000D   lt  h1 gt  x000D   x000D   lt button onclick  startStop    id  start  gt Start lt  button gt  x000D   lt button onclick  reset    gt Reset lt  button gt  x000D   x000D   x000D

User · Answer

Two native solutions  performance now -- gt  Call to     took 6 414999981643632 milliseconds  console time    -- gt  Call to     took 5 815 milliseconds   The difference between both is precision   For usage and explanation read on    Performance now  For microsecond precision use    x000D   x000D      var t0   performance now        doSomething        var t1   performance now         console log  Call to doSomething took      t1 - t0      milliseconds                      function doSomething               for i 0 i lt 1000000 i    var x   i i         x000D   x000D   x000D   performance now  Unlike other timing data available to JavaScript  for example Date now   the timestamps returned by Performance now   are not limited to one-millisecond resolution  Instead  they represent times as floating-point numbers with up to microsecond precision  Also unlike Date now    the values returned by Performance now   always increase at a constant rate  independent of the system clock  which might be adjusted manually or skewed by software like NTP   Otherwise  performance timing navigationStart   performance now   will be approximately equal to Date now       console time Example   timeEnd wrapped in setTimeout for simulation   x000D   x000D  console time  Search page      doSomething    console timeEnd  Search page        function doSomething               for i 0 i lt 1000000 i    var x   i i      x000D   x000D   x000D   You can change the Timer-Name for different operations

User · Answer

function StopWatch         let startTime  endTime  running  duration   0          this start        gt            if  running  console log  its already running           else               running   true             startTime   Date now                        this stop        gt            if   running  console log  its not running            else               running   false             endTime   Date now                const seconds    endTime - startTime    1000             duration    seconds                      this restart        gt            startTime   endTime   null         running   false         duration   0                Object defineProperty this   duration             get       gt  duration toFixed 2             const sw    new StopWatch    sw start   sw stop    sw duration

User · Answer

jsbin com demo  You ll see the demo code is just a start stop reset millisecond counter  If you want to do fanciful formatting on the time  that s completely up to you  This should be more than enough to get you started   This was a fun little project to work on  Here s how I d approach it  var Stopwatch   function elem  options       var timer         createTimer          startButton   createButton  start   start         stopButton    createButton  stop   stop         resetButton   createButton  reset   reset         offset        clock        interval        default options   options   options          options delay   options delay    1        append elements        elem appendChild timer     elem appendChild startButton     elem appendChild stopButton     elem appendChild resetButton         initialize   reset          private functions   function createTimer         return document createElement  span           function createButton action  handler        var a   document createElement  a        a href         action      a innerHTML   action      a addEventListener  click   function event          handler          event preventDefault                return a         function start         if   interval          offset     Date now          interval   setInterval update  options delay                function stop         if  interval          clearInterval interval         interval   null               function reset         clock   0      render           function update         clock    delta        render           function render         timer innerHTML   clock 1000          function delta         var now   Date now            d     now - offset       offset   now      return d            public API   this start    start    this stop     stop    this reset    reset       Get some basic HTML wrappers for it   lt  -- create 3 stopwatches -- gt   lt div class  stopwatch  gt  lt  div gt   lt div class  stopwatch  gt  lt  div gt   lt div class  stopwatch  gt  lt  div gt    Usage is dead simple from there   var elems   document getElementsByClassName  stopwatch     for  var i 0  len elems length  i lt len  i        new Stopwatch elems i        As a bonus  you get a programmable API for the timers as well  Here s a usage example  var elem   document getElementById  my-stopwatch    var timer   new Stopwatch elem   delay  10        start the timer timer start        stop the timer timer stop        reset the timer timer reset        jQuery plugin  As for the jQuery portion  once you have nice code composition as above  writing a jQuery plugin is easy mode   function         var Stopwatch   function elem  options           code from above              fn stopwatch   function options        return this each function idx  elem          new Stopwatch elem  options                   jQuery     jQuery plugin usage     all elements with class  stopwatch  default delay  1 ms      stopwatch   stopwatch        a specific element with id  my-stopwatch  custom delay  10 ms      my-stopwatch   stopwatch  delay  10

[javascript] How to create a stopwatch using JavaScript?

Examples related to javascript

Examples related to jquery