カウントダウンタイマーを複数表示、出力方法を変えたい。

カウントダウンタイマーを1ページに複数表示したいのですが、PCでは正しく表示されるのですがスマホで確認すると表示されません。
原因としては時間をidにしてしまっている事だと思うので出力方法を変えたいです。
よろしくお願いいたします。

該当のソースコード

Javascript

function TimeRemaining(){
   var els = document.querySelectorAll('[id^="timer_"]');
   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("timer_" + end_time).innerHTML = '終了';
     }else{
     	document.getElementById("timer_" + end_time).innerHTML = "あと" + days + "日" + hours + "時間 " + minutes + "分" + seconds + "秒" + "まで";
     }
   }
}
function StartTimeRemaining(){
    TimeRemaining();
	setInterval(function(){
		TimeRemaining();
	}, 1000)
}

StartTimeRemaining();

HTML

<div id="timer_2021-11-01 13:05:08"></div>
<div id="timer_2021-12-31 16:18:15"></div>
<div id="timer_2021-12-31 16:18:15"></div>
<div id="timer_2022-02-02 01:40:03"></div>

実現したい出力方法

HTML

<time class="timer" datetime="2021-11-01 13:05:08"></time>
<time class="timer" datetime="2021-12-31 16:18:15"></time>
<time class="timer" datetime="2022-01-15 18:50:02"></time>
<time class="timer" datetime="2022-02-02 01:40:03"></time>

参考サイト

https://www.fixes.pub/program/4967.html

行動規範の内容に同意します

回答1件

ベストアンサー

仕様があっているかわかりませんが

javascript
1<script>
2function TimeRemaining(){
3  document.querySelectorAll('[datetime]').forEach(x=>{
4    var t = Math.floor(new Date(x.getAttribute('datetime')).getTime()-new Date().getTime());
5    var days = Math.floor(t / (1000 * 60 * 60 * 24));
6    var hours = Math.floor((t % (1000 * 60 * 60 * 24))/(1000 * 60 * 60));
7    var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
8    var seconds = Math.floor((t % (1000 * 60)) / 1000);
9    if (t < 0) {
10      x.innerHTML = '終了';
11    }else{
12      x.innerHTML = "あと" + days + "日" + hours + "時間 " + minutes + "分" + seconds + "秒" + "まで";
13    }
14  });
15}
16function StartTimeRemaining(){
17    TimeRemaining();
18    setInterval(function(){
19        TimeRemaining();
20    }, 1000)
21}
22
23StartTimeRemaining();
24</script>
25
26<time class="timer" datetime="2021-11-01 13:05:08"></time><br>
27<time class="timer" datetime="2021-12-31 16:18:15"></time><br>
28<time class="timer" datetime="2022-01-15 18:50:02"></time><br>
29<time class="timer" datetime="2022-02-02 01:40:03"></time>