Member Avatar for techyworld

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

  • 5 Contributors
  • 8 Replies
  • 104 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by techyworld

Recommended Answers

All 8 Replies

Member Avatar for AleMonteiro

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 for JorgeM

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

Member Avatar for Taywin

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>
Edited by Taywin
Member Avatar for techyworld

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

Edited by pritaeas because: Added code tags.
Member Avatar for Taywin

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 for techyworld 
var milli = parseInt(milliSec.value, 10)*10;

Dont you have another way of writing this line?

Edited by pritaeas because: Added code tags.
Member Avatar for techyworld

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.