2017-08-05 105 views
0

的Javascript循環倒計時

function timer() 
 

 
{ 
 
\t var currentTime = new Date() 
 
\t var hours = currentTime.getHours() 
 
\t var minutes = currentTime.getMinutes() 
 
\t var seconds = currentTime.getSeconds() 
 

 
\t if (minutes < 10) 
 
\t { 
 
\t \t minutes = "0" + minutes 
 
\t } 
 
\t 
 
\t if (hours < 6) 
 
\t { 
 
\t \t var hoursLeft = 5 – hours; 
 
\t \t var minsLeft = 60 – minutes; 
 
\t \t 
 
\t \t if(minsLeft==60) 
 
\t \t { 
 
\t \t \t minsLeft=0; 
 
\t \t \t hoursLeft++; 
 
\t \t } 
 
\t var secsLeft = 60 – seconds; 
 
\t 
 
\t \t if(secsLeft==60) 
 
\t \t { 
 
\t \t \t secsLeft=0; 
 
\t \t \t minsLeft++; 
 
\t \t } 
 
\t } 
 

 
\t else if (hours < 18) 
 
\t { 
 
\t \t var hoursLeft = 17 – hours; 
 
\t \t var minsLeft = 60 – minutes; 
 
\t \t 
 
\t \t if(minsLeft==60) 
 
\t \t { 
 
\t \t \t minsLeft=0; 
 
\t \t \t hoursLeft++; 
 
\t \t } 
 

 
\t \t var secsLeft = 60 – seconds; 
 
\t \t 
 
\t \t if(secsLeft==60) 
 
\t \t { 
 
\t \t \t secsLeft=0; 
 
     minsLeft++; 
 
\t \t } 
 
\t } 
 
\t 
 
\t else if (hours < 24) 
 
\t { 
 
\t \t var hoursLeft = 29 – hours; 
 
\t \t var minsLeft = 60 – minutes; 
 
\t \t 
 
\t \t if(minsLeft==60) 
 
\t \t { 
 
\t \t \t minsLeft=0; 
 
\t \t \t hoursLeft++; 
 
\t \t } 
 
\t \t 
 
\t \t var secsLeft = 60 – seconds; 
 
\t \t 
 
\t \t if(secsLeft==60) 
 
\t \t { 
 
\t \t \t secsLeft=0; 
 
\t \t \t minsLeft++; 
 
\t \t } 
 
\t } 
 
\t 
 
\t else if (hours == 6) 
 
\t { 
 
\t \t var xmlhttp = new XMLHttpRequest(); 
 
\t \t xmlhttp.open("reset.html", true); 
 
\t \t xmlhttp.send(); 
 
\t } 
 
\t 
 
\t else if (hours == 18) 
 
\t { 
 
\t \t var xmlhttp = new XMLHttpRequest(); 
 
\t \t xmlhttp.open("reset.html", true); 
 
\t \t xmlhttp.send(); 
 
\t } 
 
\t 
 
\t else 
 
\t { 
 
\t \t document.write("Error, please contact admin"); 
 
\t } 
 

 
\t document.getElementById('timerUpFront').innerHTML= hoursLeft + " hours " + minsLeft + " minutes " + secsLeft + " seconds"; 
 
} 
 

 
\t var countdownTimer = setInterval('timer()', 1000);
#timerUpFront 
 
{ 
 
\t color:#009DE3; 
 
} 
 

 
#timer 
 
{ 
 
    font-family: "Comic Sans MS", cursive, sans-serif; 
 
    margin-top: 20px; 
 
    font-size:36px; 
 
    text-align:center; 
 
} 
 

 
#button 
 
{ 
 
\t background-color:#008CFF; 
 
\t font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
 
\t font-size:26px; 
 
\t width:160px; 
 
\t padding: 10px; 
 
\t margin: 2em auto; 
 
\t margin-top: 10px; 
 
}
<html> 
 
<head> 
 
<title>Timer</title> 
 
</head> 
 

 
<body> 
 
<div id="timer"> 
 
<span id="timerUpFront"></span> 
 
<br><br> 
 
<div id="button"> 
 
<center><a href="reset.html" style="text-decoration:none">Reset</a></center> 
 
</div> 
 
</div> 
 
</body> 
 
</html>

試圖創建一個自動化的倒計時器應該重置自回一次達到0:00:00或者一旦按下按鈕,但不會重置頁面刷新。 我一直在嘗試幾個小時,但無法讓計時器顯示,在.js文件中找不到任何錯誤。因爲我最後的選擇必須在本網站上提問。

