skip to Main Content

I was trying to get this countdown to show the numbers in the time left in images. GOT IT. I was trying to get it to put said numbers over an image. FINALLY GOT IT. Now I am trying to get the numbers to stop and showing and change the image they are projecting on to change to a 1 day left image. FAILED! I also want it to change the image (in this case to) a Happy Halloween image when the countdown reaches the date it ends. FAILED! One other thing is the countdown needs to change images 1 more time the day after. Here’s what I got so far. I have not even come close to getting the images to change.

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

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

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

  var _second = 1000;
  var _minute = _second * 60;
  var _hour = _minute * 60;
  var _day = _hour * 24;
  var timer;

  function showRemaining() {
    var now = new Date();
    var distance = end - now;
    if (distance < 0) {

      clearInterval(timer);
      document.getElementById(id).innerHTML = 'EXPIRED!';

      return;
    }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);

    document.getElementById(id).innerHTML = getImg(days) + ' '
    /*           + getImg(hours) + 'hrs '     
                 + getImg(minutes) + 'mins '  
                 + getImg(seconds) + 'secs';  */
  }

  timer = setInterval(showRemaining, 1000);
}
body {
  background-color: black;
  color: yellow;
}

p {
  text-align: center;
  font-size: 40px;
}

h1.u-center {
  font-family: serif;
  display: block;
  font-size: 2em;
  margin-top: 0.10em;
  margin-bottom: 0.67em;
  text-align: center;
  text-decoration: underline;
  font-weight: bold;
  color: #254441;
  font-style: italic;
}

hr {
  display: block;
  text-align: center;
  width: 75%;
  border-style: inset;
  border-width: 2px;
  border-color: #ff5f04;
}

.parent {
  position: relative;
  top: 0;
  left: 0;
}

.responsive {
  max-width: 200px;
  width: 25%;
  height: auto;
}

.responsive1 {
  max-width: 400px;
  width: 40%;
  height: auto;
}

.container {
  position: relative;
  width: 100%;
}

.imageOne {
  width: 40%;
  transform: translate(74%, 00%);
}

.imageTwo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  width: 13%;
  height: auto;
}

.image2 {
  max-width: 150px;
  width: 40%;
  height: auto;
}

.image3 {
  max-width: 400px;
  width: 100%;
  height: auto;
}

div.countdown {
  position: relative;
  display: block;
}
<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="Happy 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>

2

Answers


  1. You could use classes and data attributes rather than hard-coded IDs.

    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>
    Login or Signup to reply.
  2. #countdown {
       font-size: 25px;
       text-align: center;
    }
    
    if (days > 0) {
        document.getElementById(id).innerHTML = getImg(days);
    
    } else {
        document.getElementById(id).innerHTML = 'EXPIRED!';
        document.getElementById('imageOne').src = 'day-after-image.jpg';
    }
    
    

    This js code add after
    document.getElementById(id).innerHTML = getImg(days) + ‘ ‘

    So that its work in if day will be 0 so you have show to expired! And also change img

    Chcek the perview
    https://codepen.io/yashborda123/pen/dywbKLz

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search