<p>我试图让这个倒计时在剩余时间中显示数字的图像。搞定了。我试图让它把这些数字放在一个图像上。终于搞定了。现在我试图让这些数字停止显示，并且将它们投影到一个剩余1天的图像上进行更改。失败了！我还希望它在倒计时达到结束日期时改变图像（在这种情况下是一个快乐的万圣节图像）。失败了！另外一件事是倒计时需要在第二天再次更改图像。这是我目前的情况。我甚至没有接近让图像改变。</p>
<p><br />></p>
function getImg(num) {
var 數字 = String(num).split(""),
文本=“”；
for (var i = 0; i ';
}
返回文本；
}
CountDownTimer('10/31/2023 10:1 AM', '倒數計時');
// CountDownTimer('02/20/2024 10:1 AM', 'newcountdown');
函數 CountDownTimer(dt, id) {
var end = new Date(dt);
var _second = 1000;
var _分鐘 = _秒 * 60;
var _小時 = _分鐘 * 60;
var _day = _hour * 24;
變數定時器；
函數顯示剩餘（）{
var now = new Date();
var距離=結束-現在；
如果（距離<0）{
清除間隔（計時器）；
document.getElementById(id).innerHTML = '已過渡！';
返回;
}
var days = Math.floor(距離 / _day);
var 小時 = Math.floor((距離 % _day) / _hour);
var 分鐘 = Math.floor((距離 % _小時) / _分鐘);
var 秒 = Math.floor((距離 % _分鐘) / _秒);
document.getElementById(id).innerHTML = getImg(天) ' '
/* getImg(小時) '小時 '
getImg(分鐘) '分鐘 '
getImg(秒) '秒'; */
}
計時器 = setInterval(showRemaining, 1000);
}</pre>
body {
背景顏色：黑色；
顏色: 黃色;
}
p {
文字對齊：居中；
字體大小：40px；
}
h1.u-中心{
字體系列：襯線體；
顯示：塊；
字體大小：2em；
上邊距：0.10em；
邊距-底部：0.67em；
文字對齊：居中；
文字裝飾：底線；
字體粗細：粗體；
顏色：#254441；
字體樣式：斜體；
}
小時{
顯示：塊；
文字對齊：居中；
寬度：75%；
邊框樣式：內嵌；
邊框寬度：2px；
邊框顏色：#ff5f04；
}
.父級{
位置：相對；
頂部：0；
左：0；
}
.響應式{
最大寬度：200px；
寬度：25%；
高度：自動；
}
.responsive1 {
最大寬度：400px；
寬度：40%；
高度：自動；
}
。容器 {
位置：相對；
寬度：100%；
}
.imageOne {
寬度：40%；
變換：翻譯（74％，00％）；
}
.imageTwo {
位置：絕對；
頂部：50%；
左：50%；
變換：翻譯（-40%，-50%）；
寬度：13%；
高度：自動；
}
.image2 {
最大寬度：150px；
寬度：40%；
高度：自動；
}
.image3 {
最大寬度：400px；
寬度：100%；
高度：自動；
}
div.倒數計時 {
位置：相對；
顯示：塊；
}</pre>
影像倒數
<hr class="1">
<p 對齊=“中心”>
<img class="responsive" src="https://www.okoutdoors.com/img/catandmoonr.jpg" alt="快樂">
<img class="responsive1" src="https://www.okoutdoors.com/img/hallo_spooky.jpg" alt="萬聖節快樂">
;
</p>
<p 對齊=“中心”>
;
</p>
<img class="imageOne" src="https://okoutdoors.com/img/halloween-before.gif">
<div class="imageTwo" id="countdown"></div>
</div></pre>
<p><br />></p>
您可以使用類別和資料屬性而不是硬編碼的ID。
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; }