如何使用 Class 代替 ID

Question

我有這個問題的代碼如何使用 Javascript 在同一頁面中創建多個倒數計時器？ . 我不是 JavaScript 專家，所以如果有人可以幫助我使用 class 而不是 ID 重寫此代碼，以便我可以使用多個 class。

這是代碼

<div id="trip_2022-12-31"></div>
<div id="trip_2021-11-01 01:02:12"></div>
 <div id="trip_2024-01-01"></div>
 <div id="trip_2023-02-01"></div>
 <div id="trip_2023-01-04"></div>
   
    <script>
        function TimeRemaining(){
   var els = document.querySelectorAll('[id^="trip_"]');
   for (var i=0; i<els.length; i++) {
     var el_id = els[i].getAttribute('id');
     var end_time = el_id.split('_')[1];
     var deadline = new Date(end_time);
     var now = new Date();
     var t = Math.floor(deadline.getTime() - now.getTime());
     var days = Math.floor(t / (1000 * 60 * 60 * 24));
     var hours = Math.floor((t % (1000 * 60 * 60 * 24))/(1000 * 60 * 60));
     var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
     var seconds = Math.floor((t % (1000 * 60)) / 1000);
     if (t < 0) {
        document.getElementById("trip_" + end_time).innerHTML = 'EXPIRED';
     }else{
        document.getElementById("trip_" + end_time).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s";
     }
   }
}

function StartTimeRemaining(){
    TimeRemaining();
    setInterval(function(){
        TimeRemaining();
    }, 1000)
}


StartTimeRemaining();
    </script>

Answer 1

        <div class="trip_2022-12-31"></div>
        <div class="trip_2021-11-01 01:02:12">
    </div>
         <div class="trip_2024-01-01"></div>
         <div class="trip_2023-02-01"></div>
         <div class="trip_2023-01-04"></div>
        
    <script>
function TimeRemaining() {
  var els = [...document.querySelectorAll('[class^="trip_"]')];
  els.map(el => {
    var end_time = el.className.split("_")[1]
    var deadline = new Date(end_time);
    var now = new Date();
    var t = Math.floor(deadline.getTime() - now.getTime());
    var days = Math.floor(t / (1000 * 60 * 60 * 24));
    var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((t % (1000 * 60)) / 1000);
    if (t < 0) {
      document.getElementsByClassName("trip_" + end_time)[0].innerText = 'EXPIRED';
    } else {
      document.getElementsByClassName("trip_" + end_time)[0].innerText = days + "d " + hours + "h " + minutes + "m " + seconds + "s";
    }
  })
  window.requestAnimationFrame(TimeRemaining);
}

function StartTimeRemaining() {
  TimeRemaining();
  window.requestAnimationFrame(TimeRemaining);
}

StartTimeRemaining()


</script>

這是工作兄弟

Answer 2

我稍微更改了您的代碼。 嘗試這個：

 function TimeRemaining() { var els = [...document.querySelectorAll('[class^="trip_"]')]; els.forEach(el => { var end_time = el.className.split("_")[1] var deadline = new Date(end_time); var now = new Date(); var t = Math.floor(deadline.getTime() - now.getTime()); var days = Math.floor(t / (1000 * 60 * 60 * 24)); var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((t % (1000 * 60)) / 1000); if (t < 0) { document.getElementsByClassName("trip_" + end_time)[0].innerText = 'EXPIRED'; } else { document.getElementsByClassName("trip_" + end_time)[0].innerText = days + "d " + hours + "h " + minutes + "m " + seconds + "s"; } }) window.requestAnimationFrame(TimeRemaining); } function StartTimeRemaining() { TimeRemaining(); window.requestAnimationFrame(TimeRemaining); } StartTimeRemaining()

 <div class="trip_2022-12-31"></div> <div class="trip_2021-11-01 01:02:12"></div> <div class="trip_2024-01-01"></div> <div class="trip_2023-02-01"></div> <div class="trip_2023-01-04"></div><br>[Added to check expiration function] <div class="trip_2021-2-17"></div>

