English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Posizione attuale
  2. Pagina principale
  3. Appunti di esperienza
  4. Contenuto principale

Codice di conto alla rovescia JS completo

Questo articolo condivide l'esempio di codice di countdown JS illustrato, per riferimento, il contenuto dettagliato è il seguente

Primo tipo:Codice di countdown JavaScript con precisione secondaria　　

HTML codice:　　

<form name="form1"> 
<div align="center" align="center"> 
<center>Manca ancora:<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() { 
Oggi = new Date(); 
var OggiOra = Oggi.getHours(); 
var OggiMinuto = Oggi.getMinutes(); 
var OggiMese = Oggi.getMonth(); 
var OggiData = Oggi.getDate(); 
var OggiAnno = Oggi.getYear(); 
var OggiSecondo = Oggi.getSeconds(); 
if (OggiAnno <2000) 
OggiAnno=1900+OggiAnno; 
Oggi = null; 
Oreleft = 23 - OggiOra 
Minutileft = 59 - OggiMinuto 
Secondileft = 59 - OggiSecondo 
Annoleft = 2009 - OggiAnno 
Meseleft = 12 - OggiMese - 1 
Giornoleft = 31 - OggiData 
if (Secondileft<0) 
{ 
Secondileft=60+Secondileft; 
Minutileft=Minutileft-1; 
} 
if (Minutileft<0) 
{ 
Minutileft=60+Minutileft; 
Oreleft=Oreleft-1; 
} 
if (Oreleft<0) 
{ 
Oreleft=24+Oreleft; 
Giornoleft=Giornoleft-1; 
} 
if (Giornoleft<0) 
{ 
Giornoleft=31+Giornoleft; 
Meseleft=Meseleft-1; 
} 
if (Meseleft<0) 
{ 
Meseleft=12+Meseleft; 
Annoleft=Annoleft-1; 
} 
Temp=Annoleft+'年, '+Meseleft+'月, '+Giornoleft+'天, '+Oreleft+'小时, '+Minutileft+'分, '+Secondileft+'秒' 
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>

Secondo tipo:Qualche manifestazione sportiva　　

HTML codice:　　 

<!--Conteggio a ritroso JavaScript begin--> 
<script language="JavaScript"> 
<!-- 
function DigitalTime1() 
{ 
var deadline= new Date(\ 
var symbol=\ 
var now = new Date() 
var diff = -480 - now.getTimezoneOffset() // differenza tra l'ora di Pechino e l'ora locale 
var leave = (deadline.getTime() - now.getTime()) + diff*60000 
var day = Math.floor(leave / (1000 * 60 * 60 * 24)) 
var hour = Math.floor(leave / (1000*3600)) - (day * 24) 
var minute = Math.floor(leave / (1000*60)) - (day * 24 *60) - (hour * 60) 
var second = Math.floor(leave / (1000)) - (day * 24 *60*60) - (hour * 60 * 60) - (minute*60) 
var deadline_2= new Date(\ 
var symbol_2=\ 
var now_2 = new Date() 
var diff_2 = -480 - now.getTimezoneOffset() // Differenza tra l'ora di Pechino e l'ora locale 
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+1; 
day_2=day_2+1; 
if (day>0) // Non ancora iniziato 
{ 
//LiveClock1.innerHTML = "Ora sono " + symbol + " giorni" 
LiveClock1.innerHTML = "<font 
setTimeout("DigitalTime1()",1000) 
} 
if (day<0) // Già iniziato 
{ 
//LiveClock1.innerHTML = "Ora ci sono " + symbol + " giorni " + day + " ore " + hour + " minuti " + minute + " secondi" 
LiveClock1.innerHTML = "<font 
setTimeout("DigitalTime1()",1000) 
} 
if (day==0) // In apertura 
{ 
//LiveClock1.innerHTML = "Ora sono " + symbol + " giorni" 
LiveClock1.innerHTML = "<font 
setTimeout("DigitalTime1()",1000) 
} 
if (day<0 && day_2>19) // Fine della manifestazione sportiva 
{ 
//LiveClock1.innerHTML = "Ora ci sono " + symbol + " giorni " + day + " ore " + hour + " minuti " + minute + " secondi" 
LiveClock1.innerHTML = "<font 
setTimeout("DigitalTime1()",1000) 
} 
} 
// --> 
</script> 
<!-- Fine script di countdown in JavaScript --> 
<body onload=DigitalTime1()> 
<div id= LiveClock1></div> 
</body>

Terza opzione:Contatore orario　　

HTML codice:　　 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
var maxtime = 60*60 // un'ora, calcolato in secondi, modificabile! 
function CountDown() { 
if(maxtime>=0){ 
minutes = Math.floor(maxtime/60); 
seconds = Math.floor(maxtime%60); 
msg = "Manca ancora alla fine " + minutes + " minuti " + seconds + " secondi"; 
document.all["timer"].innerHTML=msg; 
if(maxtime == 5*60) alert('Attenzione, mancano ancora 5 minuti!'); 
--maxtime; 
} 
else{ 
clearInterval(timer); 
alert("Tempo esaurito, fine!"); 
} 
} 
timer = setInterval("CountDown()",1000); 
//--> 
</SCRIPT> 
<div id="timer" style="color:red"></div>

Quarto tipo:Conto alla rovescia più semplice　　

HTML codice:　　 

<Script Language="JavaScript"> 
<!-- Inizio 
　　var timedate= new Date("January 14,2006"); 
　　var times="Esame di master"; 
　　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>Manca ancora al 2006 anni " + times + ": <font color=#ffffff><b>" + time + "</b></font> giorni</font></li>"); 
// Fine --> 
</Script>

Quinto tipo:Il conto alla rovescia più semplice　　

HTML codice:　　 

<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>

Manca ancora [<script language="JavaScript" type="text/javascript">djs()</script>] giorni per l'apertura di un evento　　

Sesto tipo:Contatore a scadenza in Javascript - Utilizza il sistema di tempo per la verifica autoregolata　　
Questa volta utilizzando il sistema di tempo per la verifica autoregolata del countdown, non è necessario regolazione manuale per rendere il countdown più accurato, il codice e i commenti dettagliati sono come segue:　　

<span id="clock">00:01:11:00</span> 
<input id="startB" type="button" value="start countdown!" onclick="run()"> 
<input id="endB" type="button" value="stop countdown!" onclick="stop()"> 
<br> 
<input id="diff" type="text"> 
<input id="next" type="text"> 
<script language="Javascript"> 
/* Questo avviso deve rimanere intatto in ogni momento.
countdown.js v. 1.0 
La versione più recente è disponibile su 
http://blog.csdn.net/yjgx007
Copyright (c) 2004 Xinyi.Chen. Tutti i diritti riservati. 
Creato il 30/7/2004 da Xinyi.Chen. 
Web: http://blog.csdn.net/yjgx007 
E-Mail: [email protected] 
Ultima modifica: 30/7/2004
Questo programma è software libero; 
Puoi redistribuirlo e/o modificarlo ai termini dei termini del 
GNU General Public License come pubblicata dalla Free Software Foundation;
Vedere la GNU General Public License 
per ulteriori dettagli, vedere http://www.gnu.org/copyleft/gpl.html. 
*/ 
var normalelapse = 100; 
var nextelapse = normalelapse; 
var counter; 
var startTime; 
var start = clock.innerText; 
var finish = "00:00:00:00"; 
var timer = null; 
// Iniziare l'esecuzione 
function run() { 
startB.disabled = true; 
endB.disabled = false; 
counter = 0; 
// Inizializzare l'ora di inizio 
startTime = new Date().valueOf(); 
// nextelapse è il tempo di attesa, inizialmente 100 millisecondi 
// Attenzione alla funzione setInterval: il tempo trascorso nextelapse(millisecondi) prima, onTimer inizia a eseguire 
timer = window.setInterval("onTimer()", nextelapse); 
} 
// Fermare l'esecuzione 
function stop() { 
startB.disabled = false; 
endB.disabled = true; 
window.clearTimeout(timer); 
} 
window.onload = function() { 
endB.disabled = true; 
} 
// Funzione countdown 
function onTimer() 
{ 
if (start == finish) 
{ 
window.clearInterval(timer); 
alert("tempo è scaduto!"); 
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 -= 10; 
if (ms < 0) 
{ 
ms = 90; 
s -= 1; 
if (s < 0) 
{ 
 s = 59; 
 m -= 1; 
} 
if (m < 0) 
{ 
 m = 59; 
 h -= 1; 
} 
} 
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; 
// Cancella l'ultimo timer 
window.clearInterval(timer); 
// Autoverifica del tempo del sistema per ottenere la differenza di tempo e ottenere il tempo del nuovo timer da avviare nextelapse 
counter++; 
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; 
// Avvia un nuovo timer 
timer = window.setInterval("onTimer()", nextelapse); 
} 
</script>

Aggiungi un conto alla rovescia completo e l'ora, copialo e usa, i risultati sono:　

Giorno Ora Minuti Secondi 22 gennaio 2013 15:44:23 Martedì

<html>
<head>
<title>Conto alla rovescia di test</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 () {
<!-- L'ora deve essere avviata -->
 clockon();
 });
function clockon() {
 var now = new Date();
 var year = now.getFullYear(); //getFullYear getYear
 var month = now.getMonth();
 var date = now.getDate();
 var day = now.getDay();
 var hour = now.getHours();
 var minu = now.getMinutes();
 var sec = now.getSeconds();
 var week;
 month = month + 1;
 if (month < 10) month = "0" + month;
 if (date < 10) date = "0" + date;
 if (hour < 10) hour = "0" + hour;
 if (minu < 10) minu = "0" + minu;
 if (sec < 10) sec = "0" + sec;
 var arr_week = new Array("Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato");
 week = arr_week[day];
 var time = "";
 time = year + "年" + month + "月" + date + "日" + " " + hour + ":" + minu + ":" + sec + " " + week;
 $("#bgclock").html(time);
 var timer = setTimeout("clockon()", 200);
}
<!-- Nascondi lo script per i browser obsoleti
var DifferHour = -1
var DifferMinute = -1
var DifferSecond = -1
var Tday1 = new Date("Feb 11, 2013 00:00:00") //**倒计时时间-注意格式
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)
 se(convertHour != DifferHour) document.formnow.dd.value=DifferHour
 se(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)
}
//
Nascondi-->
</script>
</head>
<body onload="clock();return true" >
<!-- Mostra il contenuto -->
<form name="formnow">
<input name="dd" type="text" style="border:0;" size=2>
Giorni
<input name="hh" type="text" style="border:0;" size=2>
Ore
<input name="mm" type="text" style="border:0;" size=2>
Minuti
<input name="ss" type="text" style="border:0;" size=2>
Secondi
<span id="bgclock" style="float:right;padding-right:10px; padding-top:2px;color:red"></span>
</form>
<!-- Il conteggio a ritroso è finito -->
</body>
</html>

Questo è tutto il contenuto dell'articolo, spero che sia utile per il vostro studio e che sosteniate il tutorial urlaio.

Corso di base
Ti potrebbe interessare