01 簡単なデジタル時計アプリの開発

2024年12月30日 20:10

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>デジタル時計</title>
    <style>
		* {
			border: none !important;
		}
	
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
        }

		.clock-container {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100vw;
			height: 100vh;
			background: rgba(255, 255, 255, 0.05);
			backdrop-filter: blur(10px);
			margin: 0;
			padding: 0;
		}

		.clock {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			height: auto;
			margin: 0;
			padding: 0;
		}

		.time {
			font-size: 10vw; /* 画面幅に合わせて拡大縮小 */
			font-weight: 300;
			color: #fff;
			text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
			letter-spacing: 0; /* 不要な文字間隔を削除 */
			text-align: center;
			font-family: 'Segoe UI', Arial, sans-serif;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.date {
			font-size: 3vw; /* 画面幅に応じて縮小 */
			color: rgba(255, 255, 255, 0.7);
			font-weight: 300;
			margin-top: 1vw; /* 日付との余白を調整 */
			font-family: 'Segoe UI', Arial, sans-serif;
			text-align: center;
		}

		.separator {
			animation: blink 1s infinite;
			margin: 0 0.5vw; /* 冒険的な文字間隔を追加 */
			font-size: inherit; /* 「:」の高さを時間文字に一致させる */
		}

        @keyframes blink {
            50% {
                opacity: 0;
            }
        }

        @media (max-width: 768px) {
            .time {
                font-size: 72px;
                letter-spacing: 2px;
            }
            .date {
                font-size: 24px;
            }
            .separator {
                width: 15px;
            }
        }

        @media (max-width: 480px) {
            .time {
                font-size: 48px;
                letter-spacing: 1px;
            }
            .date {
                font-size: 18px;
            }
            .separator {
                width: 10px;
            }
		.element-class {
			border: none !important; /* Replace .element-class with the actual class if identified */
		}
    </style>
</head>
<body>
    <div class="clock-container">
        <div class="clock">
            <div class="time" id="time">00<span class="separator">:</span>00<span class="separator">:</span>00</div>
            <div class="date" id="date">2024年12月22日 日曜日</div>
        </div>
    </div>

    <script>
        function updateClock() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            
            const timeDisplay = document.getElementById('time');
            timeDisplay.innerHTML = `${hours}<span class="separator">:</span>${minutes}<span class="separator">:</span>${seconds}`;

            const dateDisplay = document.getElementById('date');
            const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
            const dateStr = now.toLocaleDateString('ja-JP', options);
            dateDisplay.textContent = dateStr;
        }

        // 初期表示
        updateClock();
        
        // 1秒ごとに更新
        setInterval(updateClock, 1000);
    </script>
</body>
</html>

01 簡単なデジタル時計アプリの開発

いいなと思ったら応援しよう！