根据一天中的时间更新html

<script>
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();

    if (hours < 12) {
        document.getElementById("time").innerHTML = "上午" + hours + ":" + minutes + ":" + seconds;
    } else {
        document.getElementById("time").innerHTML = "下午" + hours + ":" + minutes + ":" + seconds;
    }
</script>

<p id="time"></p>

<style>
    @keyframes morning {
        0% { content: "早上"; }
        100% { content: "上午"; }
    }

    @keyframes afternoon {
        0% { content: "下午"; }
        100% { content: "晚上"; }
    }

    p::before {
        content: "早上";
        animation: morning 12s infinite;
    }

    p::after {
        content: "下午";
        animation: afternoon 12s infinite;
    }
</style>

<p></p>