Código de cuenta regresiva JS más completo

Este ejemplo práctico comparte el código específico de visualización del reloj inverso JS, a modo de referencia, el contenido específico es el siguiente

Primera opción:Código de cuenta regresiva JavaScript con precisión hasta el segundo　　

Código HTML:　　

<form name="form1"> 
<div align="center" align="center"> 
<center>Quedan2010Años restantes:<br> 
<input type="textarea" name="left" size="35" style="text-align: center"> 
</center> 
</div> 
</form> 
<script LANGUAGE="javascript"> 
startclock(); 
var timerID = null; 
var timerRunning = false; 
function showtime() { 
Today = new Date(); 
var NowHour = Today.getHours(); 
var NowMinute = Today.getMinutes(); 
var NowMonth = Today.getMonth(); 
var NowDate = Today.getDate(); 
var NowYear = Today.getYear(); 
var NowSecond = Today.getSeconds(); 
if (NowYear <2000) 
NowYear=1900+NowYear; 
Today = null; 
Hourleft = 23 - NowHour 
Minuteleft = 59 - NowMinute 
Secondleft = 59 - NowSecond 
Yearleft = 2009 - NowYear 
Monthleft = 12 - NowMonth - 1 
Dateleft = 31 - NowDate 
if (Secondleft<0) 
{ 
Secondleft=60+Secondleft; 
Minuteleft=Minuteleft-1mes = mes 
} 
if (Minuteleft<0) 
{ 
Minuteleft=60+Minuteleft; 
Hourleft=Hourleft-1mes = mes 
} 
if (Hourleft<0) 
{ 
Hourleft=24+Hourleft; 
Dateleft=Dateleft-1mes = mes 
} 
if (Dateleft<0) 
{ 
Dateleft=31+Dateleft; 
Monthleft=Monthleft-1mes = mes 
} 
if (Monthleft<0) 
{ 
Monthleft=12+Monthleft; 
Yearleft=Yearleft-1mes = mes 
} 
Temp=Yearleft+'año,'+Monthleft+'mes,'+Dateleft+'dia,'+Hourleft+'hora,'+Minuteleft+'minuto,'+Secondleft+'segundo' 
document.form1.left.value=Temp; 
timerID = setTimeout("showtime()",1000); 
timerRunning = true; 
} 
var timerID = null; 
var timerRunning = false; 
function stopclock () { 
if(timerRunning) 
clearTimeout(timerID); 
timerRunning = false; 
} 
function startclock () { 
stopclock(); 
showtime(); 
} 
// --> 
</script> 

Segundo tipo:Algunos juegos deportivos　　

Código HTML:　　

