画像のタイマーがうまくいきません

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
htmlでタイマーを使い画像の切り替えを行いたい。

<!--①-->

	<div id="event">
		<ul>
           	<li><a href="#"><img src="images/a1.jpg"></a></li>
            <li><a href="#"><img src="images/a2.jpg"></a></li>
        </ul> 
    </div>
<!--②-->
	<div id="special">
    	<ul>
        	<li><a href="#"><img src="images/b1.jpg"></a></li>
            <li><a href="#"><img src="images/b2.jpg"></a></li>
        </ul>
   	</div>

<!--時間外-->
	<div id="usually">
    	<ul>
           	<li><a href="#"><img src="images/c1.jpg"></a></li>
            <li><a href="#"><img src="images/c2.jpg"></a></li>
        </ul>           
	</div>
    
   

<script> // イベントの開始、終了設定 var startday = new Date('2020/11/02 10:00:00'); var midday = new Date('2020/12/24 17:00:00'); var endday = new Date('2020/12/26 01:59:59'); var today = new Date(); if ( startday < today && today < midday ){ document.getElementById("event").style.display="block"; document.getElementById("special").style.display="none"; document.getElementById("usually").style.display="none"; } else if ( midday < today && today < endday ) { document.getElementById("event").style.display="none"; document.getElementById("special").style.display="block"; document.getElementById("usually").style.display="none"; }else{ document.getElementById("event").style.display="none"; document.getElementById("special").style.display="none"; document.getElementById("usually").style.display="block"; } </script>

試したこと

４つの切り替えにしたいのですがうまくできません。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

Answer 1

そもそもタイマーがつかわれてませんね
setIntervalなどで定期的にチェックして下さい
event/special/usuallyのタグも変数に受けたほうが見やすくなります

Comments

[yambejp]

ちなみにnew Date()で得られる時間はクライアントPCの時間なので
PC側の時計がずれていれば正しい挙動になりません