horloge
La façon la plus simple de créer une horloge consiste à utiliser la méthode exec () de l'expression régulière pour intercepter la partie temporelle de la chaîne de l'objet Time et la rafraîchir avec une minuterie.
<div id = "MyDiv"> </ div> <cript> mydiv.innerhtml = //d/d:/d/d:/d/d/.exec(New Date (). TOSTRING ()) [0]; setInterval (function () {mydiv.innerhtml = //d/d:/d/d:/d/d/d/d/.exc produits Date (). ToString ()) [0];}, 500); </cript>Compte à rebours
【1】 Compte à rebours simple
Le compte à rebours simple consiste à soustraire l'heure définie en définissant l'intervalle toutes les 1 s pour répondre aux exigences
<div id = "MyDiv"> <label for = "set"> <input type = "nombre" id = "set" Step = "1" value = "0"> seconds </ label> <Button id = "btn"> confirm </ Button> <Button id = "reset"> réinset </ button> </div> <prise> function () {if (timer) return; set.setAttribute ('Disabled', 'Disabled'); timer = setInterval (function () {if (nombre (set.value) === 0) {ClearInterval (THIMER); 1;}, 1000);} </ script>【2】 Compte à rebours précis
Sur la base du mécanisme de fonctionnement de la minuterie, nous savons que le changement de temps toutes les 1000 ms n'est pas fiable. Plus précisément, il doit être utilisé pour se référer au temps d'exécution du système, et les changements de temps dans le compte à rebours sont synchronisés avec les changements de temps du système pour réaliser l'effet du compte à rebours précis.
[Remarque] Dans cette partie, vous devez calculer les opérations de temps, de minute et de seconde à module et de division. Les détails sont déplacés ici.
<div id = "MyDiv"> <étiquette pour = "hour"> <input type = "nombre" id = "hour" min = "0" max = "23" step = "1" value = "0" /> Time </ Label> <label for = "Minute"> <input type = "nombre" id = "Minute" min = "0" max = "59" step = "1" value = "0" /> min </ labe> <label pour ">"> "value =" 0 "/> min </ label> <label pour Type = "Number" id = "second" min = "0" max = "23" Step = "1" value = "0" /> SECOND </ Label> <Button id = "btn"> Confirmer </ Button> <Button id = "réset"> réinitialiser </utton> </div> <cript> var timiner; // entrée limite hour. this.value = 0; if (this.value> 23) this.value = 23; if (this.value <0) this.value = 0;} second.onchange = minute.onchange = function () {if (nombre (this.value)! == numéro (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', 'Disable setNow; CanceLanimationFrame (timer); timer = requestanimationframe (fonction fn () {// la valeur de temps système actuelle var timew = (new Date ()). gettime (); // la différence de temps système est égale à la différence de temps défini pour obtenir des changements de temps normaux setNow = Setori - Math.floor ((timeNow-Timeori) / 1000); hour. 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 (timiner); timiner = 0; btn. end '; for (var i = 0; i <3; i ++) {myDiv.getElementsByTagName (' input ') [i] .reMoveAttribute (' Disabled ');} setTimeout (function () {btn.innerhtml =' ok ';}, 1000)}})} </cript>Chronomètre
【1】 Grouille d'arrêt simple
Le chronomètre a la même idée que le compte à rebours, et il est plus simple en comparaison. Ajouter 100 ms par intervalle
<div id = "myDiv"> <label for = "set"> <input id = "set" value = "0"> </ labe> <Button id = "btn"> Démarrer </futton> <Button id = "reset"> réinitialiser </futton> </div> <cript> var timer; var con = 'off'; var num = 0; réset.onclick = function () {history.go (); 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 + ':' + seconde + '. }} </ script>【2】 CHERNIFRE D'ÉTRANS
Semblable au compte à rebours, il est inexact d'utiliser l'intervalle de temps de la minuterie comme référence pour la variation temporelle. Une approche plus précise devrait être d'utiliser les changements de temps du système comme référence pour les modifications du chronomètre.
<div id = "MyDiv"> <étiquette pour = "set"> <input id = "set" value = "0"> </ labe> <Button id = "btn"> Démarrer </ bouton> <Button Id = "reset"> réinitialiser </futton> </div> <cript> var tireur = 0; // Last stocke le nombre de secondes à la pause (statique) var dernier = 0; reset.onclick = function () {history.go ();} btn.onclick = function () {if (con === 'off') {set.setAttribute ('Disabled', 'Disabled'); con = 'on'; btn.inner du nombre de secondes qui ont passé Ori = (new Date ()). GetTime () - Last; timer = requestanimationframe (fonction fn () {dis = (new Date ()). gettime () - ori; ansemberanimationframe (timer); timer = requestanimationframe (fn); var minute = math.floor (dis / 1000/60); var seconde = math.floor (dis / 1000); var ms = math.floor (dis% 1000); second + '. con = 'off'; dernier = dis;}} </cript>Réveil
Le réveil ajoute en fait un réglage de temps prédéterminé à l'horloge. Le réglage du réveil nécessite la conversion du temps défini en nombre de millisecondes à partir du 1er janvier 1970, puis la différence avec l'heure actuelle est calculée. Alors que l'heure actuelle continue d'augmenter, lorsque la différence est de 0, le réveil sonne
<div id = "myDiv"> </ div> <div id = "con"> <étiquette pour = "hour"> <input type = "nombre" id = "hour" min = "0" max = "23" Step = "1" value = "0" /> Time </ label> <label for = "Minute"> <intry type = "nombre" id = "Minute" min = "0" max = "59" steple = "1" 0 "0" 0 "0" 0 "0" 0 "0" 0 "0" 0 "0" 0 " /> min </ label> <étiquette pour = "second"> <entrée type = "nombre" id = "second" min = "0" max = "23" Step = "1" value = "0" /> second </ Label> <Button id = "btn"> Confirmer </ Button> <Button id = "réset"> réset </stipter> </ dev> <div id = "show"> </ dv> <// Script Timber; 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 () {// la valeur stockée d'origine var setori = hour.value * 3600 + minute.value * 60 + second.value * 1; // La valeur d'origine est convertie au nombre de milliers de 1970 var setms = + nouveau (new Date (). + setori * 1000; // Si l'heure définie est antérieure à l'heure actuelle, le paramètre n'est pas valide if (setms <+ new Date ()) {return;} for (var i = 0; i <3; i ++) {Con.getElementsByTagName ('Entrée') [i] .SetAttribute) requestanimationframe (fonction fn () {// cadre la différence entre l'heure définie et l'heure actuelle dis = math.ceil ((setms - (new Date ()). GetTime ()) / 1000); var showhour = math.floor ((dis% 3600) / 60); Math.floor (dis% 60); timer = requestanimationframe (fn); show.innerhtml = 'il y a toujours une distance entre le temps planifié' + showhour + 'hour' + showMinute + 'moins' + showecond + 'seconds'; // lorsque la différence est 0, le temps est atteint si (dis == 0) {COMMERANIMIMATION 'Time Is Up'; for (var i = 0; i <3; i ++) {con.getElementsByTagName ('input') [i] .reMoveAtTribute ('Disabled');} timer = setTimeout (function () {btn.innerhtml = 'ok';}, 1000)}});} </ / script>enfin
En tant que minuterie, la chose la plus gênante est la gestion du temporisateur. Si la minuterie n'est activée que sur mais non désactivée, elle entraînera l'effet de superposition de la minuterie, ce qui rend le fonctionnement de plus en plus rapidement. Donc, c'est une bonne habitude de s'éteindre, puis d'activer la minuterie.
Ce qui précède est la troisième application Timer (horloge, compte à rebours, chronomètre et réveil) présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!