如何制作多个倒计时器？

Question

这就是我所拥有的。

有些人建议我使用class代替id，这是真的。

另一方面，如果我使用一个课程，我不知道当我尝试它时getelementsbyclassname是否适用于becoz。当我运行我的html页面时，甚至没有一个时钟弹出。

// Set the date we're counting down to 			
var countDownDate = new Date("Sep 5, 2018 15:37:25").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 = "EXPIRED";
  }
}, 1000);

p {
  text-align: center;
  font-size: 60px;
}

<p Id="demo"></p>
<p Id="demo"></p>
<p Id="demo"></p>

Answer 1

在按类处理元素时，您可能需要使用：

• Document.getElementsByClassName("selector") ^MDN 或
• ParentNode.querySelectorAll(".selector") ^MDN

比你需要遍历返回的NodeList集合并分配值。

在 ES6 中，您可以使用

[...myNodeList].forEach( node => {
    /* do something to node */
});

在旧的JS中看起来像：

for ( var i = 0; i < myNodeList.length; i++ ) {
   /* do something to myNodeList[i] */
}

// Set the date we're counting down to 			
var countDownDate = new Date("Sep 5, 2018 15:37:25").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 dif = countDownDate - now;
  // Time calculations for days, hours, minutes and seconds 				
  var d = Math.floor(dif / (1000 * 60 * 60 * 24));
  var h = Math.floor((dif % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var m = Math.floor((dif % (1000 * 60 * 60)) / (1000 * 60));
  var s = Math.floor((dif % (1000 * 60)) / 1000);
  
  var formatted = d + "d " + h + "h " + m + "m " + s + "s ";
  // Output the result in an element with class="demo" 				
  [...document.querySelectorAll(".demo")].forEach(el => el.innerHTML = dif < 0 ? "EXPIRED" : formatted );
    
  // If the count down is over, stop the interval			
  if (dif < 0) {
    clearInterval(x);
  }
}, 1000);

<p class="demo"></p>
<p class="demo"></p>
<p class="demo"></p>

Answer 2

首先，您的HTML无效，import React from 'react' import { Text } from 'react-native'; export default class B extends React.Component{ static instance = null; static getInstance(){ return B.constructor.instance; } title = 'I\'m B'; componentWillMount(){ B.constructor.instance = this; } render(){ return <Text>I'm B</Text> } } 应该是唯一的。我们将项目更改为id：

class

其次，它是<p class="demo"></p> <p class="demo"></p> <p class="demo"></p> ，而不是getElementsByClassName。 Javascript区分大小写。

现在，让我们看看如何使用它：

getelementsbyclassname