我的javascript倒计时时钟不会停在0

时间：2017-04-03 14:03:59

标签： 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 个答案:

答案 0 :(得分：0)

所有这些需要是 countdown.innerHTML 行之前的if语句来捕获任何减号值。类似的东西：

tree/3

答案 1 :(得分：0)

因此，您希望存储对倒数计时器的引用，然后使用clearInterval（）在您点击目标时停止计时器。出于演示目的，我已将您的计时器更改为十秒钟。

谢谢，Shilly - 用你的解决方案更清洁。

＆＃13;
＆＃13; 
// 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;
}
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

使用其他答案的提示，如果数字低于零，则setInterval计时器随机不太正确...

相关问题
最新问题