<!--Inicio de cuenta regresiva en JavaScript--> 
<script language="JavaScript"> 
<!-- 
function DigitalTime1() 
{ 
var deadline= new Date("08/13/2007") //Cuenta regresiva de apertura 
var symbol="8mes13日" 
var now = new Date() 
var diff = -480 - now.getTimezoneOffset() //es la diferencia entre la hora de Beijing y la hora local 
var leave = (deadline.getTime() - now.getTime()) + diff*60000 
var dia = Math.floor(leave / (1000 * 60 * 60 * 24)) 
var hora = Math.floor(leave / (1000*3600)) - (dia * 24) 
var minuto = Math.floor(leave / (1000*60)) - (dia * 24 *60) - (hora * 60) 
var segundo = Math.floor(leave / (1000)) - (dia * 24 *60*60) - (hora * 60 * 60) - (minuto*60) 
var deadline_2= new Date("08/13/2004") //Apertura en cuenta regresiva 
var symbol_2="8mes13日" 
var now_2 = new Date() 
var diff_2 = -480 - now.getTimezoneOffset() //es la diferencia entre la hora de Beijing y la hora local 
var leave_2 =/ (now_2.getTime() - deadline_2.getTime()) + diff_2*60000 
var day_2 =/ Math.floor(leave_2 / (1000 * 60 * 60 * 24)) 
var hour_2 =/ Math.floor(leave_2 / (1000*3600)) - (day_2 * 24) 
var minute_2 =/ Math.floor(leave_2 / (1000*60)) - (day_2 * 24 *60) - (hour_2 * 60) 
var second_2 =/ Math.floor(leave_2 / (1000)) - (day_2 * 24 *60*60) - (hour_2 * 60 * 60) - (minute_2*60) 
day=day+1mes = mes 
day_2=/day_2+1mes = mes 
if (day>0) //Aún no ha comenzado 
{ 
//LiveClock1.innerHTML = "Ahora"+symbol+"días" 
LiveClock1.innerHTML = "<font 
setTimeout("DigitalTime1()",1000) 
} 
if (day<0) //Ya ha comenzado 
{ 
//LiveClock1.innerHTML = "Ahora falta"+symbol+"quedan"+day+"días"+hora+"horas"+minute+"minutos"+second +"segundos" 
LiveClock1.innerHTML = "<font 
setTimeout("DigitalTime1()",1000) 
} 
if (day==0) //Está abriendo 
{ 
//LiveClock1.innerHTML = "Ahora"+symbol+"días" 
LiveClock1.innerHTML = "<font 
setTimeout("DigitalTime1()",1000) 
} 
if (day<0 & day_2>19) //Algunos juegos deportivos finalizarán 
{ 
//LiveClock1.innerHTML = "Ahora falta"+symbol+"quedan"+day+"días"+hora+"horas"+minute+"minutos"+second +"segundos" 
LiveClock1.innerHTML = "<font 
setTimeout("DigitalTime1()",1000) 
} 
} 
// --> 
</script> 
<!--JavaScript de cuenta regresiva final--> 
<body onload=DigitalTime1()> 
<div id= LiveClock1></div> 
</body>

Tercera opción:Cuenta regresiva de horas　　

Código HTML:　　

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
var maxtime = 60*60 //Una hora, calculada en segundos, ajuste por su cuenta! 
function CountDown(){ 
if(maxtime>=0){ 
minutes = Math.floor(maxtime/60); 
seconds = Math.floor(maxtime%60); 
msg = "Quedan"+minutes+"minutos"+seconds+"segundos"; 
document.all["timer"].innerHTML=msg; 
if(maxtime == 5*60) alert('Atención, quedan5minutos!'); 
--maxtime; 
} 
else{ 
clearInterval(timer); 
alert("¡El tiempo ha terminado, finalizado!"); 
} 
} 
timer = setInterval("CountDown()",1000); 
//--> 
</SCRIPT> 
<div id="timer" style="color:red"></div> 

Cuarta opción:Cuenta regresiva más simple　　

Código HTML:　　

