1.11M Members

timer

 
0
 

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

 
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/

 
0
 

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

 
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>
 
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?

 
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.

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

Dont you have another way of writing this line?

 
0
 

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

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