回答

1

我不確定是否有人惡作劇你或某事,但你正在使用一個更大的破折號字符(我不知道是什麼稱呼),而不是一個常規的減號。我用-替換了

function timer() 
 

 
{ 
 
\t var currentTime = new Date() 
 
\t var hours = currentTime.getHours() 
 
\t var minutes = currentTime.getMinutes() 
 
\t var seconds = currentTime.getSeconds() 
 

 
\t if (minutes < 10) 
 
\t { 
 
\t \t minutes = "0" + minutes 
 
\t } 
 
\t 
 
\t if (hours < 6) 
 
\t { 
 
\t \t var hoursLeft = 5 - hours; 
 
\t \t var minsLeft = 60 - minutes; 
 
\t \t 
 
\t \t if(minsLeft==60) 
 
\t \t { 
 
\t \t \t minsLeft=0; 
 
\t \t \t hoursLeft++; 
 
\t \t } 
 
\t var secsLeft = 60 - seconds; 
 
\t 
 
\t \t if(secsLeft==60) 
 
\t \t { 
 
\t \t \t secsLeft=0; 
 
\t \t \t minsLeft++; 
 
\t \t } 
 
\t } 
 

 
\t else if (hours < 18) 
 
\t { 
 
\t \t var hoursLeft = 17 - hours; 
 
\t \t var minsLeft = 60 - minutes; 
 
\t \t 
 
\t \t if(minsLeft==60) 
 
\t \t { 
 
\t \t \t minsLeft=0; 
 
\t \t \t hoursLeft++; 
 
\t \t } 
 

 
\t \t var secsLeft = 60 - seconds; 
 
\t \t 
 
\t \t if(secsLeft==60) 
 
\t \t { 
 
\t \t \t secsLeft=0; 
 
     minsLeft++; 
 
\t \t } 
 
\t } 
 
\t 
 
\t else if (hours < 24) 
 
\t { 
 
\t \t var hoursLeft = 29 - hours; 
 
\t \t var minsLeft = 60 - minutes; 
 
\t \t 
 
\t \t if(minsLeft==60) 
 
\t \t { 
 
\t \t \t minsLeft=0; 
 
\t \t \t hoursLeft++; 
 
\t \t } 
 
\t \t 
 
\t \t var secsLeft = 60 - seconds; 
 
\t \t 
 
\t \t if(secsLeft==60) 
 
\t \t { 
 
\t \t \t secsLeft=0; 
 
\t \t \t minsLeft++; 
 
\t \t } 
 
\t } 
 
\t 
 
\t else if (hours == 6) 
 
\t { 
 
\t \t var xmlhttp = new XMLHttpRequest(); 
 
\t \t xmlhttp.open("reset.html", true); 
 
\t \t xmlhttp.send(); 
 
\t } 
 
\t 
 
\t else if (hours == 18) 
 
\t { 
 
\t \t var xmlhttp = new XMLHttpRequest(); 
 
\t \t xmlhttp.open("reset.html", true); 
 
\t \t xmlhttp.send(); 
 
\t } 
 
\t 
 
\t else 
 
\t { 
 
\t \t document.write("Error, please contact admin"); 
 
\t } 
 

 
\t document.getElementById('timerUpFront').innerHTML= hoursLeft + " hours " + minsLeft + " minutes " + secsLeft + " seconds"; 
 
} 
 

 
\t var countdownTimer = setInterval('timer()', 1000);
#timerUpFront 
 
{ 
 
\t color:#009DE3; 
 
} 
 

 
#timer 
 
{ 
 
    font-family: "Comic Sans MS", cursive, sans-serif; 
 
    margin-top: 20px; 
 
    font-size:36px; 
 
    text-align:center; 
 
} 
 

 
#button 
 
{ 
 
\t background-color:#008CFF; 
 
\t font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 
 
\t font-size:26px; 
 
\t width:160px; 
 
\t padding: 10px; 
 
\t margin: 2em auto; 
 
\t margin-top: 10px; 
 
}
<html> 
 
<head> 
 
<title>Timer</title> 
 
</head> 
 

 
<body> 
 
<div id="timer"> 
 
<span id="timerUpFront"></span> 
 
<br><br> 
 
<div id="button"> 
 
<center><a href="reset.html" style="text-decoration:none">Reset</a></center> 
 
</div> 
 
</div> 
 
</body> 
 
</html>