reloj
La forma más fácil de crear un reloj es usar el método Exec () de la expresión regular para interceptar la parte de tiempo de la cadena del objeto de tiempo y actualizarlo con un temporizador.
<div id = "mydiv"> </iv> <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(Execre Date (). ToString ()) [0];Cuenta atrás
【1】 Cuenta atrás simple
La cuenta regresiva simple es restar el tiempo establecido estableciendo el intervalo cada 1 s para cumplir con los requisitos
<div id = "myDiv"> <etiqueta for = "set"> <input type = "number" id = "set" step = "1" value = "0"> segundos </label> <button id = "btn"> confirmar </button> <button id = "rein function () {if (timer) return; set.SetAttribute ('discapacitado', 'discapacitado'); timer = setInterval (function () {if (number (set.value) === 0) {clearval (timer); timer = 0; set.removeattribute ('desactivado'); return;} set.value = number (set.value) - - - - - - - - - - - - - - - - 1;}, 1000);} </script>【2】 Countdown precisa
Según el mecanismo operativo del temporizador, sabemos que cambiar el tiempo cada 1000 ms no es confiable. Más precisamente, debe usarse para referirse al tiempo de ejecución del sistema, y los cambios de tiempo en la cuenta regresiva se sincronizan con los cambios de tiempo del sistema para lograr el efecto de una cuenta regresiva precisa.
[Nota] En esta parte, debe calcular el tiempo, el minuto y el segundo a través de las operaciones de módulo y división. Los detalles se mueven aquí.
<div id = "myDiv"> <etiqueta for = "hora"> <input type = "number" id = "hora" min = "0" max = "23" step = "1" valor = "0" /> tiempo </label> <etiqueta for = "minuto"> <input type = "number" id = "minuto" min = "0" max = "59" step = "valor =" valor = "0" /"< /etiqueta <ettrinjel type = "número" id = "segundo" min = "0" max = "23" step = "1" valor = "0"/> segundo </label> <botón id = "btn"> confirmar </botón> <botón id = "reiniciar"> restablecer </botón> </boton> <script> Var temporer; // Intruper límite hora = function () {if (número (this.value) this.Value = 0; if (this.Value> 23) this.Value = 23; if (this.Value <0) this.value = 0;} segundo.onchange = minuto.onchange = function () {if (number (this.value)! == number (this.value)) this.value = 0; if (this.value> 59) 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] .set. setori = Hour.Value*3600 + minuto.Value*60 + Second.Value*1; // Sistema original Valor de tiempo VAR TimeOori = (New Date ()). GetTime (); // El valor de tiempo restante actual VAR SETNOW; CancelAnimationFrame (temporizador); Timer = Timer = TimerMationMation (Function fn () {// El valor de tiempo actual del sistema actual Date ()). Gettime (); // La diferencia en el tiempo del sistema es igual a la diferencia en el tiempo de establecimiento para obtener cambios de tiempo normales setNow = setori - math.floor ((timeNow - timeOori)/1000); hora.value = MATH.Floor ((setNow%86400)/3600); Minute.Value = Math.floor ((((((((setNow)? Math.floor (setnow%60); timer = requestAnimationFrame (fn); if (setnow == 0) {cancelAnimationFrame (temporizador); 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>Cronógrafo
【1】 Repájano simple
Stopwatch tiene la misma idea que Countdown, y es más simple en comparación. Agregar 100 ms por intervalo
<div id = "myDiv"> <etiqueta for = "set"> <input id = "set" value = "0"> </labe> <button id = "btn"> start </button> <button id = "reiniciar"> reiniciar </button> <iv> <script> var timer; var = 'off'; var num = 0; reet.onclar = function () {History.go ();} function () {if (con === 'Off') {set.setAttribute ('discapacitado', 'desactivado'); con = 'on'; btn.innerhtml = 'pause'; timer = setInterval (function () {num+= 100; var minuto = math.floor (num/1000/60); var segundo = math.floor (num/1000); Math.floor (num%1000) /100;set.value = minuto + ':' + segundo + '. }} </script>【2】 Repájano preciso
Similar a la cuenta regresiva, es inexacto usar el intervalo de tiempo del temporizador como referencia para la variación de tiempo. Un enfoque más preciso debe ser utilizar los cambios de tiempo del sistema como referencia para los cambios en el cronómetro.
<div id = "myDiv"> <etiqueta for = "set"> <input id = "set" value = "0"> </labe> <button id = "btn"> start </button> <button id = "reiniciar"> restablecer </botón> </div> <script> var timer; var con = 'off' ;/ oi indica el tiempo de tiempo del sistema inicial var ori; // indica el número de segundos en segundo lugar; = 0; // las últimas tiendas el número de segundos en la pausa (static) var last = 0; reset.onClick = function () {History.go ();} btn.onclick = function () {if (con === 'Off') {set.setTribute ('discapacitado', 'desactivado'); Con = 'ON'; btn.inner del número de segundos que han pasado ORI = (nueva fecha ()). GetTime () - Last; timer = requestAnimationFrame (function fn () {dis = (new date ()). getTime () - ori; cancelAnimationFrame (temporizador); temporizador = requestAnimationFrame (fn); var minuto = math.floor (dis/1000/60); var = math.floor (dis/1000); var = math.floor (dis%1000); segundo + '. con = 'Off'; Last = Dis;}} </script>Despertador
El despertador en realidad está agregando una configuración de tiempo predeterminada al reloj. La configuración del despertador requiere convertir el tiempo establecido en el número de milisegundos a partir del 1 de enero de 1970, y luego se calcula la diferencia con la hora actual. A medida que el tiempo actual continúa aumentando, cuando la diferencia es 0, suena el reloj de alarma
<div id = "myDiv"> </div> <div id = "con"> <etiqueta for = "hora"> <input = "number" id = "hora" min = "0" max = "23" step = "1" valor = "0"/> tiempo </etiqueta> <etiqueta for = "minuto" <input type = "id =" minuto "min =" 0 "max =" 59 "paso =" valor "1" 1 "0" 0 "0" 0 "0" /> min </etiqueta> <etiqueta for = "segundo"> <input type = "number" id = "segundo" min = "0" max = "23" step = "1" valor = "0"/> segundo </label> <button id = "btn"> confirmar </botón> <button id = "reiniciar"> restablecer </boton> </dev> <div Id = "show"> </dv> <script> var> var temporer; 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/.Exec(new date (). tostring ()) [0]; }, 100); reset.OnClick = function () {History.go ();} btn.onclick = function () {// El valor almacenado original var setori = hora.value*3600 + minuto.value*60 + segundo.value*1; // valor original está convertido en el número de miliseguros de 1970 var setms = + new date () (). +setori*1000; // Si la hora establecida es anterior a la hora actual, la configuración no es válida if (setms < +new date ()) {return;} for (var i = 0; i <3; i ++) {con.getElementsByTagName ('input') [i] .SetTribute ('deshabilitado', 'discapacitado');} cancelimationFrame (TimeRation; requestAnimationFrame (function fn () {// Frame la diferencia entre la hora establecida y la hora actual dis = Math.Ceil ((setms - (nueva fecha ()). getTime ())/1000); var showHour = Math.Floor ((dis%86400)/3600); var showMinute = Math.floor ((Dis%3600)/60); var shows. Math.floor (dis%60); timer = requestAnimationFrame (fn); show.innerhtml = 'Todavía hay una distancia del tiempo programado' + showHour + 'Hour' + showminute + 'menos' + showsecond + 'segundos'; // la diferencia es 0, el tiempo se alcanza si (dis == 0) {cancelanimation frame (tiempo temporal); 'Time Is Up'; for (var i = 0; i <3; i ++) {con.getElementsByTagName ('input') [i] .RemoveAttribute ('Disabled');} timer = setTimeOut (function () {btn.innerhtml = 'ok';}, 1000)});} </script>por fin
Como temporizador, lo más problemático es la gestión del temporizador. Si el temporizador solo se enciende pero no se apaga, causará el efecto de superposición del temporizador, lo que hace que la operación sea más rápida y rápida. Por lo tanto, es un buen hábito apagar y luego habilitar el temporizador.
La anterior es la aplicación del tercer temporizador (reloj, cuenta regresiva, cronómetro y despertador) presentada por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!