先贴上代码
<!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的值就会每秒更新一次,而在页面上显示的时间也就是实时时间了。