hi how can i implement a timer (minute-second-millisecond) using simple javascript? It will increment when click on a button.
techyworld 0 Junior Poster in Training
AleMonteiro 238 Can I pick my title?
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.
JorgeM 958 Problem Solver Team Colleague Featured Poster
Can you elaborate on what you mean by "It will increment when click on a button."?
Taywin 312 Posting Virtuoso
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()">
<input type="button" value="Reset" onclick="resetTimer()">
<br/>
</body>
</html>
code739 17 Posting Whiz in Training
techyworld 0 Junior Poster in Training
@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?
Taywin 312 Posting Virtuoso
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.
techyworld 0 Junior Poster in Training
var milli = parseInt(milliSec.value, 10)*10;
Dont you have another way of writing this line?
techyworld 0 Junior Poster in Training
@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.