我想在多個 HTML 元素上使用它，但沒有任何運氣，比如有一個倒計時到不同時間的第二個元素
因為我試圖更改第二個腳本中的所有變數名稱（更改了 HTML 元素 ID 的腳本副本，更改了變數和函式名稱）并且它沒有給出任何輸出。
就是這個
(function() {
var start = new Date;
start.setHours(15, 10, 0); // 11pm
function pad(num) {
return ("0" parseInt(num)).substr(-2);
}
function tick() {
var now = new Date;
if (now > start) { // too late, go to tomorrow
start.setDate(start.getDate() 1);
}
var remain = ((start - now) / 1000);
var hh = pad((remain / 60 / 60) % 60);
var mm = pad((remain / 60) % 60);
var ss = pad(remain % 60);
document.getElementById('time').innerHTML =
hh ":" mm ":" ss;
setTimeout(tick, 1000);
}
document.addEventListener('DOMContentLoaded', tick);
})();
</script>
uj5u.com熱心網友回復：
使它成為一個函式，找到元素然后將元素傳遞給倒數計時器，然后它會改變元素 innerHTML 等。
如果您想要不同的時間，則使用data屬性在您可以從中獲取的元素上設定引數elm.dataset.somename，請參閱檔案
function countdown(elm) {
var start = new Date;
start.setHours(elm.dataset.h || 0, elm.dataset.m || 0, elm.dataset.s || 0); // from dataset
function pad(num) {
return ("0" parseInt(num)).substr(-2);
}
function tick() {
var now = new Date;
if (now > start) { // too late, go to tomorrow
start.setDate(start.getDate() 1);
}
var remain = ((start - now) / 1000);
var hh = pad((remain / 60 / 60) % 60);
var mm = pad((remain / 60) % 60);
var ss = pad(remain % 60);
elm.innerHTML =
hh ":" mm ":" ss;
setTimeout(tick, 1000);
}
tick();
}
document.querySelectorAll('.timer').forEach(countdown)<div class="timer" data-h="1" data-m="10" data-s="0"></div>
<div class="timer" data-h="3" data-m="15" data-s="5"></div>
<div class="timer" data-h="6" data-m="20" data-s="10"></div>
<div class="timer" data-h="12" data-m="30" data-s="59"></div>uj5u.com熱心網友回復：
你可以試試 webcomponents 和 classes。您將使用相同的代碼創建獨立的塊 https://developer.mozilla.org/en-US/docs/Web/Web_Components
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/371104.html
標籤：javascript html 查询 css
上一篇：聚合來自ReactHook中多個Promise的結果
下一篇：根據偶數/奇數答案更改顏色