堆栈内存溢出
  繁体   English   中英

我的JavaScript倒数时钟没有停止在0

[英]My javascript countdown clock is not stopping at 0

 原文  2017-04-03 14:03:59  1   2    javascript/ html

问题描述

我不是javasript和html专家。 我从网站复制了倒计时时钟代码。 问题是它不会在0 0 0 0处停止，而是继续计算反向字（负值）。 如何停止此功能。 还如何在此论坛中插入此代码？ Stackoverflow告诉我，我的代码格式不正确。 

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

2 个解决方案

解决方案1
 0  2017-04-03 14:41:32

所有这些需要的是在countdown.innerHTML行之前的if语句，以捕获任何负值。 就像是： 

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

解决方案2
 0  2017-04-03 14:45:22

因此，您想存储对倒数计时器的引用，然后在击中目标时使用clearInterval（）停止计时器。 为了演示起见，我将您的计时器更改为十秒。

谢谢，Shilly-您的解决方案更加清洁。 

 // 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计时器随机不是很正确...

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 停止我的Javascript日期倒计时 倒计时后Pomodoro时钟未停止 用JavaScript构建倒数时钟 javascript倒数时钟 javascript倒数时钟 JavaScript 中的倒数计时器未停止 为什么我的倒数计时不会在0停止？ javascript倒数时钟日期问题 倒数时钟日期formate无法正常工作 JavaScript倒数时钟不会自动倒数
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM