BOM series The third timer application (clock, Countdown, stopwatch and alarm clock) _javascript tips

Clock

The simplest way to make a clock is by using the Exec () method of the regular expression to intercept the time part of the time object's string and use the timer to refresh it.

<div id= "mydiv" ></div>
<script>
mydiv.innerhtml =/\d\d:\d\d:\d\d/.exec (new Date (). ToString ()) [0];
SetInterval (function () {
mydiv.innerhtml =/\d\d:\d\d:\d\d/.exec (new Date (). toString ()) [0]; 
},500);
</script>

Countdown

"1" Simple Countdown

Simple countdown is every 1s through the setinterval will set time minus one to achieve the requirements

<div id= "mydiv" >
<label for= "set" ><input type= "number" id= "Set" step= "1" value= "0" > Sec </label >
<button id= "btn" > Confirm </button>
<button id= "reset" > Reset </button> 
</div >
<script>
var timer;
Reset.onclick = function () {
history.go ();
}
Btn.onclick = function () {
if (timer) return;
Set.setattribute (' disabled ', ' disabled ');
Timer = setinterval (function () {
if (number (set.value) = = 0) {
clearinterval (timer);
Timer = 0;
Set.removeattribute (' disabled ');
return;
}
Set.value = number (Set.value)-1;
},1000); 
</script>

"2" Precise countdown

By the running mechanism of the timer, we know that it is not reliable to change the time every 1000ms interval. More precisely, it should be with the operating time of the system as a reference, the countdown time change and the system time change synchronization, to achieve a precise countdown effect

[note] In this section, you need to calculate the time, minute, and second by modulo and division.

<div id= "mydiv" > <label for= "Hour" ><input type= "number" id= "Hour" min= "0" max= "" step= "1" value= "0"/&G t; time </label> <label for= "minute" ><input type= "number" id= "minute" min= "0" max= "" "step=" 1 "value=" 0 "/ > </label> <label for= "second" ><input type= "number" id= "second" min= "0" max= "" step= "1" value= "0"/ > sec </label> <button id= "btn" > OK </button> <button id= "reset" > Reset </button> </div
> <script> var timer; Input restriction hour.onchange = function () {if (number (This.value)!== number (this.value) this.value = 0; if (this.value >) th
Is.value = 23;
if (This.value < 0) This.value = 0; } second.onchange = Minute.onchange = function () {if (number (This.value)!== number (this.value)) this.value = 0; if (This.va
Lue >) this.value = 59;
if (This.value < 0) This.value = 0; } Reset.onclick = function () {history.go ();} Btn.onclick = function () {if (timer) return; (var i = 0; i < 3; i++) {m Ydiv.getelemeNtsbytagname (' input ') [I].setattribute (' disabled ', ' disabled ');
}///original stored value var Setori = hour.value*3600 + minute.value*60 + second.value*1;
Original system time value var Timeori = (new Date ()). GetTime ();
Now the remaining time value Var Setnow;
Cancelanimationframe (timer); Timer = Requestanimationframe (function fn () {//current system time value var TimeNow = (new Date ()). GetTime (); The difference between the system time is equal to the difference of setting time,
To get the normal time change setnow = Setori-math.floor ((Timenow-timeori)/1000);
Hour.value = Math.floor ((setnow%86400)/3600);
Minute.value = Math.floor ((setnow%3600)/60);
Second.value = Math.floor (setnow%60);
Timer = Requestanimationframe (FN); if (setnow==0) {cancelanimationframe (timer); timer = 0; btn.innerhtml = ' timed end '; for (var i = 0; i < 3; i++) {Mydiv.getele
Mentsbytagname (' input ') [I].removeattribute (' disabled '); } settimeout (function () {btn.innerhtml = ' OK ';},1000)}}} </script>

Stopwatch

"1" Simple stopwatch

Stopwatch and countdown to the same idea, compared to, more simple. 100ms increase 100ms per interval

<div id= "mydiv" >
<label for= "set" ><input id= "set" value= "0" ></label>
<button id= "BTN" > Start </button>
<button id= "reset" > Reset </button> 
</div> <script>
var timer;
var con = ' off ';
var num = 0;
Reset.onclick = function () {
history.go ();
}
Btn.onclick = function () {
if (con = = ' off ') {
set.setattribute (' disabled ', ' disabled ')
; con = ' on ';
btn.innerhtml = ' pause ';
Timer = setinterval (function () {
num+=;
var minute = Math.floor (NUM/1000/60);
var second = Math.floor (num/1000);
var ms = Math.floor (num%1000)/100;
Set.value = minute + ': ' + second + '. ' + ms; 
},100;
} else{
clearinterval (timer);
con = ' off ';
btn.innerhtml = ' start '; 
} 
</script>

"2" precise stopwatch

Similar to the countdown, it is inaccurate to use the timer's time interval as a reference for time changes. A more precise approach should be to use the system's time changes as a reference to the change of the stopwatch

 <div id= "mydiv" > <label for= "Set" ><input "set" id= "0" value= label> <button id= "btn" > Start </button> <button id= "reset" > Reset </button> </div> <
script> var timer;
var con = ' off ';
The Ori represent the initial system time of the Var Ori;
DIS represents the number of seconds (dynamic) of the current runtime var dis = 0;
Last store paused seconds (static) var last = 0; Reset.onclick = function () {history.go ();} Btn.onclick = function () {if (con = = ' off ') {set.setattribute (' disabled ', ' dis
Abled ');
con = ' on ';
btn.innerhtml = ' pause '; 
The system time that retains the number of seconds passed by the Ori = (new Date ()). GetTime ()-Last; Timer = Requestanimationframe (function fn () {dis = (new Date ()). GetTime ()-Ori; cancelanimationframe (timer); timer = requ
Estanimationframe (FN);
var minute = Math.floor (DIS/1000/60);
var second = Math.floor (dis/1000);
var ms = Math.floor (dis%1000); Set.value = minute + ': ' + second + '. 
' + MS;
}); 
}else{cancelanimationframe (timer); btn.innerhtml = ' Start ';
con = ' off ';
last = dis; } {</script> 

Alarm clock

The alarm clock is actually based on the clock to add a predetermined time setting, the alarm set will need to set the time to convert to the number of milliseconds from January 1, 1970, and then calculate the difference with the current time. As the current time increases, the value of the errand is 0 o'clock, and the alarm clock rings

<div id= "mydiv" ></div> <div id= "Con" > <label for= "Hour" ><input type= "number" id= "Hour" min= "0" max= "step=" "1" value= "0"/> Time </label> <label for= "minute" ><input type= "number" id= "Minute" min= "0" max= "step=" "1" value= "0"/> cent </label> <label for= "second" ><input type= "number" id= "second" min= "0" max= "step=" "1" value= "0"/> sec </label> <button id= "btn" > OK </button> <button id= "Reset"
> Reset </button> </div> <div id= "show" ></div> <script> var timer;
The remaining time Var dis;
mydiv.innerhtml =/\d\d:\d\d:\d\d/.exec (new Date (). toString ()) [0]; 
SetInterval (function () {mydiv.innerhtml =/\d\d:\d\d:\d\d/.exec (new Date (). toString ()) [0];
},100); Reset.onclick = function () {history.go ();} Btn.onclick = function () {//original stored value var Setori = hour.value*3600 + minute.value*
+ second.value*1;
The original value is converted to a number of milliseconds of 1970 years var Setms = +new Date (new Date (). toDateString ()) + setori*1000; If the time set is earlier than the current time, the setting is invalid if (Setms < +new Date ()) {return.} for (var i = 0; i < 3; i++) {con.getelementsbytagname (' input ') [I].setattribute (' Disab
Led ', ' disabled ');
} cancelanimationframe (timer);  Timer = Requestanimationframe (function fn () {//Calculate the difference between set time and current time dis = Math.ceil (Setms-(New Date ()). GetTime ())/1000); var
Showhour = Math.floor ((dis%86400)/3600);
var showminute = Math.floor ((dis%3600)/60);
var showsecond = Math.floor (dis%60);
Timer = Requestanimationframe (FN);
show.innerhtml = ' Distance scheduled time also ' + Showhour + ' hour ' + showminute + ' min ' + showsecond + ' sec '; The errand value is 0 o'clock, time to if (dis==0) {cancelanimationframe (timer); btn.innerhtml = ' time to '; for (var i = 0; i < 3; i++) {Con.getelemen
Tsbytagname (' input ') [I].removeattribute (' disabled ');
Timer = settimeout (function () {btn.innerhtml = ' OK ';},1000)}});  } </script>

At last

As a timer, the most troublesome place is the timer management. If the timer is only turned on and not closed, it will result in the timer stacking effect, making the operation more and more fast. So it's a good habit to turn off the timer first.

The above is a small set up to introduce the BOM series of the third timer application (clock, Countdown, stopwatch and alarm clock), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!