function getImg(num) {
var 數(shù)字 = String(num).split(""),
文本=“”；
for (var i = 0; i body {
背景顏色：黑色；
顏色: 黃色;
}
p {
文本對(duì)齊：居中；
字體大小：40px；
}
h1.u-中心{
字體系列：襯線體；
顯示：塊；
字體大?。?em；
頂部邊距：0.10em；
邊距-底部：0.67em；
文本對(duì)齊：居中；
文本裝飾：下劃線；
字體粗細(xì)：粗體；
顏色：#254441；
字體樣式：斜體；
}
小時(shí){
顯示：塊；
文本對(duì)齊：居中；
寬度：75%；
邊框樣式：內(nèi)嵌；
邊框?qū)挾龋?px；
邊框顏色：#ff5f04；
}
.父級(jí){
位置：相對(duì)；
頂部：0；
左：0；
}
.響應(yīng)式{
最大寬度：200px；
寬度：25%；
高度：自動(dòng)；
}
.responsive1 {
最大寬度：400px；
寬度：40%；
高度：自動(dòng)；
}
。容器 {
位置：相對(duì)；
寬度：100%；
}
.imageOne {
寬度：40%；
變換：翻譯（74%，00%）；
}
.imageTwo {
位置：絕對(duì)；
頂部：50%；
左：50%；
變換：翻譯（-40%，-50%）；
寬度：13%；
高度：自動(dòng)；
}
.image2 {
最大寬度：150px；
寬度：40%；
高度：自動(dòng)；
}
.image3 {
最大寬度：400px；
寬度：100%；
高度：自動(dòng)；
}
div.倒計(jì)時(shí) {
位置：相對(duì)；
顯示：塊；
}</pre>
圖像倒計(jì)時(shí)
<hr class="1">
<p 對(duì)齊=“中心”>
<img class="responsive" src="https://www.okoutdoors.com/img/catandmoonr.jpg" alt="快樂(lè)">
<img class="responsive1" src="https://www.okoutdoors.com/img/hallo_spooky.jpg" alt="萬(wàn)圣節(jié)快樂(lè)">
;
</p>
<p 對(duì)齊=“中心”>
<img class="responsive1" src="https://www.okoutdoors.com/img/darkjack.gif" style="width:25%" alt="Spooky">
</p>
<img class="imageOne" src="https://okoutdoors.com/img/halloween-before.gif">
<div class="imageTwo" id="countdown"></div>
</div></pre>
<p><br />></p>
1
0
0
P粉668113768
全部回復(fù)(1)
您可以使用類(lèi)和數(shù)據(jù)屬性而不是硬編碼的ID。
const countdown = document.querySelector('.countdown');
const numberToImgHtml = (n) => n.toString()
.padStart(2, '0')
.split('')
.map(d => `<img alt="$377j5v51b" src="https://okoutdoors.com/img/$377j5v51b.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>
