カウントダウンタイマー実践

カウントダウンタイマー

スクリプトの作り方

現在の日時と、知りたい先の日時を取得する⇒new Date();
現在と未来の差を求めて、あと未来まで、何時間あるのか調べる⇒getTime()
この数字の羅列は1970年1月1日からのミリ秒で示されている。
差で出たミリ秒を、日時になおす。
0～9までの数字には、前に”0”を付け足す。
if文でカウントダウンを表示。elseでカウント終了を表示。

【ミリ秒を日時に直す計算式】

残り「時間」 = （残り秒数÷3600）の整数部分
残り「分」 = （（残り秒数－（残り「時間」× 3600））÷ 60））の整数部分
残り「秒」 = 残り秒数－（残り「時間」× 3600）－（残り「分」× 60）

【 if文】

if(time1<10){time1 = '0' + time1;}


<script>
window.onload=function countDown(){
	setInterval(function countDown(){
		//自分で記述する
		y = 2022;//年
		m = 2;//月
		d = 27;//日

		xday = new Date(y,m-1,d,00,00,00);
		today = new Date();
		setTime = xday.getTime() - today.getTime();

		//ミリ秒を日時に変換
		days = Math.floor(setTime / 86400000);
		jikan = Math.floor((setTime % 86400000) / 3600000);
		hunn = Math.floor(((setTime % 86400000) / 60000) % 60);
		byou = Math.floor(((setTime % 86400000) / 1000) % 60 % 60);
		miri = Math.floor((setTime % 86400000) % 60 % 60 % 100);

		//0-9には0を付け足す
		if(jikan<10){jikan = '0' + jikan;}
		if(hunn<10){hunn = '0' + hunn;}
		if(byou<10){byou = '0' + byou;}
		if(miri<10){miri = '0' + miri;}

		//出力
		if(xday > today){
			var str = "残りあと"+"<span>"+days+"</span>"+"日"+"と"+"<span>"+jikan+"</span>"+"："+"<span>"+hunn+"</span>"+"："+"<span>"+byou+"</span>"+"："+"<span>"+miri+"</span>"+"<br />";
			document.getElementById("countDown").innerHTML=str;
			}else{
				var str = "販売は終了致しました";
				document.getElementById("countDown").innerHTML=str;
				location.href = 'https://tenpo.riekibaizo.com/mendankikaku/count-off';
		}
		
	},10);
}
</script>

カウントダウンの.JSファイル

使い方は、表示したい場所に
<div id="countDown"></div>
と記述するだけ。もちろん、head部分に外部リンクで .js　ファイルをリンクさせておく。

表示例

▲このページのTOPに戻る▲

【サンプル】カウントダウン実践

カウントダウンタイマー

スクリプトの作り方

表示例