一.获取当前时间
在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()对象并获取当前时间并按规范格式打印在控制台的代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function test(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
month=month<10?"0"+month:month;
var day=date.getDate();
day=day<10?"0"+day:day;
var week="日一二三四五六".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+" 星期"+week+" 时间"+hour+":"+minute+":"+second;
console.log(current);
}
</script>
<input type="button" value="按钮" οnclick="test()"/>
</body>
</html>
二.将时间打印在控制台上
在第八行写一个div双标签，id名叫做time，然后将JavaScript代码中的console语句改为第二十七行的代码。
这行代码的意义是使用document代指整个HTML文件，然后在文件中寻找一个id名为“time”的标签，然后将current的值添加到该标签的innerHTML中，就可以在该div的区域显示要输出的系统时间了，代码示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="time"></div>
<script>
function test(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
month=month<10?"0"+month:month;
var day=date.getDate();
day=day<10?"0"+day:day;
var week="日一二三四五六".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+" 星期"+week+" 时间"+hour+":"+minute+":"+second;
document.getElementById("time").innerHTML=current;
}
test();
</script>
</body>
</html>
三.使网页中的时间动起来
因为我们示例中的时间是精确到秒的，所以要想让它动就是让它每秒变换一次，这里要先介绍一个方法：setInterval()
它参数列表中有两个参数，第一个参数是传入要执行的方法名，第二个参数是传入两次执行之间的间隔时间，以下是使用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var i=1;
function test(){
console.log(i++);
}
setInterval("test()",1000);
</script>
<input type="button" οnclick="test()" value="按钮" />
</body>
</html>
但是该方法在第一次执行之前会先停顿一个1000毫秒，所以执行test方法时会有1000毫秒的延迟，解决办法就是在调用该方法之前先手动执行一次test方法，这时在页面中test方法的执行就没有延迟了，会是立刻执行的。而且要注意，由于HTML代码是按顺序加载的，所以要是手动执行一次test方法就必须将input标签放在script标签前面加载，如下：
扫描二维码关注公众号，回复：
9340428 查看本文章
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" οnclick="test()" value="按钮" />
<script>
var i=1;
function test(){
console.log(i++);
}
test();
setInterval("test()",1000);
</script>
</body>
</html>
接下来再将该方法用到显示时间的示例中，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="time"></div>
<script>
function test(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
month=month<10?"0"+month:month;
var day=date.getDate();
day=day<10?"0"+day:day;
var week="日一二三四五六".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+" 星期"+week+" 时间"+hour+":"+minute+":"+second;
document.getElementById("time").innerHTML=current;
}
test();
setInterval("test()",1000);
</script>
</body>
</html>
