アナログ時計をTOPページに追加しました.ソースコードはこちら.

2025.03.26

Logging

おはようございます.アナログ時計をTOPページに追加しました.ソースコードはこちらに記載していきます.尚、ソースコードは生成AI、Grokを使用して制作しました.

<div class="clock">
    <div class="hand hour-hand"></div>
    <div class="hand minute-hand"></div>
    <div class="hand second-hand"></div>
    <div class="center-clock"></div>
</div>
.clock {
  /* width: 200px;
  height: 200px;
  border: 2px solid rgb(226, 226, 226); */
  border-radius: 50%;
}

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom;
  background: #333!important;
}

.hour-hand {
  width: 4px;
  height: 60px;
  background: #333!important;;
}

.minute-hand {
  width: 3px;
  height: 80px;
  background: #666!important;;
}

.second-hand {
  width: 2px;
  height: 90px;
  background: rgb(94, 93, 93)!important;;
}

.center-clock {
  width: 10px;
  height: 10px;
  background: rgb(95, 95, 95)!important;;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}
        function updateClock() {
            const now = new Date();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            // 角度の計算
            const hourDeg = (hours % 12 + minutes / 60) * 30; // 12時間で360度
            const minuteDeg = (minutes + seconds / 60) * 6; // 60分で360度
            const secondDeg = seconds * 6; // 60秒で360度

            // 針の回転
            document.querySelector('.hour-hand').style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
            document.querySelector('.minute-hand').style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;
            document.querySelector('.second-hand').style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;
        }

        // 初回実行
        updateClock();
        // 1秒ごとに更新
        setInterval(updateClock, 1000);

生成AIが最初登場した時はここまで出来なかったので一回目の指示でちゃんとしたものを制作していけるようになったというのは正直なところ驚きです.やっぱり指数関数的に人工知能は成長するのかなとたまに思うことがありますが、それと相反する思いも持っています.

相反するとは、あと5年ぐらいで人工知能も頭打ちになるじゃないかなとも思っています.

明日へ続く

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

投稿日時 2025年03月26 06:00日

タグ

```, アナログ時計, ソースコード, ところ, 人工知能, 分, 初回実行, 回転, 年, 度, 指数, 指示, 最初, 生成, 秒, 秒ごと, 角度, 計算, 針, 頭打ち,

大晦日までカウントダウンしてまたカウントダウンする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で応援を送る

投稿日時 2024年12月18 06:00日

タグ

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