您当前的位置：首页 > 学·技能

LIVE直播时钟小插件分享

时间： 2022-12-03 作者：立威浏览：

昨天直啵的时候有人注意到我的时钟样式换了，要不我就直接写专栏开源好了。之前一直用很简单的时钟插件，现在知道了原理以后可以自己做厚。虽然代码不怎么复杂，但是做完看起来还是不错滴！

代码并非完全原创！在CSS部分和Javascript部分有参考。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> clock </title>
        <style>
            .box1{
                background-color: black;
                width: 450px;
                height: 105px;
                text-align: center;
                line-height: 100px;
            }
            .box2{
                background-color: rgba(197, 197, 197, 0.7);
                width: 450px;
                height: 105px;
                text-align: center;
                line-height: 60px;
                padding-top: 5px;
            }
            .live{
                font-family: "Gill Sans", sans-serif;
                font-weight: bolder;
                font-size: 100px;
                color: white;
                float: left;
                padding-top: 3px;
                padding-left: 20px;
                letter-spacing: 15px;
            }
            .dot{
                font-family: Arial, Helvetica, sans-serif;
                font-weight: bolder;
                font-size: 80px;
                padding: 7px;
                color: red;
                float: none;
                -webkit-animation: twinkle 1s infinite;
            }

            @-webkit-keyframes twinkle{
                0% {opacity: 1;}
                50% {opacity: 1;}
                50.01% {opacity: 0;}
                100% {opacity: 0;}
            }
            .time {
                font-family: "Gill Sans", sans-serif;
                font-size: 80px;
                color: #000000;
                display: block;
                font-weight: bold;
                letter-spacing: none;
                text-shadow: 5px 5px 10px #969696;

            }
            .date {
                font-family: "Gill Sans", sans-serif;
                font-size: 30px;
                color: #000000;
                display: block;
                font-weight: bold;
            }
        </style>
        <script>
            function padding(topad){
                topad = topad.toString();
                if (topad.length == 1){
                topad = '0' + topad;
                };
                return topad;
            };
            function tempus(){
                now = new Date();
                document.getElementById("time").innerHTML = padding(now.getHours()) + ' : ' + padding(now.getMinutes()) + ' : ' + padding(now.getSeconds());
                document.getElementById("date").innerHTML = now.getFullYear() + ' 年 ' + [now.getMonth()+1] + ' 月 ' + now.getDate() + ' 日'
                setTimeout("tempus()");
            }
        </script>
    </head>
    <body onload="tempus();">
        <div class="box1">
            <div class="live"> LIVE </div> <div class="dot"> ◉ </div>
        </div>
        <div class="box2">
            <span id="time" class="time">TIME</span>
            <span id="date" class="date">DATE</span>
        </div>
    </body>
</html>

效果图