同一页面中的多个倒数计时

问题描述 投票:0回答:2
I need some help with javascript code, I try to get A code that will work for multi countdown timers at same page. I tried the code below but no success.

<div class="expirydiv">Jan 02,2019</div>
<div class="expirydiv">jun 15,2019</div>

<script>

//设置倒数日期至

      var ps = document.querySelectorAll("div.expirydiv");

      var countDownDate = new Date(ps).getTime();

//每1秒更新一次计数

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

//将结果输出到具有classname =“ expirydiv”]的元素中

for(var i=0; i<ps.length; i++){
  ps[i].innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

//如果倒数结束,请写一些文字

  if (distance < 0) {
    clearInterval(x);
    ps[i].innerHTML = "EXPIRED";
  }
  }
}, 1000);

</script>



The result of the code above appears like this: 

    NaNd NaNh NaNm NaNs
    NaNd NaNh NaNm NaNs

此代码有什么问题,我认为查询选择器无法选择div.expirydiv作为日期。

我需要一些有关JavaScript代码的帮助,我尝试获取可在同一页面上适用于多个倒数计时器的代码。我尝试了下面的代码,但没有成功。

2019年1月2日
javascript countdown
2个回答
0
投票

var countDownDate = new Date(ps).getTime();更改为var countDownDate = new Date(ps[0].innerHTML).getTime();


0
投票

© www.soinside.com 2019 - 2024. All rights reserved.