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
You could use classes and data attributes rather than hard-coded IDs.
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