具體來說，我縮短了el_id ，因為它沒有太多用途，我把整個東西放在了forEach中。 我還將 getElementById 更改為getElementById getElementsByClassName(...)[0] 。 我還將innerHTML更改為innerText ，因為innerText將文本按原樣放入，並防止特殊字符出現問題。 最后，我將setTimeout更改為requestAnimationFrame ，因為這通常會盡可能頻繁地調用，而不會妨礙其他功能。 這是為了顯示盡可能接近真實的時間，因為如果頁面在半秒內加載，那么計時器將關閉半秒。

Answer 3

當您調用document.querySelectorAll('[id^="trip_"]'); 您擁有對各個DIV元素的引用，因此您無需進一步調用getElementById或getElementsByClassName - 只需使用節點列表中的引用即可。

我稍微修改了 HTML 結構，因為在我看來，使用 className 來保存日期時間信息是一個糟糕的選擇。 引入dataset屬性是為了允許在這種情況下使用任意數據。 這使得class可以自由用於其他更合適的用途。

使用dataset意識形態可以很好地擴展它，可能包括計時器實際用途的詳細信息。 下面的代碼使用data-event屬性在計時器完成時顯示該信息（或在運行時作為標題）

 document.addEventListener('DOMContentLoaded',()=>{ /* Maintain a reference to each timer activated */ let timers={}; /* Time calculation constants */ const yr=365.25; const min=1000 * 60; const hr=min * 60; const day=60 * 24; /* Find all the DIV elements that have `trip` data */ document.querySelectorAll('div[data-trip]').forEach( ( div, i )=>{ (function( trip ){ timers[i]=NaN; (function(){ /* calculate the delta between now and the date in question */ let t=Math.floor( new Date( trip ).getTime() - new Date().getTime() ); /* initialise the timer */ timers[i]=setTimeout( arguments.callee, 1000 ); /* perform the main time calculations */ let obj={ y:Math.floor( t / ( min * day * yr ) ), d:Math.floor( t / ( min * day ) ), h:Math.floor( ( t % ( min * day ) ) / hr ), m:Math.floor( ( t % hr ) / min ), s:Math.floor( ( t % min ) / 1000 ) }; /* Display the countdown */ let output=['<span>'+obj.s+'</span>secs']; if( obj.m > 0 )output.unshift('<span>'+obj.m+'</span>mins'); if( obj.h > 0 )output.unshift('<span>'+obj.h+'</span>hours'); if( obj.y > 0 ){ /* if the number of years is greater than zero - calculate remaining days */ if( obj.d > 0 )output.unshift('<span>'+Math.ceil( obj.d - ( obj.y * yr ) )+'</span>days'); output.unshift('<span>'+obj.y+'</span>yrs'); }else{ if( obj.d > 0 )output.unshift('<span>'+obj.d+'</span>days'); } div.innerHTML=output.join(', '); div.title=div.dataset.event; /* display final message and cancel timer if expired */ if( t <= 0 ){ div.innerHTML=[ 'Expired', div.dataset.event ].join( ' - ' ); div.className='expired'; /* clear the timer */ clearTimeout( timers[ i ] ); delete timers[i]; } })(); })( div.dataset.trip );// assign the trip data/date as arg to the anonymous function }); });

 .expired{color:red} div[data-trip]{font-family:monospace;font-size:1.1rem;margin:0.5rem auto;cursor:pointer;} div[data-trip] span{font-weight:bold;color:green}

 <div data-trip='2021-03-22 12:30:00' data-event='Get Covid-19 vaccination'></div> <div data-trip='2022-12-31' data-event='Go to Rouen'></div> <div data-trip='2021-12-01 01:02:12' data-event='Skiing in Verbier'></div> <div data-trip='2024-09-28' data-event='MX Des Nations'></div> <div data-trip='2026-02-06' data-event='Winter Olympics 2026 in Cortina'></div> <div data-trip='2023-01-04' data-event='World Spaghetti Day'></div> <div data-trip='2021-03-22 08:30:00' data-event='Do important stuff'></div>