Question

我想在一个HTML页面上显示14个倒计时（最好是我的HTML文档中的普通object SpatialEncoders { implicit def MapEncoder: Encoder[Map[String, Any]]= Encoders.kryo[Map[String, Any]] implicit def GeomEncoder: Encoder[Geom] = Encoders.kryo[Geom] implicit def SparkSQLGeometryEncoder: Encoder[SparkSQLGeometry]= Encoders.kryo[SparkSQLGeometry] }元素）。我对JavaScript一无所知所以我从w3schools拿了一个倒计时脚本。工作正常，不知怎的，我甚至设法通过搜索网页如何显示计时器两位数。

这是代码（更新！）：

我尝试将第一行代码更改为特定的未来日期，将脚本完全增加14倍 - 因此相同的倒计时显示14次。

有没有办法将第一行以某种方式相乘14次才能有14个不同的特定日期从14个不同的// defining countDownDates as an empty array : var countDownDates = []; // adding any count down date to your array : countDownDates.push(new Date("Oct 22, 2017 14:00:00").getTime()); countDownDates.push(new Date("Oct 23, 2017 14:00:00").getTime()); countDownDates.push(new Date("Oct 24, 2017 08:00:00").getTime()); countDownDates.push(new Date("Oct 25, 2017 08:00:00").getTime()); countDownDates.push(new Date("Oct 24, 2017 08:00:00").getTime()); countDownDates.push(new Date("Oct 25, 2017 08:00:00").getTime()); countDownDates.push(new Date("Oct 26, 2017 02:00:00").getTime()); countDownDates.push(new Date("Oct 27, 2017 02:00:00").getTime()); countDownDates.push(new Date("Oct 27, 2017 20:00:00").getTime()); countDownDates.push(new Date("Oct 29, 2017 02:00:00").getTime()); countDownDates.push(new Date("Oct 27, 2017 20:00:00").getTime()); countDownDates.push(new Date("Oct 29, 2017 02:00:00").getTime()); countDownDates.push(new Date("Oct 29, 2017 19:00:00").getTime()); countDownDates.push(new Date("Oct 30, 2017 19:00:00").getTime()); // calling an init function that will build the HTML needed for every count down init(countDownDates); // looping through your array of countDownDates for (var i=0;i<countDownDates.length;i++) { // calling the countdown function, pass it the array and the current version of i as parameters countDown(countDownDates, i); } /* adds, to the document, a p element for each entry in the countDownDates array */ function init(countDownDates) { var timersDiv = document.getElementById("timers"); var dateElement; for (var i=0;i<countDownDates.length;i++) { dateElement = document.createElement("p"); dateElement.id = "date" + i; timersDiv.appendChild(dateElement); } } /* countDown function, your countDown handling code within a reusable function */ function countDown(countDownDates, index) { var x = setInterval(function() { var now, distance, days, hours, minutes, seconds, x; now = new Date().getTime(); distance = countDownDates[index] - now; // Time calculations for days, hours, minutes and seconds days = Math.floor(distance / (1000 * 60 * 60 * 24)); hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display days, hours, minutes and seconds in 2 digits if < 10 if((days+"").length === 1){ days = "0"+days; } if((hours+"").length === 1){ hours = "0"+hours; } if((minutes+"").length === 1){ minutes = "0"+minutes; } if((seconds+"").length === 1){ seconds = "0"+seconds; } // Display the result in the element with id date0, date1, etc. document.getElementById("date" + index).innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds + ""; // If the count down is finished, write some text and add css class to change ended timers color if (distance < 0) { clearInterval(x); document.getElementById("date" + index).className = "timerend"; document.getElementById("date" + index).innerHTML = "00:00:00:00"; } }, 1000); }元素中计算14个ID？ e.g。

编辑：另外我想知道如何再增加两个show timer1 show timer2 ... show timer14元素输出，如

...有类似“播出”之类的指标。谢谢！

编辑2017年11月1日

我不明白为什么这不适用于特定的功能：

<p class="online_date0" >show text "This countdown is running right now"</p>
<p class="offline_date0 >show text "This countdown is not running at the moment</p>

