Bagaimana untuk menukar imej dalam undur

Question

Saya cuba menjadikan kira detik ini memaparkan imej nombor dalam masa yang tinggal. dipaku ia. Saya cuba mendapatkannya untuk meletakkan nombor ini pada imej. Akhirnya berjaya juga. Sekarang saya cuba untuk membuat nombor berhenti ditunjukkan dan menayangkannya pada imej dengan 1 hari lagi untuk ditukar. gagal! Saya juga mahu ia menukar imej apabila kira detik mencapai tarikh tamat (dalam kes ini imej halloween gembira). gagal! Perkara lain ialah kira detik perlu menukar imej semula pada hari berikutnya. Inilah keadaan saya sekarang. Saya tidak hampir untuk mendapatkan imej untuk berubah.

function getImg(num) {
  var digit = String(bilangan).split(""),
    teks = "";
  untuk (var i = 0; i < digits.length; i++) {
    teks += '<img alt="' + digit[i] + '" src="https://okoutdoors.com/img/' + digit[i] + '.png" class="image2"/> ;';
  }
  kembalikan teks;
}

CountdownTimer('10/31/2023 10:1 AM', 'countdown');
// CountDownTimer('02/20/2024 10:1 AM', 'newcountdown');

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

  var _saat = 1000;
  var _minit = _saat * 60;
  var _jam = _minit * 60;
  var _hari = _jam * 24;
  pemasa var;

  function showRemaining() {
    var now = new Date();
    var jarak = tamat - sekarang;
    jika (jarak < 0) {

      clearInterval(pemasa);
      document.getElementById(id).innerHTML = '已过期！';

      kembali;
    }
    var hari = Math.floor(jarak / _hari);
    var jam = Math.floor((jarak % _hari) / _jam);
    var minit = Math.floor((jarak % _jam) / _minit);
    var saat = Math.floor((jarak % _minit) / _saat);

    document.getElementById(id).innerHTML = getImg(days) + ' '
    /* + getImg(jam) + 'jam'     
                 + getImg(minit) + 'minit'  
                 + getImg(saat) + 'saat';  */
  }

  pemasa = setInterval(showRemaining, 1000);
}

body {
  warna latar belakang: hitam;
  warna: kuning;
}

p {
  text-align: tengah;
  saiz fon: 40px;
}

h1.u-center {
  font-family: serif;
  paparan: blok;
  saiz fon: 2em;
  jidar atas: 0.10em;
  jidar bawah: 0.67em;
  text-align: tengah;
  text-decoration: garis bawah;
  font-weight: tebal;
  warna: #254441;
  gaya fon: condong;
}

jam {
  paparan: blok;
  text-align: tengah;
  lebar: 75%;
  gaya sempadan: inset;
  lebar sempadan: 2px;
  warna sempadan: #ff5f04;
}

.parent {
  kedudukan: relatif;
  atas: 0;
  kiri: 0;
}

.responsive {
  lebar maksimum: 200px;
  lebar: 25%;
  ketinggian: auto;
}

.responsive1 {
  lebar maksimum: 400px;
  lebar: 40%;
  ketinggian: auto;
}

.bekas {
  kedudukan: relatif;
  lebar: 100%;
}

.imageOne {
  lebar: 40%;
  mengubah: terjemah(74%, 00%);
}

.imageTwo {
  jawatan: mutlak;
  atas: 50%;
  kiri: 50%;
  mengubah: terjemah(-40%, -50%);
  lebar: 13%;
  ketinggian: auto;
}

.imej2 {
  lebar maksimum: 150px;
  lebar: 40%;
  ketinggian: auto;
}

.imej3 {
  lebar maksimum: 400px;
  lebar: 100%;
  ketinggian: auto;
}

div.countdown {
  kedudukan: relatif;
  paparan: blok;
}

<h1 class="u-center">Image Countdown</h1>

<hr class="1">

<p align="center">
  <img class="responsive" src="https://www.okoutdoors.com/img/catandmoonr.jpg" alt="Happy">
  <img class="responsive1" src="https://www.okoutdoors.com/img/hallo_spooky.jpg" alt="Selamat Halloween">
  <img class="responsive" src="https://www.okoutdoors.com/img/catandmoonl.jpg" alt="Halloween">
</p>

<p align="center">
  <img class="responsive1" src="https://www.okoutdoors.com/img/darkjack.gif" style="width:25%" alt="Spooky">
</p>

<!-- <div id="newcountdown"></div> -->

<div class="container">
  <img class="imageOne" src="https://okoutdoors.com/img/halloween-before.gif">
  <div class="imageTwo" id="countdown"></div>
</div>

Answer 1

Anda boleh menggunakan kelas dan atribut data dan bukannya ID berkod keras.

const countdown = document.querySelector('.countdown');

const numberToImgHtml = (n) => n.toString()
  .padStart(2, '0')
  .split('')
  .map(d => `<img alt="${d}" src="https://okoutdoors.com/img/${d}.png" />`)
  .join('');

CountDownTimer(countdown, '2023-10-31T00:00:00Z');

function CountDownTimer(el, targetTimestamp) {
  const endDate = new Date(targetTimestamp);
  
  const daysEl = el.querySelector('[data-unit="days"]');
  const hoursEl = el.querySelector('[data-unit="hours"]');
  const minutesEl = el.querySelector('[data-unit="minutes"]');
  const secondsEl = el.querySelector('[data-unit="seconds"]');

  const _second = 1000;
  const _minute = _second * 60;
  const _hour = _minute * 60;
  const _day = _hour * 24;
  let intervalId;

  function showRemaining() {
    const delta = endDate - new Date();
    if (delta < 0) {
      clearInterval(intervalId);
      el.innerHTML = 'EXPIRED!';
      return;
    }
    const days = Math.floor(delta / _day);
    const hours = Math.floor((delta % _day) / _hour);
    const minutes = Math.floor((delta % _hour) / _minute);
    const seconds = Math.floor((delta % _minute) / _second);
        
    daysEl.innerHTML = numberToImgHtml(days);
    hoursEl.innerHTML = numberToImgHtml(hours);
    minutesEl.innerHTML = numberToImgHtml(minutes);
    secondsEl.innerHTML = numberToImgHtml(seconds);
  }

  showRemaining();
  intervalId = setInterval(showRemaining, 1000);
}

html, body { width: 100%; height: 100%; padding: 0; margin: 0 }
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
}

.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background-image: url(https://okoutdoors.com/img/halloween-before.gif);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.unit {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="countdown">
  <div class="unit" data-unit="days"></div>
  <div class="unit" data-unit="hours"></div>
  <div class="unit" data-unit="minutes"></div>
  <div class="unit" data-unit="seconds"></div>
</div>