大晦日までカウントダウンしてまたカウントダウンするJSコード #永遠

2024.12.18

Logging

おはようございます.大晦日までカウントダウンしてまたカウントダウンするJSコードだけではツマラナイので全て漢字に変換して表示するコードを書きました.これでもツマラナイと思う人もいると思います.

そんなに難しいコードでもないのでコードを添付します💁.

        function updateCountdown() {
            const now = new Date();
            const nextNewYear = new Date(now.getFullYear() + 1, 0, 1, 0, 0, 0); // 次の年の1月1日0時0分0秒
            const diff = nextNewYear - now; // ミリ秒差

            if (diff > 0) {
                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);

                // 表示を更新
                document.getElementById("countdown").innerText =
                    kanji(`${days}日 ${hours}時間 ${minutes}分 ${seconds}秒`);
            } else {
                document.getElementById("countdown").innerText = "明けましておめでとうございます!";
            }
        }

        // 初回呼び出しと1秒ごとの更新
        updateCountdown();
        setInterval(updateCountdown, 1000);
        function kanji(str){
            let oo = [{'kanji':'零'},{'kanji':'壱'},{'kanji':'弐'},{'kanji':'参'},{'kanji':'肆'},{'kanji':'伍'},{'kanji':'陸'},{'kanji':'漆'},{'kanji':'捌'},{'kanji':'玖'}];
            oo.forEach((o,index)=>{
                str = str.replace(new RegExp(index, "g"),o.kanji);
            });
            return str;
        }

もっと芸のあるカウントダウンを作ろうとするとp5jsなどのライブラリが必要になると思います.WEBサイトでパーティカルなどを行っているサイトは大体こういうライブラリを使用しています.p5jsなどを使用して昔作ってみようかななどと思ったことが有りますが、実はp5jsは一度も触ったことがないです.

明日へ続く

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

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

OFUSEで応援を送る

タグ

```, カウント, カウントダウン, コード, ツマラナイ, パーティカル, ライブラリ, , 全て漢字, 初回呼び出し, , 大晦日, 月日時分秒, 漆#, 玖#, , 秒ごと, 肆#, , 陸#,

お店のホームページ(サイト)の作り方その参

2022.03.05

Logging

お店のホームページ(サイト)の作り方その参は下記の動画を見ていただければお店のホームページは完成できます。わからない事があれば知恵袋などで質問するとひとりで出来上がります。ちなみに動画では500円代をおすすめしていますが、100円代のサーバでも問題なく機能します、違いはデーターベースというものを使用するかどうかです。今回は静的なサイトなので100円代で十分です。

これでお店のホームページ(サイト)の作り方その参は終了します。もし自分で出来なさそうというのであればクラウドワークスなどでサーバーの設定、ファイルのアップロード、ドメインの登録などを代行でしてもらうのも一つの手なのかもしれません。値段は3万ぐらいが相場かと思います。また完了後、かならずサーバーのパスワードの設定を変更してください!。

さくらサーバー&ドメイン新規登録の手順を解説
さくらサーバーでサーバーとドメインを紐付けする方法
【さくらのレンタルサーバ】Let's Encrypt(無料SSL)を設定してみよう
【FTPツール】で大量ファイルをサクッとサーバーUPしよう!FileZillaが便利!

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

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

OFUSEで応援を送る

タグ

100, , 500, アップロード, おすすめ, お店, クラウド, これ, サーバ, サーバー, サイト, データー, ドメイン, パスワード, ひとり, ファイル, ベース, ホームページ, もの, ワークス, 一つ, , 下記, , 今回, 代行, 作り方, 使用, 値段, 動画, , 変更, 完了, 完成, , 機能, 登録, 相場, 知恵, 終了, 自分, 設定, 質問, 違い,