Question

我想在一个函数中显示多个最有可能是3或4的计时器，并将它们全部显示在不同的div中。这有效但在两个div中显示相同的倒数计时器。

var countDownDate = new Date("Sep 15, 2017 12:25:25").getTime();
var countDownDate = new Date("Sep 19, 2017 12:25:25").getTime();



var x = setInterval(function() {


var now = new Date().getTime();


var distance = countDownDate - now;


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);


document.getElementById("timer").innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours + "h " + minutes + "m " + seconds + "s ";
document.getElementById("timer2").innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours + "h " + minutes + "m " + seconds + "s ";



if (distance < 0) {
clearInterval(x);
document.getElementById("timer").innerHTML = "ICO Has Ended";
}
}, 1000);

Answer 1

您需要为日期声明2个单独的变量，这些变量目前正在相互覆盖。

然后你需要为每个日期调用间隔计时器，因此最有效的包装函数 - 见下文，这应该工作

var countDownDate1 = new Date("Sep 15, 2017 12:25:25").getTime();
var countDownDate2 = new Date("Sep 19, 2017 12:25:25").getTime();

var timer1= document.getElementById("timer")
var timer2= document.getElementById("timer2")

function countdown(finish_date, timer){

    var x = setInterval(function() {

                    var now = new Date().getTime();

                    var distance = finish_date - now;

                    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);

                    timer.innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours + "h " + minutes + "m " + seconds + "s ";


                    if (distance < 0) {
                    clearInterval(x);
                    timer.innerHTML = "ICO Has Ended";
                    }
                    }, 1000);
}

countdown(countDownDate1, timer1)
countdown(countDownDate2, timer2)

JSfiddle链接：https://jsfiddle.net/mpwaw/j95x8y86/

Answer 2

您只有一个countDownDate变量，而您正在覆盖原始变量。

var countDownDate = new Date("Sep 15, 2017 12:25:25").getTime();
var countDownDate = new Date("Sep 19, 2017 12:25:25").getTime();

就在这里，你有一个countDownDate，日期是“2017年9月19日12:25:25”。您将不会创建2个不同的变量。

尝试将第二个countDownDate更改为countDownDate2，并在其余代码中效仿。

var countDownDate1 = new Date("Sep 15, 2017 12:25:25").getTime();
var countDownDate2 = new Date("Sep 19, 2017 12:25:25").getTime();

var x = setInterval(function() {
    var now = new Date().getTime();
    var distance1 = countDownDate1 - now;
    var distance2 = countDownDate2 - now;


    var days1 = Math.floor(distance1 / (1000 * 60 * 60 * 24));
    var hours1 = Math.floor((distance1 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes1 = Math.floor((distance1 % (1000 * 60 * 60)) / (1000 * 60));
    var seconds1 = Math.floor((distance1 % (1000 * 60)) / 1000);

    var days2 = Math.floor(distance2 / (1000 * 60 * 60 * 24));
    var hours2 = Math.floor((distance2 % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes2 = Math.floor((distance2 % (1000 * 60 * 60)) / (1000 * 60));
    var seconds2 = Math.floor((distance2 % (1000 * 60)) / 1000);

    document.getElementById("timer").innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours1 + "h " + minutes1 + "m " + seconds1 + "s ";
    document.getElementById("timer2").innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours2 + "h " + minutes2 + "m " + seconds2 + "s ";

 if (distance < 0) {
   clearInterval(x);
   document.getElementById("timer").innerHTML = "ICO Has Ended";
 }
 }, 1000);

使用上面的代码，我希望将其重构为多个函数。 Currenlty这个函数被认为是重载的，应该分解成更小的。也许将获取间隔分解为一个不同的函数，在这个函数中发送2个日期，然后返回H，M，S。

Answer 3

将整个事物提取到一个函数中：

 function setTimer(enddate, elem){
   (function tick() {
      var now = new Date().getTime();
      var distance = enddate - now;
      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);


     elem.innerHTML = days + "<span style='font-weight:normal'>d</span> " + hours + "h " + minutes + "m " + seconds + "s ";

    if(distance < 0){
     elem.innerHTML = "ICO Has Ended";
    }else{
     setTimeout(tick,1000);
   }
  })()
}

所以可以这样做：

 setTimer(
  new Date("Sep 19, 2017 12:25:25"),
  document.getElementById(" timer1")
 );
setTimer(
  new Date("Sep 21, 2017 12:25:25"),
  document.getElementById(" timer2")
 );

Answer 4

var count1Div = document.getElementById('count1');
var count2Div = document.getElementById('count2');
var count3Div = document.getElementById('count3');

function appendZero(num) {
 return num < 10 ? "0"+num : num;
}

function setCountContent(element, count) {
var min = count.getMinutes();
var sec = count.getSeconds();
var hour = count.getHours();

element.innerText = appendZero(hour) + " : " + appendZero(min) + " : " + appendZero(sec);
}

var interval = setInterval(function(e){
var count = new Date();
var count2 = new Date();
var count3 = new Date();

count2.setMinutes(count.getMinutes() + 1);
count3.setMinutes(count2.getMinutes() + 1);

setCountContent(count1Div, count);
setCountContent(count2Div, count2);
setCountContent(count3Div, count3);

// it will stop when minutes are equal to 13
if (count.getMinutes() == 13) {
  clearInterval(interval);
}

}, 1000);

div{
  width: 100%;
  height: 5em;
}

<div id="count1" style="background-color: darkmagenta; color: white;"></div>
<div id="count2" style="background-color: orange; color: white;"></div>
<div id="count3" style="background-color: whitesmoke; color: black;"></div>

这是一个例子

如何显示多个javascript倒计时器

4 个答案: