카운트다운에서 이미지를 변경하는 방법

Question

이 카운트다운이 남은 시간의 숫자 이미지를 표시하도록 하려고 합니다. 그것을 못 박았다. 이 숫자를 이미지에 표시하려고 합니다. 마침내 해냈습니다. 이제 숫자 표시를 중지하고 변경까지 1일 남은 이미지에 숫자를 투영하려고 합니다. 실패한! 또한 카운트다운이 종료 날짜에 도달하면 이미지를 변경하고 싶습니다(이 경우 해피 할로윈 이미지). 실패한! 또 다른 문제는 카운트다운이 다음날 이미지를 다시 변경해야 한다는 것입니다. 이것이 나의 현재 상황입니다. 나는 이미지가 바뀌는 것에 가깝지도 않습니다.

function getImg(num) {
  var 숫자 = String(num).split(""),
    텍스트 = "";
  for (var i = 0; i < digits.length; i++) {
    text += '<img alt="' + 숫자[i] + '" src="https://okoutdoors.com/img/' + 숫자[i] + '.png" class="image2"/> ;';
  }
  텍스트 반환;
}

CountDownTimer('2023년 10월 31일 오전 10:1', '카운트다운');
// CountDownTimer('2024/02/20 오전 10:1', 'newcountdown');

함수 CountDownTimer(dt, id) {
  var end = new Date(dt);

  var _second = 1000;
  var _분 = _초 * 60;
  var _시간 = _분 * 60;
  var _day = _hour * 24;
  var 타이머;

  함수 showRemaining() {
    var now = new Date();
    var 거리 = 끝 - 지금;
    if (거리 < 0) {

      ClearInterval(타이머);
      document.getElementById(id).innerHTML = '완료!';

      반품;
    }
    var days = Math.floor(거리 / _일);
    var hour = Math.floor((거리 % _day) / _hour);
    var 분 = Math.floor((거리 % _시간) / _분);
    var 초 = Math.floor((거리 % _분) / _초);

    document.getElementById(id).innerHTML = getImg(일) + ' '
    /* + getImg(시간) + '시간'     
                 + getImg(분) + '분'  
                 + getImg(초) + '초';  */
  }

  타이머 = setInterval(showRemaining, 1000);
}

본체 {
  배경색: 검정색;
  색상: 노란색;
}

피 {
  텍스트 정렬: 중앙;
  글꼴 크기: 40px;
}

h1.u-센터 {
  글꼴 모음: serif;
  디스플레이: 블록;
  글꼴 크기: 2em;
  여백 상단: 0.10em;
  여백-하단: 0.67em;
  텍스트 정렬: 가운데;
  텍스트 장식: 밑줄;
  글꼴 두께: 굵게;
  색상: #254441;
  글꼴 스타일: 기울임체;
}

시간 {
  디스플레이: 블록;
  텍스트 정렬: 중앙;
  너비: 75%;
  테두리 스타일: 삽입;
  테두리 너비: 2px;
  테두리 색상: #ff5f04;
}

.부모의 {
  위치: 상대;
  상단: 0;
  왼쪽: 0;
}

.반응형 {
  최대 너비: 200px;
  너비: 25%;
  높이: 자동;
}

.반응형1 {
  최대 너비: 400px;
  너비: 40%;
  높이: 자동;
}

.컨테이너 {
  위치: 상대;
  너비: 100%;
}

.imageOne {
  너비: 40%;
  변환: 변환(74%, 00%);
}

.imageTwo {
  위치: 절대;
  최고: 50%;
  왼쪽: 50%;
  변환: 변환(-40%, -50%);
  너비: 13%;
  높이: 자동;
}

.image2 {
  최대 너비: 150px;
  너비: 40%;
  높이: 자동;
}

.image3 {
  최대 너비: 400px;
  너비: 100%;
  높이: 자동;
}

div.카운트다운 {
  위치: 상대;
  디스플레이: 블록;
}

이미지 카운트다운




  
  
  



  





  
  

Answer 1

하드코딩된 ID 대신 클래스 및 데이터 속성을 사용할 수 있습니다.

으아악 으아악 으아악