【#javascript定番】日付のカウントダウンを行う

2024.07.14

Logging

おはようございます．日付のカウントダウンを行うJavaScript言語の定番プログラムコードを作りましたので公開します．昨今、生成AIを使用してこのぐらいのコードは生成出来るかと思っていたのですが、こんなコードでも手直しが必要になりました．

やはり今の生成AIは事細かい指示を出さないと上手く動かないような気がします．それはプログラミングじゃない事でもそんな感じなのかもしれません．

<h1 id="countdown" data-y="2025" data-m="07" data-d="11"></h1>
function countdown() {
    let Y = document.querySelector('#countdown').getAttribute('data-Y');
    let m = Math.floor(document.querySelector('#countdown').getAttribute('data-m')) -1;
    let d = document.querySelector('#countdown').getAttribute('data-d');
    let strCountDown = '';
    let nowDate = new Date();
    let countdownDate = new Date(Y,m,d,0,0,0);
    let distance = countdownDate.getTime() - nowDate.getTime();
    const day = Math.floor(distance / 1000 / 60 / 60 / 24);
    const hour = Math.floor(distance / 1000 / 60 / 60) % 24;
    const minute = Math.floor(distance / 1000 / 60) % 60;
    const second = Math.floor(distance / 1000) % 60;

    strCountDown = `${day}日 ${hour}:${minute}:${second}`;

    view(strCountDown);
}

setInterval(countdown, 1000);

function view(str) {
    document.querySelector('#countdown').textContent = str;
}

デモページはこちらになります．

https://zip358.com/tool/demo94

明日へ続く．

著者名  @taoka_toshiaki

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

投稿日時 2024年07月14 06:00日

タグ

countdown, countdownDate.getTime, data-y, distance, document.querySelector, floor, getAttribute, gt, hour, let, lt, minute, nowDate.getTime, querySelector, quot, second, setInterval, STR, strCountDown, textContent,