<Script Language="JavaScript"> 
<!-- Inicio 
　　var timedate= new Date("January 14,2006); 
　　var times="Examen de maestría"; 
　　var now = new Date(); 
　　var date = timedate.getTime(); - now.getTime(); 
　　var time = Math.floor(date / (1000 * 60 * 60 * 24)) { 
　　if (time >= 0) ; 
document.write("<li><font color=#DEDBDE>La distancia actual a2006años"+times+"Quedan: <font color=#ffffff><b>"+time +"</b></font> días</font></li>"); 
// Final --> 
</Script> 

Quinta opción:Cuenta regresiva más simple　　

Código HTML:　　

<script language="JavaScript" type="text/javascript"> 
function djs(){ 
var urodz= new Date("11/12/2008);　 
var now = new Date(); 
var num 
var ile = urodz.getTime(); - now.getTime();　　 
var dni = Math.floor(ile / (1000 * 60 * 60 * 24)) {　　 
if (dni >1)　　 
num=dni+1 
else if (dni = 1) num=2　 
else if (dni == 0) num=1 
else num=0　 
document.write(num)　　 
} 
</script> 

Faltan [script language="JavaScript" type="text/javascript">djs()</script>] días　　

Sexta opción:Cronómetro de JavaScript - Se utiliza la autocomprobación del tiempo del sistema　　
Esta vez se utiliza la autocomprobación del tiempo del sistema para la cuenta regresiva, sin necesidad de ajuste manual, lo que hace que la cuenta regresiva sea más precisa, el código y los comentarios detallados se muestran a continuación:　　

<span id="clock">00:01:11:00</span> 
<input id="startB" type="button" value="¡iniciar cuenta regresiva!" onclick="run()"> 
<input id="endB" type="button" value="¡detener cuenta regresiva!" onclick="stop()"> 
<br> 
<input id="diff" type="text"> 
<input id="next" type="text"> 
<script language="Javascript"> 
/* Este aviso debe permanecer inalterado en todo momento.
countdown.js v. 1.0 
La última versión está disponible en 
http://blog.csdn.net/yjgx007
Derechos de autor (c) 2004 Xinyi.Chen. Todos los derechos reservados. 
Creado 7/30/2004 por Xinyi.Chen. 
Web: http://blog.csdn.net/yjgx007 
E-Correo: [email protected] 
Última modificación: 7/30/2004
Este programa es software libre; 
puedes redistribuirla y/o modificarla bajo los términos de la 
Licencia Pública General GNU como publicada por la Free Software Foundation;
Ver la Licencia Pública General GNU 
en http://www.gnu.org/copyleft/gpl.html para más detalles. 
*/ 
var normalelapse = 100; 
var nextelapse = normalelapse; 
var counter; 
var startTime; 
var start = clock.innerText; 
var finish = "00:00:00:00"; 
var timer = null; 
// iniciar la ejecución 
function run() { 
startB.disabled = true; 
endB.disabled = false; 
counter = 0; 
// inicializar el tiempo de inicio 
startTime = new Date().valueOf(); 
// nextelapse es el tiempo de temporización, inicialmente es100 milisegundos 
// Atención a la función setInterval: La ejecución de onTimer comienza después de que el tiempo transcurrido nextelapse(milisegundos) 
timer = window.setInterval("onTimer()", nextelapse); 
} 
// detener la ejecución 
function stop() { 
startB.disabled = false; 
endB.disabled = true; 
window.clearTimeout(timer); 
} 
window.onload = function() { 
endB.disabled = true; 
} 
// 倒计时函数 
function onTimer() 
{ 
if (start == finish) 
{ 
window.clearInterval(timer); 
alert("time is up!"); 
return; 
} 
var hms = new String(start).split(":"); 
var ms = new Number(hms[3]); 
var s = new Number(hms[2]); 
var m = new Number(hms[1]); 
var h = new Number(hms[0]); 
ms -= 10mes = mes 
if (ms < 0) 
{ 
ms = 90; 
s -= 1mes = mes 
if (s < 0) 
{ 
 s = 59mes = mes 
 m -= 1mes = mes 
} 
if (m < 0) 
{ 
 m = 59mes = mes 
 h -= 1mes = mes 
} 
} 
var ms = ms < 10 ? ("0" + ms) : ms; 
var ss = s < 10 ? ("0" + s) : s; 
var sm = m < 10 ? ("0" + m) : m; 
var sh = h < 10 ? ("0" + h) : h; 
start = sh + ":" + sm + ":" + ss + ":" + ms; 
clock.innerText = start; 
// 清除上一次的定时器 
window.clearInterval(timer); 
// 通过自校验系统时间得到时间差，并由此得到下次启动的新定时器的时间nextelapse 
counter++mes = mes 
var counterSecs = counter * 100; 
var elapseSecs = new Date().valueOf() - startTime; 
var diffSecs = counterSecs - elapseSecs; 
nextelapse = normalelapse + diffSecs; 
diff.value = counterSecs + "-" + elapseSecs + "=" + diffSecs; 
next.value = "nextelapse = " + nextelapse; 
if (nextelapse < 0) nextelapse = 0; 
// 启动新的定时器 
timer = window.setInterval("onTimer()", nextelapse); 
} 
</script>

Añadir un cuenta regresiva completa y tiempo　 Copiar para usar　 Los resultados son:　

día hora minuto segundo 2013año01mes22día 15:44:23 martes

<html>
<head>
<title>Prueba de cuenta regresiva</title>
 <script src="http://event.wushuangol.com/ShopClothes/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script language="JavaScript">
 $("document").ready(function () {
<!-- El tiempo debe estar activado -->
 clockon();
 });
function clockon() {
 var now = new Date();
 var año = now.getFullYear(); //getFullYear getYear
 var año = now.getFullYear();
 var mes = now.getMonth();
 var fecha = now.getDate();
 var día = now.getDay();
 var hora = now.getHours();
 var minuto = now.getMinutes();
 var seg = now.getSeconds();
 var week; + 1mes = mes
 ; 10) mes = "0" + mes;
 if (fecha < 10) fecha = "0" + fecha;
 if (hora < 10) hora = "0" + hora;
 if (minuto < 10) minuto = "0" + minuto;
 if (seg < 10) seg = "0" + seg;
 var arr_week = new Array("domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado");
 week = arr_week[day];
 var time = "";
 time = año + "año" + mes + "mes" + fecha + "día" + " " + hora + ":" + minuto + ":" + seg + " " + semana;
 $("#bgclock").html(time);
 var timer = setTimeout("clockon()", 200);
}
<!-- Script oculto de navegadores antiguos
var DifferHour = -1
var DifferMinute = -1
var DifferSecond = -1
var Tday1 = new Date("Feb 11, 2013 00:00:00) //**Tiempo de cuenta regresiva-NOTA: Formato
var daysms = 24 * 60 * 60 * 1000
var hoursms = 60 * 60 * 1000
var Secondms = 60 * 1000
var microsecond = 1000
function clock()
{
 var time = new Date()
 var hour = time.getHours()
 var minute = time.getMinutes()
 var second = time.getSeconds()
 var timevalue = ""+((hour > 12) ? hour-12:hour)
 timevalue +((minute < 10) ? ":0":":")+minute
 timevalue +((second < 10) ? ":0":":")+second
 timevalue +((hour >12 ) ? " PM":" AM")
 var convertHour = DifferHour
 var convertMinute = DifferMinute
 var convertSecond = DifferSecond
 var Diffms = Tday1.getTime() - time.getTime()
 DifferHour = Math.floor(Diffms / daysms)
 Diffms -= DifferHour * daysms
 DifferMinute = Math.floor(Diffms / hoursms)
 Diffms -= DifferMinute * hoursms
 DifferSecond = Math.floor(Diffms / Secondms)
 Diffms -= DifferSecond * Secondms
 var dSecs = Math.floor(Diffms / microsecond)
 si (convertHour != DifferHour) document.formnow.dd.value = DifferHour
 if(convertMinute != DifferMinute) document.formnow.hh.value=DifferMinute
 if(convertSecond != DifferSecond) document.formnow.mm.value=DifferSecond
 document.formnow.ss.value=dSecs
 document.formnow.ss.value=dSecs
// document.formnow.Tnow.value= DifferHour DifferMinute + DifferSecond + dSecs
setTimeout("clock()",1000)
}
//
Ocultar-->
</script>
</head>
<body onload="clock();return true" >
<!--Mostrar contenido-->
<form name="formnow">
<input name="dd" type="text" style="border:0;" size=2>
día
<input name="hh" type="text" style="border:0;" size=2>
hora
<input name="mm" type="text" style="border:0;" size=2>
minuto
<input name="ss" type="text" style="border:0;" size=2>
segundo
<span id="bgclock" style="float:right;padding-right:10px; padding-top:2px;text="red""></span>
</form>
<!--¡Se ha completado el conteo regresivo!-->
</body>
</html> 

Esto es todo el contenido de este artículo, espero que sea útil para su aprendizaje y que todos nos apoyen en el tutorial de grito.<