2017-04-03 6 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> 
+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; 
} 
0

だから、あなたはあなたの目標を達成するときにタイマーを停止してclearInterval()を使用し、あなたのカウントダウンタイマーへの参照を格納します。デモンストレーションの目的で、私はあなたのタイマーを10秒に変更しました。

おかげで、Shilly - あなたのソリューションではるかに洗練されています。

数字がゼロを下回る場合には、たsetIntervalタイマーがランダムに非常に適切ではないため、他の解答のヒントを使用し

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

...

+0

10秒後に停止します。私の期限をこのコードで止めるように設定するにはどうしたらいいですか? – NiroshChami

+0

最初の5行を見てください。私はあなたのタイマーをコメントし、私のものに置き換えました。あなたの下にある3つのコード行を削除し、タイマーのコメントを外してください。 – Snowmonkey

+1

目標日を過ぎると負の日数しか得られないので、日計算の上に 'if(seconds_left <0)'をチェックするだけで十分です。 – Shilly