<!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 = &quot;PM&quot;;
        }

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

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

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

        var time = hours + &quot;:&quot; + minutes + &quot;:&quot; + seconds + &quot; &quot; + meridiem;
        document.getElementById(&quot;clock&quot;).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>
写一个 透明背景的电子时钟html5

原文地址: https://www.cveoy.top/t/topic/0nT 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录