HPにカウントダウンを表示させる

　_{≪くれきん≫}

前回は現在時刻の表示方法を勉強したので、今回はカウントダウンの表示方法です。　

※受付を開始しました

カウントダウンをスタート (^^)/

【 受付終了まで5時間30分15秒 】

↓

【 受付を終了いたしました 】

このように表示する場合は下記のHTMLとスクリプトをコピペして下さい。ダブルクリックで全て選択できます。(スマホの場合は2回タップしてから1回タップ)

<p><FONT color="#00FF00">※受付を開始しました<br />カウントダウンをスタート (^^)/</FONT></p>
<div id="countOutput" style="color:#FF00FF;"></div>
<script>
function dateCounter() {
 
    var timer = setInterval(function() {
    //現在の日時取得
    var nowDate = new Date();
    //カウントダウンしたい日を設定
    var anyDate = new Date("2021-07-15T23:59:56+09:00");
    //日数を計算
    var daysBetween = Math.ceil((anyDate - nowDate)/(1000*60*60*24));
    var ms = (anyDate - nowDate);
    if (ms >= 0) {
        //時間を取得
        var h = Math.floor(ms / 3600000);
        var _h = h % 24;
        //分を取得
        var m = Math.floor((ms - h * 3600000) / 60000);
        //秒を取得
        var s = Math.round((ms - h * 3600000 - m * 60000) / 1000);
 
        //HTML上に出力
        document.getElementById("countOutput").innerHTML ="【 受付終了まで" +_h + "時間" + m + "分" +s + "秒 】";
 
        if ((h == 0) && (m == 0) && (s == 0)) {
        clearInterval(timer);
        document.getElementById("countOutput").innerHTML = "【 受付を終了いたしました 】";
        }
    }else{
        document.getElementById("countOutput").innerHTML = "【 受付を終了いたしました 】";
    }
    }, 1000);
}
dateCounter();
</script>

１行目の文章は自由に変更して下さい。　10行目の日付時間は2021年7月15日24時に終了するように設定しています。日付時間は変更して下さい。最後の[56+09:00]を変更すると正しく表示されないので注意してください。　25、29、32行目の文章は自由に変更して下さい。