clock
The easiest way to create a clock is to use the exec() method of the regular expression to intercept the time part of the string of the time object and refresh it with a timer.
<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/d/.exec(new Date().toString())[0]; },500);</script>Countdown
【1】Simple countdown
Simple countdown is to subtract the set time by setting Interval every 1 s to meet the requirements
<div id="myDiv"><label for="set"><input type="number" id="set" step="1" value="0">seconds</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】Accurate countdown
Based on the operating mechanism of the timer, we know that changing time every 1000ms is not reliable. More precisely, it should be used to refer to the system's running time, and the time changes in the countdown are synchronized with the time changes of the system to achieve the effect of accurate countdown.
[Note] In this part, you need to calculate time, minute and second through modulus and division operations. The details are moved here.
<div id="myDiv"><label for="hour"><input type="number" id="hour" min="0" max="23" step="1" value="0" />time</label><label for="minute"><input type="number" id="minute" min="0" max="59" step="1" value="0" />min</label><label for="second"><input type="number" id="second" min="0" max="23" step="1" value="0" />second</label><button id="btn">Confirm</button><button id="reset">Reset</button></div><script>var timer;//Input limit hour.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');}//Raw stored value var setOri = hour.value*3600 + minute.value*60 + second.value*1;//Original system time value var timeOri = (new Date()).getTime();//The current remaining time value var setNow;cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){//The current system time value var timeNow = (new Date()).getTime();//The difference in system time is equal to the difference in set time to obtain normal time changes 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 = 'Time end';for(var i = 0; i < 3; i++){myDiv.getElementsByTagName('input')[i].removeAttribute('disabled');}setTimeout(function(){btn.innerHTML = 'OK';},1000) }})}</script>Stopwatch
【1】Simple stopwatch
Stopwatch has the same idea as countdown, and it is simpler in comparison. Add 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+= 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】Accurate stopwatch
Similar to countdown, it is inaccurate to use the time interval of the timer as a reference for time variation. A more precise approach should be to use the system's time changes as a reference for changes in the stopwatch.
<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 at the current runtime (dynamic) var dis = 0;//last stores the number of seconds at the pause (static) var last = 0;reset.onclick = function(){history.go();}btn.onclick = function(){if(con === 'off'){set.setAttribute('disabled','disabled');con = 'on';btn.innerHTML = 'pause';//Retain the system time of the number of seconds that have passed 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);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 adding a predetermined time setting to the clock. The alarm clock setting requires converting the set time into the number of milliseconds from January 1, 1970, and then the difference with the current time is calculated. As the current time continues to increase, when the difference is 0, the alarm clock rings
<div id="myDiv"></div><div id="con"><label for="hour"><input type="number" id="hour" min="0" max="23" step="1" value="0" />time</label><label for="minute"><input type="number" id="minute" min="0" max="59" step="1" value="0" />min</label><label for="second"><input type="number" id="second" min="0" max="23" step="1" value="0" />second</label><button id="btn">Confirm</button><button id="reset">Reset</button></dev><div id="show"></dv><script>var timer;//Remaining time var dis;myDiv.innerHTML = //d/d:/d/d:/d/d/d/.exec(new Date().toString())[0];setInterval(function(){myDiv.innerHTML = //d/d:/d/d:/d/d/d/.exec(new Date().toString())[0]; },100);reset.onclick = function(){history.go();}btn.onclick = function(){//The original stored value var setOri = hour.value*3600 + minute.value*60 + second.value*1;//The original value is converted to the number of milliseconds of 1970 var setMs = +new Date(new Date().toDateString()) + setOri*1000;//If the set time 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('disabled','disabled');}cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){//Frame 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 = 'There is still a distance from the scheduled time' + showHour + 'hour' + showMinute + 'minus' + showSecond + 'seconds';//When the difference is 0, time is reached if(dis==0){cancelAnimationFrame(timer);btn.innerHTML = 'Time is up';for(var i = 0; i < 3; i++){con.getElementsByTagName('input')[i].removeAttribute('disabled');}timer = setTimeout(function(){btn.innerHTML = 'ok';},1000) }});}</script>at last
As a timer, the most troublesome thing is timer management. If the timer is only turned on but not turned off, it will cause the timer superposition effect, making the operation faster and faster. So, it is a good habit to turn off and then enable the timer.
The above is the third timer application (clock, countdown, stopwatch and alarm clock) introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!