Red de conocimiento informático - Material del sitio web - Cómo usar jquery para lograr el efecto de reloj

Cómo usar jquery para lograr el efecto de reloj

La forma de lograr el efecto de cuenta regresiva es obtener primero la diferencia horaria entre la hora actual y la hora objetivo, y luego actualizar la diferencia horaria a través de un temporizador.

Se requieren las dos funciones siguientes para implementar el proceso anterior:

getTime() // Devuelve el número de milisegundos entre el 1 de enero de 1970, de modo que la diferencia horaria (milisegundos) ÷ 3600 ÷ 24 sea el número de días, horas, minutos y segundos son similares a setTimeout(code, milisegundos); // Un ejemplo de cómo llamar a una función después de un número específico de milisegundos es el siguiente

Crear elementos HTML

¿Cuántos días quedan para el Día Nacional en 2015?
DíaHorasegundos
establecer estilo CSS

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}div.box>span{color:#999;font-style:italic ;}div.content{ancho:250px;margen:10px 0;padding:20px;border:2px sólido #ff6666;}input[type='text']{ancho:45px;alto:35px;padding:5px 10px;margin :5px 0;border:1px solid #ff9966;}escribir código jquery

$(function(){ show_time();}); function show_time(){ var time _start = new Date().getTime (); // Establece la hora actual var time_end = new Date("2015/10/01 00:00:00").getTime() // Establece la hora objetivo // Calcula la diferencia horaria var time_distance = time_end - time_start; // Día var int_day = Math.floor(time_distance/86400000) time_distance -= int_day * 86400000 // Hora var int_hour = Math.floor(time_distance /36:00:00") time_distance -= int_day * 86400000; / / Hora var int_hora = Math.floor(time_distance /36:00:00")// Minuto var int_minuto = Math.floor(time_distance /60000) time_distance -= int_minuto * 60000; // Segunda var int hora; } if(int_minuto < 10){ int_minuto = "0" + int_minuto } if(int_segundo;

< 10){ int_segundo = "0" + int_segundo; } }// Mostrar hora $("#time_d").val(int_ day); $("#time_h").val(int_hour); ").val(int_minuto); $("#time_s").val(int_segundo); // Establecer el temporizador setTimeout("show_time()",1000); } }Observar el efecto

Algunos Captura de pantalla del momento

Captura de pantalla de unos segundos después