一.获取当前时间
在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标签前面加载,如下:
<!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>