1,105,585 Community Members

timer

Member Avatar
techyworld
Posting Whiz in Training
242 posts since Sep 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

hi how can i implement a timer (minute-second-millisecond) using simple javascript? It will increment when click on a button.

Member Avatar
AleMonteiro
Master Poster
758 posts since Aug 2010
Reputation Points: 115 [?]
Q&As Helped to Solve: 143 [?]
Skill Endorsements: 29 [?]
 
0
 

If you're planning to make various date/time calculations and does not have much experience with JS or does not want to code a lot, I suggest you use the DateJS lib. I've used in a couple of projects and it works very well.

http://www.datejs.com/

Member Avatar
JorgeM
IT Addict
6,414 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
0
 

Can you elaborate on what you mean by "It will increment when click on a button."?

Member Avatar
Taywin
Posting Maven
2,632 posts since Apr 2010
Reputation Points: 134 [?]
Q&As Helped to Solve: 378 [?]
Skill Endorsements: 17 [?]
 
0
 

You are talking about timer clock? Using JavaScript may not be that accurate but just OK. However, attempt to deal with millisecond in each iteration is very difficult to get it that accurate. Though, you may try something around 30 millisecond each iteration just to give it a feel of a timer.

A dirty version which is not that much accurate (and could be flickering) is below (read the time from the value display on the screen). A better version should read the current time from the local system, compare with the time it previously has, and display a correct value.

<html>
<head>
  <style type="text/css">
  input.numberDisplay {
    width: 20px;
    border: 0px solid transparent;
    padding: 0px;
    text-align: center;
    color: green;
    font-weight: bold;
  }
  </style>
  <script type="text/javascript">
  var running = false;  // make it global for easy stop with debugger
  function runTimer() {
    if (running) {
      running = false;
      document.getElementById("startButton").value = "Start"
    }
    else {
      running = true;  // set start
      document.getElementById("startButton").value = "Stop"
      ticking();       // tick the timer
    }
  }

  function ticking() {
    var milliEl = document.getElementById("milli");
    var milli = parseInt(milliEl.value, 10)*10;  // radix 10 because may have leading 0
    milli += 30;
    if (milli>=1000) { // time to increment second
      var secEl = document.getElementById("sec");
      var sec = parseInt(secEl.value, 10);
      sec += 1;
      if (sec>=60) {  // time to increment min
        var minEl = document.getElementById("min");
        var min = parseInt(minEl.value, 10);
        if (min>=60) { running = false; }  // stop at 60 minutes
        min += 1;
        minEl.value = min<10 ? ("0"+min) : min;
        sec -= 60;  // remove the carrier value
      }
      secEl.value = sec<10 ? ("0"+sec) : sec;
      milli -= 1000;  // remove the carrier value
    }
    milliEl.value = milli/10;

    // wait for 30 milliseconds and call the function again
    if (running) { window.setTimeout("ticking()", 30); }
  }  // ticking

  function resetTimer() {
    if (running) { runTimer(); }  // stop the timer first if is running
    document.getElementById("min").value = "00";
    document.getElementById("sec").value = "00";
    document.getElementById("milli").value = "00";
  }
  </script>
</head>

<body>
  <input id="min" type="text" class="numberDisplay" value="00" readonly> :
  <input id="sec" type="text" class="numberDisplay" value="00" readonly> :
  <input id="milli" type="text" class="numberDisplay" value="00" readonly>
  <br/>
  <input id="startButton" type="button" value="Start" onclick="runTimer()">
  &nbsp;&nbsp;
  <input type="button" value="Reset" onclick="resetTimer()">
  <br/>
</body>
</html>
Member Avatar
code739
Posting Whiz in Training
213 posts since May 2012
Reputation Points: 17 [?]
Q&As Helped to Solve: 30 [?]
Skill Endorsements: 6 [?]
 
0
 
Member Avatar
techyworld
Posting Whiz in Training
242 posts since Sep 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

@Taywin I cant understand these lines :

var milli = parseInt(milliEl.value, 10)*10;
milli += 30;

minEl.value = min<10 ? ("0"+min) : min;
sec -= 60; // remove the carrier value

Can you explain to me?

Member Avatar
Taywin
Posting Maven
2,632 posts since Apr 2010
Reputation Points: 134 [?]
Q&As Helped to Solve: 378 [?]
Skill Endorsements: 17 [?]
 
0
 

var milli = parseInt(milliEl.value, 10)*10;

Because the display of milli second is in 2 digits, it is actually the hundredth & tenth digit of millisecond. If it is to be display as a whole (0~999), this line would not be there because this one convert from 2 digits to 3 digits. :) Sorry for the confusion.

milli += 30;

This is because each time frame in setTimeout() is 30 milliseconds. So after 30 milliseconds, the function is being invoked again. It reads the millisecond so far from the page content, convert from 2 digits to 3 digits, and then increment the time waited which is 30 milliseconds.

minEl.value = min<10 ? ("0"+min) : min;

The minEl.value is calling for "value" property of input tag. If the value is less than 10, I am forcing it to display "0" in front of the value as well; otherwise, it can use the current value. This applies to both sec & milli.

sec -= 60; // remove the carrier value

When sec is greater than or equal to 60, it means that it goes around the clock (60 seconds). The line is inside the if-block when the sec is at that value. Once I increment minute value, sec value must be reset by removing the 60 seconds from it.

Hope this help.

Member Avatar
techyworld
Posting Whiz in Training
242 posts since Sep 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 
var milli = parseInt(milliSec.value, 10)*10;  

Dont you have another way of writing this line?

Member Avatar
techyworld
Posting Whiz in Training
242 posts since Sep 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

@taywin when I click on reset, the millisecond is reset to 3 instead of 0

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article