Can you elaborate on what you mean by "It will increment when click on a button."?
JorgeM
Industrious Poster
4,018 posts since Dec 2011
Reputation Points: 297
Solved Threads: 548
Skill Endorsements: 115
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>
Taywin
Posting Maven
2,633 posts since Apr 2010
Reputation Points: 275
Solved Threads: 375
Skill Endorsements: 17
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.
Taywin
Posting Maven
2,633 posts since Apr 2010
Reputation Points: 275
Solved Threads: 375
Skill Endorsements: 17
RSS Feed