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
-
답변 # 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>
관련 자료
- javascript - html 페이지의 mqtt 클라이언트
- javascript - HTML JS로 페이지 인쇄
- HTML 페이지로 데이터 전달 (ionic/angular)
- crystal reports - 다른 파일에서 HTML 페이지를 편집 할 수 있습니까?
- go - 구문 분석 한 HTML 템플릿이 작동하지 않는 이유는 무엇입니까?
- HTML에 여러 인용문을 추가하는 방법은 무엇입니까?
- javascript - 자체 CSS Angular를 사용하여 서비스에서 HTML 페이지로드
- css - Bootstrap4 HTML 페이지가 모바일에서 너무 큽니다
- javascript - Angular 9에서 HTML 페이지를 A4 크기로 분할하는 방법
- angular - HTML 페이지에서 구성 요소 인터리빙
- javascript - 캔버스 모양의 원을 만드는 방법?
- html - 자바 스크립트를 사용하여 이미지를 텍스트로 변환하는 방법
- html - JavaScript를 사용하여 활성 클래스 교체가 제대로 작동하지 않음
- javascript - Div는 JQuery 숨기기 기능으로 숨기지 않습니다
- javascript - 클릭 한 버튼에 클래스를 추가하고 이전에 클릭 한 버튼에 클래스를 제거하는 방법
- html - 클라이언트 측 자바 스크립트 파일 세트 양식 태그 속성
- html - 공백을 제거하고 자바 스크립트로 단어 사이에 대시 추가
- html로 자바 스크립트 인쇄 기능
- html - 자바 스크립트에서 키보드 키로 입력 필드를 전환하는 방법은 무엇입니까?
- javascript - 데이터 바인딩으로 검색하는 td 값에서 특정 데이터 나열
코드를 "곱하기"위해 배열과 함수를 함께 사용할 수 있습니다.
배열에서 14 개의 countDownDates를 정의합니다.
예를 들어 for 루프를 사용하여이 배열을 반복합니다
현재 countDownDate 정보를 코드에서 처리하는 방식과 같이 단일 카운트 다운을 처리하는 함수에 전달합니다.
예는 다음과 같습니다.