Die dritte Timer -Anwendung der BOM -Serie (Uhr, Countdown, Stoppuhr und Wecker)

Uhr

Der einfachste Weg, eine Uhr zu erstellen, besteht darin, die EXEC () -Methode des regulären Ausdrucks zu verwenden, um den Zeitteil der Zeichenfolge des Zeitobjekts abzufangen und ihn mit einem Timer zu aktualisieren.

 <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];

Countdown

【1】 Einfacher Countdown

Einfacher Countdown besteht darin, die festgelegte Zeit zu subtrahieren, indem Intervall alle 1 s so einstellen, dass die Anforderungen erfüllt werden

 <div id = "mydiv"> <label for = "set"> <Eingabe type = "number" id = "set" step = "1" value = "0"> Sekunden </label> <button id = "btn"> bestätigen </button> <button id = "reset"> reset </button function () {if (timer) return; set.setAttribute ('deaktiviert', 'deaktiviert'); Timer = setInterval (function () {if (number (set.Value) === 0) {ClearInterval (Timer); Timer = 0; set.removeatTribute ('deaktiviert'); 1;}, 1000);} </script>

【2】 Genauiger Countdown

Basierend auf dem Betriebsmechanismus des Timers wissen wir, dass die Änderung der Zeit alle 1000 ms nicht zuverlässig ist. Genauer gesagt sollte es verwendet werden, um auf die Laufzeit des Systems zu verweisen, und die zeitlichen Änderungen des Countdowns werden mit den zeitlichen Änderungen des Systems synchronisiert, um den Effekt eines genauen Countdowns zu erreichen.

[Hinweis] In diesem Teil müssen Sie Zeit, Minute und Sekunde durch Modul- und Divisionsvorgänge berechnen. Die Details werden hier verschoben.

 <div id = "mydiv"> <label für = "stündlich"> <Eingabe type = "number" id = "stunde" min = "0" max = "23" step = "1" value = "0" /> Zeit < /label> <label für = "minute"> <Eingabe type = "numme" id "miny" min = "0" max = "59". type = "number" id = "Second" min = "0" max = "23" step = "1" value = "0"/> Sekunde </label> <button id = "btn"> bestätigen </button> <button id = "reset"> reset </button> </div> <Script> var Timer; // Eingabegrenze stündlich. this.value = 0; if (this.Value> 23) this.value = 23; if (this.Value <0) this.value = 0;} Second.onchange = minute.onchange = function () {if (numme (this. value)! 59; if (this.Value <0) this.Value = 0;} Reset.onclick = function () {history.go ();} btn.onclick = function () {if (timer) return; für (var i = 0; i <3; i ++) {mydiv.getElementsByTagName ('input') [i] .setAttribute ('deaktiviert', 'deaktiviert');} // Raw Value Var setori = stündlich. setNow; cancelAnimationFrame (Timer); Timer = RequestAnimationFrame (Funktion fn () {// Der aktuelle Systemzeitwert var timenow = (neues Datum ()). Math.floor ((setNow%86400)/3600); minute.value = math.floor ((setNow%3600)/60); Second. end '; für (var i = 0; i <3; i ++) {mydiv.getElementsByTagName (' Eingabe ') [i] .RemoveAttribute (' deaktiviert ');} setTimeout (function (function (function (function (function (function

Stoppuhr

【1】 Einfache Stoppuhr

Stoppwatch hat die gleiche Idee wie Countdown und ist im Vergleich einfacher. Fügen Sie 100 ms pro Intervall hinzu

 <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 = '; function () {if (con === 'off') {set.setAttribute ('deaktiviert', 'deaktiviert'); con = 'on'; Math.floor (num%1000) /100; }} </script>

【2】 Genauige Stoppuhr

Ähnlich wie beim Countdown ist es ungenau, das Zeitintervall des Timers als Referenz für Zeitvariationen zu verwenden. Ein genauerer Ansatz sollte darin bestehen, die Zeitänderungen des Systems als Referenz für Änderungen in der Stoppuhr zu verwenden.

 <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 = '; //. = 0; // letztes speichert die Anzahl der Sekunden in der Pause (static) var last = 0; reset.onclick = function () {history.go ();} btn.onclick = function () {if (con === 'OFF') {set.setattribute ('Behinderte', deaktiviert '; Zeit der Anzahl der Sekunden, die Ori = (neues Datum ()). GetTime () - Last; Timer = RequestAnimationFrame (Funktion fn () {dis = (new Date ()). . ' + ms; con = 'off'; last = dis;}} </script>

Wecker

Der Wecker fügt der Uhr tatsächlich eine vorgegebene Zeiteinstellung hinzu. Die Einstellung der Wecker muss ab dem 1. Januar 1970 in die Anzahl der Millisekunden in die Anzahl der Millisekunden umgewandelt werden, und dann wird die Differenz zur aktuellen Zeit berechnet. Wenn die aktuelle Zeit weiter zunimmt, klingelt der Wecker, wenn der Unterschied 0 ist

 <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"> <Eingabe type = "number" id = "zweite" min = "0" max = "23" step = "1" value = "0"/> Second </label> <button id = "btn"> bestätigen </button> <button id = "reset"> reset </button </div> </diviver id = "ca. id ="> </dv> </DV> </DV> </dv> </DV> </dv> </dv> </DV> </dv> </dv> </dv> </div. -tim> </div. -tim> </diving tim> </diving tim. dis; mydiv.innerhtml = //d/d/d:/d/d:/d/d/d/.exec(new Date (). ToString () [0]; setInterval (function () {mydiv.innerhtml = //d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/d/. }, 100); reset.onclick = function () {history.go ();} btn.onclick = function () {// Der ursprüngliche gespeicherte Wert var setori = stündlich. setori*1000; // Wenn die festgelegte Zeit früher als die aktuelle Zeit ist, ist die Einstellung ungültig, wenn (setMS <+new Date ()) {return;} für (var i = 0; i <3; i ++) {con.getElementsByTagname ('Eingabe') [i] .SetatTribute ('Deaktiviert', 'disabled';} canceranimationFrame (Timer); fn () {// Rahmen den Unterschied zwischen der festgelegten Zeit und der aktuellen Zeit dis = math.ceil ((setms - (neu). RequestAnimationFrame (fn); show.innerhtml = 'Es gibt immer noch einen Abstand von der geplanten Zeit' + Showhour + 'Hour' + ShowMinute + 'minus' + showecond + 'Sekunden'; // Wenn der Unterschied 0 ist, ist die Zeit erreicht, wenn (dis == 0) {AbstandanimationFrame (Timer); <3;

endlich

Als Timer ist das mühsamste Timer -Management. Wenn der Timer nur eingeschaltet, aber nicht ausgeschaltet ist, wird der Timer -Überlagerungseffekt verursacht, wodurch die Operation immer schneller und schneller wird. Es ist also eine gute Angewohnheit, den Timer auszuschalten und dann zu aktivieren.

Die oben genannte Timer -Anwendung (Uhr, Countdown, Stoppuhr und Wecker), die Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!