网页实时显示时间_html页面布局代码

全栈程序员站长

发布于 2022-10-03 13:08:01

4K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

在html页面实时显示系统时间

桌面新建记事本，将下列代码复制粘贴，重命名后缀为.html，保存，用浏览器打开即可

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>系统时间</title>
</head>
<body>
<div id="datetime">
    <script>
        setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 1000);
    </script>
</div>
</body>

代码解析：

new Date()是取现在系统时间的实例，其格式为：
	显示的结果是：Mar 31 10:10:43 UTC+0800 2018 这种格式的时间

但是当这种对象参加计算后就会自动改变格式为：年月日时分秒

toLocaleString()便是将该对象在本地打印，自动转换了格式为:
	2018/11/5 下午1:18:17 或 2018年11月5日 13:19:14 (取决于不同的浏览器)

这个方法是循环方法，后面的1000是毫秒数，每单位毫秒数执行一次前面的xxx

setInterval("xxx",1000);

这句话的操作就是，每1000毫秒(即1秒)，取当前时间打印更新在页面该标签里，实现系统时间实时显示

=======================我是一条温柔的分割线=======================

有网友提出格式化成”yyyy-MM-dd hh:mm:ss”的问题，我在这里更新一下：

桌面新建记事本，将下列代码复制粘贴，重命名后缀为.html，保存，用浏览器打开即可

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>系统时间</title>
</head>

<body>
    <script>
        Date.prototype.format = function (fmt) {
            var o = {
                "y+": this.getFullYear, //年
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds() //秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
        setInterval("document.getElementById('dateTime').innerHTML = (new Date()).format('yyyy-MM-dd hh:mm:ss');", 1000);
    </script>

    <div id="dateTime"></div>
</body>

运行结果：