La clave para implementar este efecto es el uso de objetos de fecha y setTimeOut.
Hay tres ejemplos en total. La estructura HTML es la siguiente, por lo que no se agrega estilo CSS.
<Body> Time actual: <p id = "p1"> </p> El recuento de examen de ingreso de la universidad: <P id = "P2"> </p> Rush Limited Time: <P id = "P3"> </p> </body>
Comprender principalmente la implementación de JavaScript
Window.Onload = function () {var p1 = document.getElementById ("p1"), p2 = document.getElementById ("p2"); p3 = document.getElementById ("P3"); showtime1 (); showtime2 (); showtime3 ();}1. Implementación simple de la pantalla actual
función showtime1 () {var nowDate = new Date (); // Crea el objeto de fecha NowDate para obtener el tiempo de tiempo actual var año = NowDate.getVylyEar (), // Get Year Mon = NowDate.getMonth ()+1, // Get Month, getMonth () obtiene 0-11, y necesitas agregar 1 fecha = NowDate.getDate (), // Get the Way of the Way, Getday () ((()) semana = ["domingo", "lunes", "martes", "jueves", "viernes", "sábado", h = nowdate.gethours (), m = nowdate.getminutes (), s = nowdate.getSeconds (), h = checktime (h), // La función de checktime se usa para el tiempo de formato, minutos, segundos M) (M), s = chechtime (s); p1.innerhtml = año+"año"+mes+"mes"+fecha+"día"+semana [día]+h+":"+m+":"+s; setTimeout (showtime1, 1000); // repite la función en sí}La función de tiempo de verificación es la siguiente:
función checktime (i) {if (i <10) {i = "0"+i; } return i;}Debido a que el formato de tiempo que generalmente ve es generalmente 00:00:01, y los gethours, getmines, getSeconds obtienen formatos de 0 a 9, no 00 a 09. Por lo tanto, en el proceso de cambiar de 9 a 10, hay un solo dígito que se convierte en un dígito de doble duplicación, y también se convierte en 0 cuando la carga es de 59 segundos a 0 segundos o 59 minutos a 0 minutos o 23.
Por ejemplo, 23:59:59 debería cambiar a 00:00:00 en el siguiente segundo; Si la función de tiempo de verificación no se usa para el procesamiento, cambiará a 0: 0: 0, lo que hará que el formato sea un poco inconsistente, y también hay mutaciones visuales para aumentar o disminuir el recuento de palabras. (¡Los siguientes dos ejemplos no usan la función de tiempo de verificación para procesar el tiempo, el minuto y el segundo!)
2. El efecto de cuenta regresiva del examen de ingreso a la universidad se realiza
función showtime2 () {var nowtime = new Date (), // Obtenga el tiempo de finalización de tiempo actual = nueva fecha ("2017/6"); // Defina el tiempo final var LeftTime = endtime.gettime ()-NowTime.getTime (), // The MilliseConds de la hora final izquierda = Math.floor (LeftTime/(1000*60*60*24)), // leftth=Math.floor(lefttime/(1000*60*60)%24),//The number of hours leftm=Math.floor(lefttime/(1000*60)%60),//The number of minutes leftts=Math.floor(lefttime/1000%60);//The number of seconds p2.innerHTML=leftd+"day"+lefth+":"+leftm+":"+lefts; setTimeOut (showtime2, 1000); }Entre ellos, los puntos más importantes:
① Defina el tiempo final de tiempo de finalización = nueva fecha ("2017/6/6") es usar un nuevo objeto de fecha con parámetros, y directamente la nueva fecha () es obtener directamente la hora actual;
② El método GetTime () obtiene el número de milisegundos a partir del 1 de enero de 1970.
③ Cálculo de días, horas, minutos y segundos, % (operación de módulo). Obtenga los milisegundos (milisegundos restantes) desde la hora final, divida en 1000 para obtener los segundos restantes, dividir en 60 para obtener los minutos restantes y dividir en 60 para obtener las horas restantes. Dividido por 24 para obtener los días restantes. Segundos restantes Tiempo de izquierda/1000 Módulo 60 obtiene el número de segundos, minutos restantes en el tiempo izquierdo/(1000*60) El módulo 60 obtiene el número de minutos, horas restantes tiempo izquierdo/(1000*60*60) El módulo 24 obtiene el número de horas.
3. Efecto de cuenta regresiva de la compra de prisa por tiempo limitado
función showtime3 () {var nowtime = new date (), endtime = new date ("2020/1/1,00: 00: 00"), // establece el tiempo de finalización de tiempo izquierdo = parseInt ((endtime.getTime ()-nowtime.gettime ())/1000), d = math.floor (tiempo izquierdo/(60*60*24)), h = Math.floor (LeftTime/(60) M = Math.floor (tiempo izquierdo/60%60), S = Math.floor (tiempo izquierdo%60); p3.innerhtml = d+"día"+h+"hora"+m+"minuto"+s+"segundo"; setTimeOut (showtime3, 1000); }De hecho, es similar al segundo ejemplo, la diferencia es que la hora final se establece una nueva fecha ("2020/1/1,00: 00: 00")
A continuación se muestra el código completo
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Countdown Effect </title> <script type = "text/javascript"> function checktime (i) {if (i <10) {i = "0"+i; } return i; } window.onload = function () {var p1 = document.getElementById ("p1"), p2 = document.getElementById ("p2"); showtime1 (); showtime2 (); showtime3 (); } función showtime1 () {var nowDate = new Date (); var año = NowDate.getblyear (), // año mes = NowDate.getMonth ()+1, // mes date = NowDate.getDate (), // Day Week = ["Sunday", "Lunes", "Martes", "Jueves", "Viernes", "Sábado"], Day = NowDate.getday (), // Get 0-16 h = Now.gethours (), H = H = H), H) M = NowDate.getMinutes (), M = Checktime (M), S = NowDate.getSeconds (), S = Checktime (s); p1.innerhtml = año+"año"+mes+"mes"+fecha+"día"+semana [día]+h+":"+m+":"+s; SetTimeOut (Showtime1, 1000); } función showtime2 () {var nowtime = new Date (), endtime = new Date ("2017/6/6"); var LeftTime = EndTime.GetTime ()-NowTime.GetTime (), LeftD = Math.Floor (LeftTime/(1000*60*60*24)), izquierda = Math.floor (Tiempo izquierdo/(1000*60*60*60)%24), LeftM = Math.floor (tiempo izquierdo/(1000*60)%60), Lefts = Math.floor (tiempo izquierdo/1000%60); p2.innerhtml = LeftD+"Día"+Lefth+":"+Leftm+":"+Lefts; setTimeOut (showtime2, 1000); } función showtime3 () {var nowtime = new Date (), endtime = new Date ("2020/1/1,00: 00: 00"), Lefttime = parseInt ((endtime.gettime ()-ahora tiempo.gettime ())/1000), d = math.floor (tiempo izquierdo/(60*60*24))), h = Math.floor (tiempo izquierdo/(60)%24)%24). M = Math.floor (tiempo izquierdo/60%60), S = Math.floor (tiempo izquierdo%60); p3.innerhtml = d+"día"+h+"hora"+m+"minuto"+s+"segundos"; setTimeOut (showtime3, 1000); } </script> </head> <body> TIEMPO Current: <P id = "P1"> </p> Contabilidad de examen de ingreso de la universidad: <P id = "P2"> </p> Rush Limited Time Rush: <P id = "P3"> </p> </body> </html>La implementación de los efectos especiales de JavaScript anteriores: un ejemplo simple del tiempo actual y el efecto de cuenta regresiva es todo el contenido que he compartido con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.