透明背景电子时钟 HTML5 代码 - 简洁易懂 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>透明背景电子时钟</title>
    <script>
        function displayTime() {
            var date = new Date();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            var meridiem = 'AM';
<pre><code>        if (hours &gt; 12) {
            hours = hours - 12;
            meridiem = 'PM';
        }

        if (hours === 0) {
            hours = 12;
        }

        if (minutes &lt; 10) {
            minutes = '0' + minutes;
        }

        if (seconds &lt; 10) {
            seconds = '0' + seconds;
        }

        var time = hours + ':' + minutes + ':' + seconds + ' ' + meridiem;
        document.getElementById('clock').innerHTML = time;
    }

    setInterval(displayTime, 1000);
&lt;/script&gt;
&lt;style&gt;
    body {
        margin: 0;
        padding: 0;
        background-color: transparent;
    }

    #clock {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 5em;
        font-family: Arial, sans-serif;
        color: #fff;
        text-shadow: 0px 0px 10px #000;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <div id='clock'></div>
</body>
</html>