Home > Developer > Web Develop
JavaScript compiled a timer, a javascript Timer
A timer is written in JavaScript.
Design Philosophy:
1. Use the Date () object to continuously obtain time points;
2. Subtract the milliseconds between the two time points to calculate the time difference;
3. accumulate the time difference so that the timing can be accurate.
Ps:
If this method is not found on the internet, it generally uses setinterval, the latency inherent in the programming language, and the time control has a relatively large error;
Therefore, the system time subtraction method is used to control accuracy. In this example, the accuracy is verified by three milliseconds. The setting is 100 milliseconds, and Js itself has an error;
This program can avoid inaccurate problems.
In this example, we exchange ideas and suggestions with each other, and hope to get the readers.
<! DOCTYPE html>
A timer implemented using javascript<Html>
<Body>
<Script language = "javascript">
Var timeout =-1;
Var timer;
Function cal (){
If (startButton. value = ""){
StartButton. value = "paused ";
Timer = setInterval ("timeout ++; textField. value = 'already passed:' + (timeout/600) + 'minute. ';", 100)
}
Else {
ClearInterval (timer );
StartButton. value = "start ";
}
}
Function reset (){
StartButton. value = "start ";
TextField. value = "";
If (timer! = Null ){
Timeout =-1;
ClearInterval (timer );
}
}
</Script>
<Input type = "text" size = 50 name = "textField">
<Input type = "submit" size = 10 name = "startButton" value = "start" onclick = "cal ();">
<Input type = "submit" size = 10 name = "resetButton" value = "reset" onclick = "reset ();">
</Body>
</Html>
Use javascript to write a running table Timer<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Meta content = "text/html; charset = gb2312" http-equiv = "content-type"/>
<Title> Untitled Page </title>
</Head>
<Body>
<Center>
<Input id = "showtime" type = "text" disabled = "disabled" value = "00: 00: 00: 000 "/> <br/> <input id =" pause "type =" button "value =" start "/> <input id =" reset "type =" button "value = "reset"/>
</Center>
</Body>
</Html>
<Script type = "text/javascript">
Var tag = false;
Var t;
Var thisdate = new Date ('0', '0', '0', '0', '0', '0 ');
Document. getElementById ("reset"). onclick = function (){
ClearTimeout (t );
Tag = false;
Document. getElementById ("pause"). value = "start ";
Document. getElementById ("showtime"). value = "00: 00: 00: 000 ";
... The remaining full text>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
