总结：如何在网页上动态显示当前系统时间？

最新推荐文章于 2024-03-25 22:03:05 发布

肥胖的企鹅

最新推荐文章于 2024-03-25 22:03:05 发布

阅读量5.8k

点赞数 7

分类专栏： HTML 文章标签： JavaScript JS

本文链接：https://blog.csdn.net/weixin_43457668/article/details/102758776

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

先贴上代码

<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title></title>
    </head>
    <body>
        <!--在页面上定义一个标签用于显示时间 -->
        <span id="timespan" style="color: red;"></span>

	<script>
            function time(){//编写获取时间的函数
		var date = new Date();//创建JS自带的Date日期对象

		var year = date.getFullYear();//获取年

		var month = date.getMonth()+1;//获取月，注意其范围是0~30，使用时需要加1
		month=month<10?"0"+month:month;//三则运算符判断是个位数则前面加一个零，好看

		var day = date.getDate();//获取日
		day=day<10?"0"+day:day;

		var weekday = "日一二三四五六".charAt(date.getDay());//获取周，也可以写成这样("日","一","二","三","四","五","六")，其本质是字符数组

		var hour = date.getHours();//获取小时
		hour=hour<10?"0"+hour:hour;

		var minute = date.getMinutes();//获取分钟
		minute=minute<10?"0"+minute:minute;
		
		var second = date.getSeconds();//获取秒
                second =second <10?"0"+second :second ;

		var current = year+"-"+month+"-"+day+" 星期"+weekday+" "+hour+":"+minute+":"+second;
		console.log(current);//在控制台打印当前时间
		document.getElementById("timespan").innerHTML=current;//获取对应ID标签的对象，将变量current显示在对应位置
	    }
	    time();
	    setInterval("time()",1000);//setInterval函数可以延迟一定时间后执行某一函数
        </script>
    </body>
</html>

下面来按实现步骤依次介绍如何显示：

一、制作获取时间的JS函数

由于JS内置了一些对象，因此创建Date对象并调用相应函数就可以获取当前系统时间。

var date = new Date();//创建JS自带的Date日期对象

下面举一些例子：

var month = date.getMonth()+1;//获取月，注意获取到的月份的范围是0~30，使用时需要加1
month=month<10?"0"+month:month;//如果是个位数就在前边加个‘0’

关于获取星期，注意获取到的值为（0，1，2，3，4，5，6），因此要想显示为汉字“星期X”，则需要选择语句，这里为了简化代码可以使用数组来实现：

var weekday = "日一二三四五六".charAt(date.getDay());//定义一个字符数组，使用charAt()函数获取指定位置的值

最后将这些变量按顺序存放在一个名为current的变量中。

二、将当前系统时间显示在页面上

上面我们已经成功地获取了当前的系统时间，然而要想将<script>标签中的函数返回值输出到页面的其它标签上，则需要getElementById()函数获取目标标签的对象，再将我们刚刚获得的时间的值赋给目标标签的innerHTML属性，这样current的值就传递到了<script>外部的标签，具体实现如下:

<span id="timespan" style="color: red;"></span>
<script>
    ...
    获取时间
    ...
    document.getElementById("timespan").innerHTML=current;//document代表在当前“文档”中
</script>

注意，document代表在当前“文档”中获取ID为“timespan”的标签。

三、如何实时更新时间

为实时更新时间，我们需要实时获取当前系统时间，根据时间的精度，我们可以每隔一秒调用一次time()函数，而要实现以上功能可以通过setInterval()函数实现，具体如下：

time();//首先执行一次
setInterval("time()",1000);//每隔1000ms执行一次time()函数，首次执行需要等待1s

这样我们获取到的current的值就会每秒更新一次，而在页面上显示的时间也就是实时时间了。

肥胖的企鹅

关注

7
点赞
踩
42

收藏

觉得还不错? 一键收藏
0
评论
总结：如何在网页上动态显示当前系统时间？

先贴上代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body>  ...
复制链接

扫一扫