普通の時計です。変更、追加、デザイン等ご自由にどうぞ。コピー&ペーストOK！

画像は、0.png～59.pngが必要です。時計サンプル

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フリップ時計</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="flip-clock">
        <div class="time-group">
            <div class="digit" id="hour-tens"></div>
            <div class="digit" id="hour-ones"></div>
        </div>
        <div class="time-group">
            <div class="digit" id="minute-tens"></div>
            <div class="digit" id="minute-ones"></div>
        </div>
            <div class="digit" id="second-tens"></div>
            <div class="digit" id="second-ones"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>
JS
function updateClock() {
    const now = new Date();

    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();

    // Update each digit's background image
    document.getElementById('hour-tens').style.backgroundImage = `url('./images/${Math.floor(hours / 10)}.png')`;
    document.getElementById('hour-ones').style.backgroundImage = `url('./images/${hours % 10}.png')`;
    document.getElementById('minute-tens').style.backgroundImage = `url('./images/${Math.floor(minutes / 10)}.png')`;
    document.getElementById('minute-ones').style.backgroundImage = `url('./images/${minutes % 10}.png')`;
    document.getElementById('second-tens').style.backgroundImage = `url('./images/${Math.floor(seconds / 10)}.png')`;
    document.getElementById('second-ones').style.backgroundImage = `url('./images/${seconds % 10}.png')`;
}

// Update the clock every second
setInterval(updateClock, 1000);
updateClock();
CSS
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-image: url("s-brick008.gif");
    font-family: Arial, sans-serif;
}

.flip-clock {
    display: flex;
    align-items: center;
    gap: 0; /* 必要に応じて他の要素との隙間を設定 */
    padding: 0px;
    margin: 0;
    border-radius: 10px;
    background-color: #995413;
    box-sizing: border-box; /* これで画像が枠内に収まる */
    border: solid 10px #995413;
    box-shadow: 3px 3px 5px 5px rgba(0, 0, 0, 0.4);
}

.time-group {
    display: flex;
    align-items: center;
    gap: 0; /* 数字同士の隙間をなくす */
    margin-right: 10px; /* 時・分・秒の間に適度な隙間を作成 */
}

.digit {
    width: 80px;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0; /* 余白を完全になくす */
}

#second-ones {
    margin-right: 0; /* 最後の秒画像の右余白をなくす */
}

span {
    font-size: 3rem;
    line-height: 120px; /* 数字の高さに揃える */
    color: #333;
}

以上です・・・・。