时钟实时显示当前时间（javascript,web)

最新推荐文章于 2025-04-29 10:37:59 发布

赤瞳&

最新推荐文章于 2025-04-29 10:37:59 发布

阅读量1.6k

点赞数

文章标签： html5 javascript css

本文链接：https://blog.youkuaiyun.com/weixin_52799870/article/details/127697882

版权

效果展示：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <title>实时时钟显示</title>
    <style>
        #getTime {
            display: flex;
            width: 650px;
            height: 100px;
            border-width: 3px;
            border-style: solid;
            border-color: gray;
            background-color: pink;
            border-radius: 15px;
            background: url(../img6.jpg) no-repeat ;
            text-decoration: none;
            color: burlywood;
            font-size: 30px;
            line-height: 100px;
            padding-left: 30px;
        }
        
    </style>

</head>

<body>
    <div id="getTime">
        <script type="text/javascript">

            function getTime() {
                var time = new Date();
                var h = time.getHours();
                h = h < 10 ? '0' + h : h;
                var m = time.getMinutes();
                m = m < 10 ? '0' + m : m;
                var s = time.getSeconds();
                s = s < 10 ? '0' + s : s;
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var dates = date.getDay();
    
                var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
                var day = date.getDay();
                document.getElementById("getTime").innerHTML ="今天是：" + year + "年" + month + "月" + dates + "日 " + arr[day]+" "+ h + ":" + m + ":" + s;
            };
            setInterval("getTime()", 1000);
        </script>
    </div>
    
</body>

</html>