在HTML文档中，date + index if (distance < 0) { clearInterval(x); document.getElementById("date" + index).className = "timerend"; document.getElementById("outofdate" + index).className = "timerend"; document.getElementById("date" + index).innerHTML = "00:00:00:00";有一个类，在添加timerend时会删除它。如果我在p之后的+之前在=之前添加了clearInterval(x)，那么旧类会每秒添加一次。我当然只想添加一次。如果我没有在+之前放置=，那么旧课程当然会被删除。自从我开始学习Js后，我想了解这里发生了什么。我错过了什么？我只想为每个带有索引ID的p添加一个类，以便在计时器结束时更改颜色。它可以工作，但是它删除了我在索引p所拥有的类中放置的所有其他格式。

HTML

<p id="date0" class="dates"></p>

在CSS中，我在.dates中添加了填充等。我已经阅读过关于添加类和保留原文的内容，但显然无法理解解决方案。

Answer 1

这是一个包含8个计时器的演示

将您的逻辑重构为接受元素Node 和countDownDate
在元素本身中添加data-countDownDate 毫秒值。
迭代计时器并初始化它们。

＆＃13;

//var countDownDate = new Date("Oct 22, 2019 14:00:00").getTime();

[].slice.call( document.querySelectorAll( ".dateTimer" ) ).forEach( function( element ){
  startTimer(element, Number(element.getAttribute( "data-countDownDate" )) );
});

function startTimer(element, countDownDate) {
  // Update the count down every 1 second
  //console.log( element );
  var x = setInterval(function() {

    var now = new Date().getTime();
    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);

    if ((days + "").length === 1) {
      days = "0" + days;
    }
    if ((hours + "").length === 1) {
      hours = "0" + hours;
    }
    if ((minutes + "").length === 1) {
      minutes = "0" + minutes;
    }
    if ((seconds + "").length === 1) {
      seconds = "0" + seconds;
    }

    element.innerHTML = days + ":" + hours + ":" + minutes + ":" + seconds + "";

    // If the count down is finished, write some text 
    if (distance < 0) {
      clearInterval(x);
      element.innerHTML = "Ende!";
    }
  }, 1000);
}

＆＃13;

<p class="dateTimer" data-countDownDate="1509823808052"></p>
<p class="dateTimer" data-countDownDate="1509823818052"></p>
<p class="dateTimer" data-countDownDate="1509823828052"></p>
<p class="dateTimer" data-countDownDate="1509823838052"></p>
<p class="dateTimer" data-countDownDate="1509823848052"></p>
<p class="dateTimer" data-countDownDate="1509823858052"></p>
<p class="dateTimer" data-countDownDate="1509823868052"></p>
<p class="dateTimer" data-countDownDate="1509823878052"></p>

＆＃13;

Answer 2

要“繁殖”代码，您可以结合使用数组和函数。

在您的数组中，您将定义14个countDownDates。
您可以使用for循环遍历此数组，例如
您可以将当前的countDownDate信息传递给将处理单个倒计时的函数，就像您的代码现在处理它一样。

以下是一个例子：

// defining countDownDates as an empty array : 
var countDownDates = [];

// adding any count down date to your array : 
countDownDates.push(new Date("Oct 24, 2017 10:49:50").getTime());
countDownDates.push(new Date("Oct 24, 2017 10:49:45").getTime());
countDownDates.push(new Date("Oct 28, 2017 10:49:45").getTime());
countDownDates.push(new Date("Oct 29, 2017 10:49:45").getTime());
countDownDates.push(new Date("Oct 30, 2017 10:49:45").getTime());
countDownDates.push(new Date("Nov 1, 2017 10:49:45").getTime());
countDownDates.push(new Date("Nov 12, 2017 10:49:45").getTime());
countDownDates.push(new Date("Nov 24, 2017 10:49:45").getTime());

// calling an init function that will build the HTML needed for every count down
init(countDownDates);

// looping through your array of countDownDates
for (var i=0;i<countDownDates.length;i++) {
	// calling the countdown function, pass it the array and the current version of i as parameters 
	countDown(countDownDates, i);
}
	
/* adds, to the document, a p element for each entry in the countDownDates array */
function init(countDownDates) {    	
	var timersDiv = document.getElementById("timers");
	var dateElement;
	for (var i=0;i<countDownDates.length;i++) {    		
		dateElement = document.createElement("p");
		dateElement.id = "date" + i;
		timersDiv.appendChild(dateElement);
	}	
}    	

/* countDown function, your countDown handling code within a reusable function */
function countDown(countDownDates, index) {
	var x = setInterval(function() {
		var now, distance, days, hours, minutes, seconds, x;
		
		now = new Date().getTime();
		distance = countDownDates[index] - now;

		// Time calculations for days, hours, minutes and seconds
		days = Math.floor(distance / (1000 * 60 * 60 * 24));
		hours = Math.floor((distance % (1000 * 60 * 60 * 24)) /
		(1000 * 60 * 60));
		minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
		seconds = Math.floor((distance % (1000 * 60)) / 1000);                            

		// Display days, hours, minutes and seconds in 2 digits if < 10
		if((days+"").length === 1){
			days = "0"+days;
		}
		if((hours+"").length === 1){
			hours = "0"+hours;
		}
		if((minutes+"").length === 1){
			minutes = "0"+minutes;
		}
		if((seconds+"").length === 1){
			seconds = "0"+seconds;
		}

		// Display the result in the element with id date0, date1, etc.
		document.getElementById("date" + index).innerHTML = days + ":" +
		hours + ":"
		+ minutes + ":" + seconds + "";

		// If the count down is finished, write some text 
		if (distance < 0) {
			clearInterval(x);
			document.getElementById("date" + index).innerHTML = "Ende!";
		}
	
	}, 1000);
}

<!-- just an empty div we will add countDown elements into -->
<div id="timers">

</div>

HTML页面上的多个（14）倒计时不起作用

2 个答案: