1. 首頁
  2. 問答
  3. 我的javascript倒計時時鐘不停在0

我的javascript倒計時時鐘不停在0

2017-04-03 34 views
0

我不是javasript和html專家。我從一個網站複製了一個倒計時時鐘代碼。問題是它不會停止在0 0 0 0，繼續計算後記字（負值）。如何停止這個功能。也如何插入這個代碼到這個論壇？ Stackoverflow說我的代碼格式不正確。我的javascript倒計時時鐘不停在0

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"> 
    <meta name="dcterms.created" content="ven, 31 mar 2017 14:29:07 GMT"> 
    <meta name="description" content=""> 
    <meta name="keywords" content=""> 
    <title></title> 

    <!--[if IE]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

<style type="text/css"> 
body{ 
    font: normal 13px/20px Arial, Helvetica, sans-serif; word-wrap:break-word; 
    color: #eee; 
    background: #353535; 
} 
#countdown{ 
    width: 465px; 
    height: 112px; 
    text-align: center; 
    background: #222; 
    background-image: -webkit-linear-gradient(top, #222, #333, #333, #222); 
    background-image: -moz-linear-gradient(top, #222, #333, #333, #222); 
    background-image:  -ms-linear-gradient(top, #222, #333, #333, #222); 
    background-image:  -o-linear-gradient(top, #222, #333, #333, #222); 
    border: 1px solid #111; 
    border-radius: 5px; 
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6); 
    margin: auto; 
    padding: 24px 0; 
    position: absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 
} 

#countdown:before{ 
    content:""; 
    width: 8px; 
    height: 65px; 
    background: #444; 
    background-image: -webkit-linear-gradient(top, #555, #444, #444, #555); 
    background-image: -moz-linear-gradient(top, #555, #444, #444, #555); 
    background-image:  -ms-linear-gradient(top, #555, #444, #444, #555); 
    background-image:  -o-linear-gradient(top, #555, #444, #444, #555); 
    border: 1px solid #111; 
    border-top-left-radius: 6px; 
    border-bottom-left-radius: 6px; 
    display: block; 
    position: absolute; 
    top: 48px; left: -10px; 
} 

#countdown:after{ 
    content:""; 
    width: 8px; 
    height: 65px; 
    background: #444; 
    background-image: -webkit-linear-gradient(top, #555, #444, #444, #555); 
    background-image: -moz-linear-gradient(top, #555, #444, #444, #555); 
    background-image:  -ms-linear-gradient(top, #555, #444, #444, #555); 
    background-image:  -o-linear-gradient(top, #555, #444, #444, #555); 
    border: 1px solid #111; 
    border-top-right-radius: 6px; 
    border-bottom-right-radius: 6px; 
    display: block; 
    position: absolute; 
    top: 48px; right: -10px; 
} 

#countdown #tiles{ 
    position: relative; 
    z-index: 1; 
} 

#countdown #tiles > span{ 
    width: 92px; 
    max-width: 92px; 
    font: bold 48px 'Droid Sans', Arial, sans-serif; 
    text-align: center; 
    color: #111; 
    background-color: #ddd; 
    background-image: -webkit-linear-gradient(top, #bbb, #eee); 
    background-image: -moz-linear-gradient(top, #bbb, #eee); 
    background-image:  -ms-linear-gradient(top, #bbb, #eee); 
    background-image:  -o-linear-gradient(top, #bbb, #eee); 
    border-top: 1px solid #fff; 
    border-radius: 3px; 
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7); 
    margin: 0 7px; 
    padding: 18px 0; 
    display: inline-block; 
    position: relative; 
} 

#countdown #tiles > span:before{ 
    content:""; 
    width: 100%; 
    height: 13px; 
    background: #111; 
    display: block; 
    padding: 0 3px; 
    position: absolute; 
    top: 41%; left: -3px; 
    z-index: -1; 
} 

#countdown #tiles > span:after{ 
    content:""; 
    width: 100%; 
    height: 1px; 
    background: #eee; 
    border-top: 1px solid #333; 
    display: block; 
    position: absolute; 
    top: 48%; left: 0; 
} 

#countdown .labels{ 
    width: 100%; 
    height: 25px; 
    text-align: center; 
    position: absolute; 
    bottom: 8px; 
} 

#countdown .labels li{ 
    width: 102px; 
    font: bold 15px 'Droid Sans', Arial, sans-serif; 
    color: #f47321; 
    text-shadow: 1px 1px 0px #000; 
    text-align: center; 
    text-transform: uppercase; 
    display: inline-block; 
} 

</style> 



</head> 
    <body> 
<table> 
<tr> 
<td> 
<div id="countdown"> 
    <div id='tiles'></div> 
    <div class="labels"> 
    <li>Days</li> 
    <li>Hours</li> 
    <li>Mins</li> 
    <li>Secs</li> 
    </div> 
</div> 
</td> 
</tr> 
</table> 
<script> 

var target_date = new Date("May 10 2017").getTime() + (3600*24); // set the countdown date 
var days, hours, minutes, seconds; // variables for time units 

var countdown = document.getElementById("tiles"); // get tag element 

getCountdown(); 

setInterval(function() { getCountdown(); }, 1000); 

function getCountdown(){ 

    // find the amount of "seconds" between now and target 
    var current_date = new Date().getTime(); 
    var seconds_left = (target_date - current_date)/1000; 

    days = pad(parseInt(seconds_left/86400)); 
    seconds_left = seconds_left % 86400; 

    hours = pad(parseInt(seconds_left/3600)); 
    seconds_left = seconds_left % 3600; 

    minutes = pad(parseInt(seconds_left/60)); 
    seconds = pad(parseInt(seconds_left % 60)); 

    // format countdown string + set tag value 
    countdown.innerHTML = "<span>" + days + "</span><span>" + hours + "</span><span>" + minutes + "</span><span>" + seconds + "</span>"; 
} 

function pad(n) { 
    return (n < 10 ? '0' : '') + n; 
} 

</script> 
    </body> 
</html>

來源

2017-04-03 NiroshChami

+0

我貼在此評論區我的代碼和壓按Ctrl + K，它不會讓我在「添加評論」區域插入更多字符。我能做什麼？ – NiroshChami

+0

請勿將其插入評論區域。你想編輯你的帖子，並在你的問題的文本區域菜單欄中，你會看到一個按鈕，當你將鼠標放在上面時顯示「代碼」。點擊它，然後用IT發佈你的代碼。 – Snowmonkey

+0

好吧，我做了，謝謝你的幫助，現在你可以幫我用代碼。 – NiroshChami

回答

0

這一切需要的是countdown.innerHTML前行的if語句捕捉任何負值。例如：

if((days < 0)||(minutes < 0)||(seconds < 0)||(hours < 0)){ 
    days = 0; 
    minutes = 0; 
    hours = 0; 
    days = 0; 
}

來源

2017-04-03 14:41:32 WongKongPhooey

0

因此，您想要存儲對倒數計時器的引用，然後在您擊中目標時使用clearInterval（）來停止計時器。爲了演示目的，我已將計時器更改爲十秒鐘。

謝謝，希利 - 你的解決方案更清潔。

// var target_date = new Date("May 10 2017").getTime() + (3600 * 24); // set the countdown date 
 

 
//A dummy function with which to test. 
 
var stopBy = new Date(); 
 
stopBy.setSeconds(stopBy.getSeconds() + 10); 
 
var target_date = stopBy.getTime(); 
 

 
var days, hours, minutes, seconds; // variables for time units 
 
var current_date; 
 

 
var countdown = document.getElementById("tiles"); // get tag element 
 

 
getCountdown.timer = setInterval(getCountdown, 1000); 
 

 
function getCountdown() { 
 
    this.timer = null; 
 
    // Check if we've hit! 
 
    // Check to see if we've hit the target! 
 
    if (current_date >= target_date) { 
 
    clearInterval(getCountdown.timer); 
 
    } 
 
    // find the amount of "seconds" between now and target 
 
    current_date = new Date().getTime(); 
 
    var seconds_left = (target_date - current_date)/1000; 
 

 
    if (seconds_left > 0) { 
 

 
    days = parseInt(seconds_left/86400); 
 
    seconds_left = seconds_left % 86400; 
 

 
    hours = parseInt(seconds_left/3600); 
 
    seconds_left = seconds_left % 3600; 
 

 
    minutes = parseInt(seconds_left/60); 
 
    seconds = parseInt(seconds_left % 60); 
 

 
    } else { 
 
    days = 0; 
 
    minutes = 0; 
 
    hours = 0; 
 
    days = 0; 
 
    } 
 

 
    // format countdown string + set tag value 
 
    countdown.innerHTML = "<span>" + pad(days) + "</span><span>" + pad(hours) + "</span><span>" + pad(minutes) + "</span><span>" + pad(seconds) + "</span>"; 
 

 

 
} 
 

 
function pad(n) { 
 
    return (n < 10 ? '0' : '') + n; 
 
}
body { 
 
    font: normal 13px/20px Arial, Helvetica, sans-serif; 
 
    word-wrap: break-word; 
 
    color: #eee; 
 
    background: #353535; 
 
} 
 

 
#countdown { 
 
    width: 465px; 
 
    height: 112px; 
 
    text-align: center; 
 
    background: #222; 
 
    background-image: -webkit-linear-gradient(top, #222, #333, #333, #222); 
 
    background-image: -moz-linear-gradient(top, #222, #333, #333, #222); 
 
    background-image: -ms-linear-gradient(top, #222, #333, #333, #222); 
 
    background-image: -o-linear-gradient(top, #222, #333, #333, #222); 
 
    border: 1px solid #111; 
 
    border-radius: 5px; 
 
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6); 
 
    margin: auto; 
 
    padding: 24px 0; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
#countdown:before { 
 
    content: ""; 
 
    width: 8px; 
 
    height: 65px; 
 
    background: #444; 
 
    background-image: -webkit-linear-gradient(top, #555, #444, #444, #555); 
 
    background-image: -moz-linear-gradient(top, #555, #444, #444, #555); 
 
    background-image: -ms-linear-gradient(top, #555, #444, #444, #555); 
 
    background-image: -o-linear-gradient(top, #555, #444, #444, #555); 
 
    border: 1px solid #111; 
 
    border-top-left-radius: 6px; 
 
    border-bottom-left-radius: 6px; 
 
    display: block; 
 
    position: absolute; 
 
    top: 48px; 
 
    left: -10px; 
 
} 
 

 
#countdown:after { 
 
    content: ""; 
 
    width: 8px; 
 
    height: 65px; 
 
    background: #444; 
 
    background-image: -webkit-linear-gradient(top, #555, #444, #444, #555); 
 
    background-image: -moz-linear-gradient(top, #555, #444, #444, #555); 
 
    background-image: -ms-linear-gradient(top, #555, #444, #444, #555); 
 
    background-image: -o-linear-gradient(top, #555, #444, #444, #555); 
 
    border: 1px solid #111; 
 
    border-top-right-radius: 6px; 
 
    border-bottom-right-radius: 6px; 
 
    display: block; 
 
    position: absolute; 
 
    top: 48px; 
 
    right: -10px; 
 
} 
 

 
#countdown #tiles { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
#countdown #tiles>span { 
 
    width: 92px; 
 
    max-width: 92px; 
 
    font: bold 48px 'Droid Sans', Arial, sans-serif; 
 
    text-align: center; 
 
    color: #111; 
 
    background-color: #ddd; 
 
    background-image: -webkit-linear-gradient(top, #bbb, #eee); 
 
    background-image: -moz-linear-gradient(top, #bbb, #eee); 
 
    background-image: -ms-linear-gradient(top, #bbb, #eee); 
 
    background-image: -o-linear-gradient(top, #bbb, #eee); 
 
    border-top: 1px solid #fff; 
 
    border-radius: 3px; 
 
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7); 
 
    margin: 0 7px; 
 
    padding: 18px 0; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
#countdown #tiles>span:before { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 13px; 
 
    background: #111; 
 
    display: block; 
 
    padding: 0 3px; 
 
    position: absolute; 
 
    top: 41%; 
 
    left: -3px; 
 
    z-index: -1; 
 
} 
 

 
#countdown #tiles>span:after { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 1px; 
 
    background: #eee; 
 
    border-top: 1px solid #333; 
 
    display: block; 
 
    position: absolute; 
 
    top: 48%; 
 
    left: 0; 
 
} 
 

 
#countdown .labels { 
 
    width: 100%; 
 
    height: 25px; 
 
    text-align: center; 
 
    position: absolute; 
 
    bottom: 8px; 
 
} 
 

 
#countdown .labels li { 
 
    width: 102px; 
 
    font: bold 15px 'Droid Sans', Arial, sans-serif; 
 
    color: #f47321; 
 
    text-shadow: 1px 1px 0px #000; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    display: inline-block; 
 
}
<table> 
 
    <tr> 
 
    <td> 
 
     <div id="countdown"> 
 
     <div id='tiles'></div> 
 
     <div class="labels"> 
 
      <li>Days</li> 
 
      <li>Hours</li> 
 
      <li>Mins</li> 
 
      <li>Secs</li> 
 
     </div> 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

使用對方的回答貼士如果數字低於零，則計時器的setInterval是隨機不太對勁......

來源

2017-04-03 14:45:22 Snowmonkey

+0

確定它在10秒後停止。那麼我如何設置我的截止日期以停止在此代碼中？ – NiroshChami

+0

看看前五行。我評論了你的計時器，並取代了我自己的計時器。只需刪除下面的三條代碼行，取消註釋你的計時器，你應該滾動。 – Snowmonkey

+1

在計算天數之上檢查'if（seconds_left <0）'是否足夠，因爲一旦您通過目標日期，您只會得到負數天數。 – Shilly

相關問題

 相關問題