>

14 카운트 다운을 표시하고 싶습니다 (바람직한 p  HTML 페이지의 요소)를 단일 HTML 페이지에 추가하십시오. JavaScript에 대해 전혀 몰라 w3schools에서 카운트 다운 스크립트를 가져 왔습니다. 어떻게 든 웹을 검색하여 타이머를 두 자리 숫자로 표시 할 수 있습니다.

코드는 다음과 같습니다 (업데이트!) :

// 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 번 곱하려고 했으므로 동일한 카운트 다운이 14 번 나타납니다.

첫 번째 줄에 14 개의 다른 날짜를 곱하여 14 개의 다른 p 에서 계산할 수있는 방법이 있습니까?  ID가 14 개인 요소? 예 :

<p class="date1" >show timer1</p>
<p class="date2" >show timer2</p>
<p class="..." >...</p>
<p class="date14" >show timer14</p>

편집 : 또한 나는 두 개의 추가 p 를 가질 수있는 방법을 알고 싶습니다

와 같은 요소 출력
<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>

"on air"와 같은 표시기를 갖습니다. 감사합니다!

2017 년 11 월 1 일 수정

이 기능이 특정 기능에서 작동하지 않는 이유를 모르겠습니다 :

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

HTML 문서에서 날짜 + 인덱스 p timerend가 추가 될 때 제거되는 클래스가 있습니다. 내가 + 를 추가하면 = 전에 clearInterval(x) 후 첫 줄에  이전 클래스는 유지되지만 새 클래스는 1 초마다 추가됩니다. 물론 한 번만 추가하고 싶습니다. 내가 + 를 넣지 않으면 = 전에 그 줄에서 이전 수업은 물론 제거됩니다. Js를 배우기 시작한 이래로 여기서 무슨 일이 일어나고 있는지 이해하고 싶습니다. 내가 놓친 게 무엇입니까? 난 그냥 모든 p 에 클래스를 추가하고 싶습니다  타이머가 종료되면 색상이 변경됩니다. 그것은 작동하지만 색인 된 p 클래스에서 넣은 다른 모든 형식을 제거합니다. 있습니다.

HTML

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

CSS에서 .dates 에 패딩 등을 넣었습니다. . 수업을 추가하고 원본을 유지하는 방법에 대해 읽었지만 솔루션을 분명히 이해할 수는 없습니다.


  • 답변 # 1

    코드를 "곱하기"위해 배열과 함수를 함께 사용할 수 있습니다.

    배열에서 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>
    
    

  • 답변 # 2

    여기에 8 개의 타이머가있는데모가 있습니다

    요소 노드countDownDate 를 허용하는 메소드로 논리를 리팩터링하십시오.

    푸치 위즈  요소 자체의밀리 초 값

    타이머를 반복하고 초기화하십시오.

    data-countDownDate
    
    
    //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);
    }
    
    

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

  • 이전 c - h 파일로 선언 된 전역 및 액세스
  • 다음 amazon web services - 동일한 호스트의 다른 포트를 다른 인스턴스로 라우팅