$$demo <div class="container"> <div class="hours"> <span class="label"></span> <span class="value"></span> </div> <div class="minutes"></div> <div class="seconds"></div> </div>

<script> function fillZero(n) { // 填充为两位数 return n < 10 ? 0${n} : n }

function formatHour(hour) {
    // 采用 12 小时制
    hour = hour % 12
    // 12 小时制没有 0 点
    return hour == 0 ? 12 : hour
}

function render() {
    const now = new Date()

    document.querySelector(".label").textContent =
        now.getHours() < 12 ? "AM" : "PM"

    document.querySelector(".hours .value").textContent = formatHour(
        now.getHours()
    )
    document.querySelector(".minutes").textContent = fillZero(
        now.getMinutes()
    )
    document.querySelector(".seconds").textContent = fillZero(
        now.getSeconds()
    )
}

render() // 避免开始 1 秒内为 0
setInterval(render, 1000)

</script>

<style> html { background-color: black; min-height: 400px; } .container { position: fixed;

    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

    width: min-content;
    height: min-content;

    display: flex;
    align-items: flex-end;

    font-size: 20vmin;
    gap: 0.2em;

    color: #b7b7b7;
}

.hours,
.minutes,
.seconds {
    background-color: #0f0f0f;
}

.hours,
.minutes,
.seconds {
    border-radius: 0.1em;
    width: 1.4em;
    text-align: center;
}

.seconds {
    font-size: 10vmin;
}

.hours {
    position: relative;
}

.hours .label {
    position: absolute;
    left: 1.5em;
    top: 1.5em;

    font-size: 2vmin;
}

</style>

$$

$$answer

<div class="container">
    <div class="hours">
        <span class="label"></span>
        <span class="value"></span>
    </div>
    <div class="minutes"></div>
    <div class="seconds"></div>
</div>

<script>
    function fillZero(n) {
        // 填充为两位数
        return n < 10 ? `0${n}` : n
    }

    function formatHour(hour) {
        // 采用 12 小时制
        hour = hour % 12
        // 12 小时制没有 0 点
        return hour == 0 ? 12 : hour
    }

    function render() {
        const now = new Date()

        document.querySelector(".label").textContent =
            now.getHours() < 12 ? "AM" : "PM"

        document.querySelector(".hours .value").textContent = formatHour(
            now.getHours()
        )
        document.querySelector(".minutes").textContent = fillZero(
            now.getMinutes()
        )
        document.querySelector(".seconds").textContent = fillZero(
            now.getSeconds()
        )
    }

    render() // 避免开始 1 秒内为 0
    setInterval(render, 1000)
</script>

<style>
    html {
        background-color: black;
    }
    .container {
        position: fixed;

        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;

        width: min-content;
        height: min-content;

        display: flex;
        align-items: flex-end;

        font-size: 20vmin;
        gap: 0.2em;

        color: #b7b7b7;
    }

    .hours,
    .minutes,
    .seconds {
        background-color: #0f0f0f;
    }

    .hours,
    .minutes,
    .seconds {
        border-radius: 0.1em;
        width: 1.4em;
        text-align: center;
    }

    .seconds {
        font-size: 10vmin;
    }

    .hours {
        position: relative;
    }

    .hours .label {
        position: absolute;
        left: 1.5em;
        top: 1.5em;

        font-size: 2vmin;
    }
</style>

$$