Part 3 of BOM series: timer application (clock, countdown, stopwatch, and alarm), Part 3 of bom

Part 3 of BOM series: timer application (clock, countdown, stopwatch, and alarm), Part 3 of bom

Clock

The simplest way to create a clock is to extract the time part of the time object string using the exec () method of the regular expression. 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

The simple countdown is to use setInterval to subtract 1 from the set time every 1 s.

<Div id = "myDiv"> <label for = "set"> <input type = "number" id = "set" step = "1" value = "0"> seconds </label> <button id = "btn"> OK </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

Based on the timer running mechanism, we know that the method of changing the time interval by MS is not reliable. More accurately, it should be used as a reference with the system running time. The countdown time changes are synchronized with the system's time changes to achieve the precise countdown effect.

[Note] In this section, the modulo and Division operations are required for minute and second calculation. For details, see this step.

<Div id = "myDiv"> <label for = "hour"> <input type = "number" id = "hour" min = "0" max = "23" step = "1" value = "0"/> </label> <label for = "minute"> <input type = "number" id = "minute" min = "0" max = "59" step = "1" value = "0"/> Points </label> <label for = "second"> <input type = "number" id =" second "min =" 0 "max =" 23 "step =" 1 "value =" 0 "/> seconds </label> <button id =" btn "> OK </ button> <button id = "reset"> reset </button> </div> <script> var timer; // input limit h Our. onchange = function () {if (Number (this. value )! = Number (this. value) this. value = 0; if (this. value> 23) this. 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. value> 59) this. value = 59; if (this. value <0) this. value = 0;} reset. onclick = function () {history. go ();} btn. onclick = function () {if (timer) return; for (var I = 0; I <3; I ++) {myDiv. getElementsByTagName ('input') [I]. setAttribute ('Disabled ', 'Disabled');} // original storage value var setOri = hour. value * 3600 + minute. value * 60 + second. value * 1; // the original system time value var timeOri = (new Date ()). getTime (); // The current remaining time value var setNow; cancelAnimationFrame (timer); timer = requestAnimationFrame (function fn () {// Current System Time Value var timeNow = (new Date ()). getTime (); // make the difference between the system time and the set time equal, to obtain 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 = 'timing termination'; for (var I = 0; I <3; I ++) {myDiv. getElementsByTagName ('input') [I]. removeAttribute ('Disabled ');} setTimeout (function () {btn. innerHTML = 'true';}, 1000) }}</script>

Stopwatch

[1] Simple stopwatch

The stopwatch has the same idea as the countdown, Which is simpler than the countdown. Increase by Ms every 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 = 'paused '; timer = setInterval (function () {num + = 100; 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, the timer interval is inaccurate as a reference for time changes. The more accurate method should be to use the system time change as the reference for the stopwatch change.

<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'; // ori indicates the initial system time var ori; // dis indicates the number of seconds (dynamic) var dis = 0; // The number of seconds (static) when the last storage is paused var last = 0; reset. onclick = function () {history. go ();} btn. onclick = function () {if (con = 'off') {set. setAttribute ('Disabled ', 'Disabled'); con = 'on'; btn. innerHTML = 'paused '; // retain the system time that has elapsed in seconds. ori = (new Date ()). getTime ()-last; timer = requestAnimationFrame (function fn () {dis = (new Date ()). getTime ()-ori; cancelAnimationFrame (timer); timer = requestAnimationFrame (fn); var minute = Math. floor (dis/1000/60); var second = Math. floor (dis/1000); varMS = Math. floor (dis % 1000); set. value = minute + ':' + second + '. '+ MS;});} else {cancelAnimationFrame (timer); btn. innerHTML = 'start'; con = 'off'; last = dis ;}}</script>

Alarm

The alarm is actually to add a scheduled time setting based on the clock. The alarm setting requires converting the set time to the number of milliseconds from January 1, January 1, 1970, and then calculating the difference with the current time. As the current time increases, when the difference is 0, the alarm goes off.

<Div id = "myDiv"> </div> <div id = "con"> <label for = "hour"> <input type = "number" id = "hour" min = "0" max = "23" step = "1" value = "0"/> </label> <label for = "minute"> <input type =" number "id =" minute "min =" 0 "max =" 59 "step =" 1 "value =" 0 "/> Points </label> <label for =" second "> <input type =" number "id =" second "min =" 0 "max =" 23 "step =" 1 "value =" 0 "/> seconds </label> <button id = "btn"> OK </button> <button id = "reset"> reset </button> </div> <div id = "show"> </div> <script> var timer; // The time remaining var dis; myDiv. innerHTML =/\ d: \ d /. exec (new Date (). toString () [0]; setInterval (function () {myDiv. innerHTML =/\ d: \ d /. exec (new Date (). toString () [0];}, 100); reset. onclick = function () {history. go ();} btn. onclick = function () {// original storage value var setOri = hour. value * 3600 + minute. value * 60 + second. value * 1; // The original value is converted to the number of milliseconds in January 1, 1970. var setMs = + new Date (). toDateString () + setOri * 1000; // if the set time is earlier than the current time, if (setMs <+ new Date () {return ;} for (var I = 0; I <3; I ++) {con. getElementsByTagName ('input') [I]. setAttribute ('Disabled ', 'Disabled');} cancelAnimationFrame (timer); timer = requestAnimationFrame (function fn () {// calculates the difference between the set time and the 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 = 'before the scheduled time, plus' + showHour + 'hour' + showMinute + 'minute' + showSecond + 'Second'. // when the difference is 0, time to if (dis = 0) {cancelAnimationFrame (timer); btn. innerHTML = 'time reached '; for (var I = 0; I <3; I ++) {con. getElementsByTagName ('input') [I]. removeAttribute ('Disabled ');} timer = setTimeout (function () {btn. innerHTML = 'true';}, 1000) }}) ;}</script>

Last

As a timer, the most troublesome thing is timer management. If the timer is enabled but not disabled, the timer overwrites the timer and runs faster and faster. Therefore, it is a good habit to disable and enable the timer first.

The above section describes the timer application (clock, countdown, stopwatch, and alarm) in the third part of BOM series, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!