使用JavaScript在页面打印系统当前时间

目录

一.获取当前时间

二.将时间打印在控制台上

三.使网页中的时间动起来

---

一.获取当前时间

在JavaScript中，有一个内置对象Date（），其中包含了众多方法来获取系统的当前时间，该篇以如下的七个常用方法为例打印系统的当前时间

方法	描述
getFullYear()	返回四位数字表示的年份
getMonth()	返回月份 (0 ~ 11)
getDate()	返回一个月中的某一天 (1 ~ 31)
getDay()	返回一周中的某一天 (0 ~ 6)
getHours()	返回 Date 对象的小时 (0 ~ 23)
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)

 

以下是创建Date()对象并获取当前时间并按规范格式打印在控制台的代码示例：

二.将时间打印在控制台上

在第八行写一个div双标签，id名叫做time，然后将JavaScript代码中的console语句改为第二十七行的代码。

这行代码的意义是使用document代指整个HTML文件，然后在文件中寻找一个id名为“time”的标签，然后将current的值添加到该标签的innerHTML中，就可以在该div的区域显示要输出的系统时间了，代码示例如下：

三.使网页中的时间动起来

因为我们示例中的时间是精确到秒的，所以要想让它动就是让它每秒变换一次，这里要先介绍一个方法：setInterval()

它参数列表中有两个参数，第一个参数是传入要执行的方法名，第二个参数是传入两次执行之间的间隔时间，以下是使用示例：

但是该方法在第一次执行之前会先停顿一个1000毫秒，所以执行test方法时会有1000毫秒的延迟，解决办法就是在调用该方法之前先手动执行一次test方法，这时在页面中test方法的执行就没有延迟了，会是立刻执行的。而且要注意，由于HTML代码是按顺序加载的，所以要是手动执行一次test方法就必须将input标签放在script标签前面加载，如下：

接下来再将该方法用到显示时间的示例中，如下：