设置倒数计时器然后显示投票打开然后投票期间显示投票结束

时间:2017-08-17 00:47:53

标签: javascript countdown

以下是我当前程序的代码。我有一个倒数计时器的运行代码我现在的问题是当投票期结束时我想显示投票结束而不是总是显示投票开放。

<script>
// Set the date we're counting down to
var countDownDate = new Date("<?php echo $countdown['datestart']; ?>").getTime();
var endDate = new date("<?php echo $countdown['dateend']; ?>").getTime();
// Update the count down every 1 second
var x = setInterval(function() {

// Get todays date and time
var now = new Date().getTime();

// Find the distance between now an the count down date
var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";

// If the count down is over, write some text 
if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Voting now Opens";
}

// If date end is over display some text
   //display voting period ends

}, 1000);
</script>

2 个答案:

答案 0 :(得分:0)

要添加结束投票消息,您需要继续间隔,直到投票结束。为了使事情变得更简单,我们使用if ... else if ... else将代码分成3个部分。在每个中,我们处理该场景的相应显示。它具有额外的好处,即在不需要时不进行计算。

如果距离> 0,投票尚未开始。 如果是endDate&gt;现在,投票还没有结束。我假设PHP输出将导致此方案的准确日期。 Read more。 任何其他情况都意味着投票已经结束。

<script>
// Set the date we're counting down to
var countDownDate = new Date("<?php echo $countdown['datestart']; ?>").getTime();
var endDate = new Date("<?php echo $countdown['dateend']; ?>").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  if (distance > 0) {
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
  }
  else if (endDate > now) {
    // If the count down is over, write some text 
    document.getElementById("demo").innerHTML = "Voting now Opens";
  }
  else {
    // If date end is over display some text
    //display voting period ends
    document.getElementById("demo").innerHTML = "Voting Ended";
    clearInterval(x);
  }
}, 1000);
</script>

答案 1 :(得分:0)

乍一看,我可以看到你的“endDate”行有一个错误:

var endDate = new date(.....

它应该是具有大写'D'的日期,与var countDownDate一样,即

var endDate = new Date(.....

假设其余代码是正确的(似乎没问题) - 应该没问题。

如果这还没有解决它 - 从你的问题中很容易解释如果以下函数总是解析为false,因此永远不会触发清除'x'间隔的封闭代码并显示投票是开放的。

if (distance < 0) {...}

如果我要做的是console.log(countDownDate);console.log(now);,为什么不在宣言后理想地console.log(distance);

// Find the distance between now an the count down date
var distance = countDownDate - now;

如果您不确定如何使用console.log()功能,请参阅以下链接:https://developers.google.com/web/tools/chrome-devtools/console/