js年月日小时分钟秒动态时钟效果
本章节分享一段代码实例，它实现了时间日期效果，能够精确掉秒，并且可以自动变化。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script>
window.onload = function () {
var str = '';
var oTime = document.getElementById('time');
function fnTime() {
var time = new Date();
var day = time.getDay();
if (day == 1) {
day = '星期一';
} else if (day == 2) {
day = '星期二';
} else if (day == 3) {
day = '星期三';
} else if (day == 4) {
day = '星期四';
} else if (day == 5) {
day = '星期五';
} else if (day == 6) {
day = '星期六';
} else {
day = '星期日'
}
str = time.getFullYear() + '年'
+ time.getMonth() + 1 + '月'
+ time.getDate() + '日 '
+ day + ' '
+ toTwo(time.getHours())
+ ':'
+ toTwo(time.getMinutes()) + ':'
+ toTwo(time.getSeconds());
oTime.innerHTML = str;
}
fnTime();
setInterval(function () {
fnTime();
}, 1000);
function toTwo(n) {
return n < 10 ? '0' + n : '' + n;
}
}
</script>
</head>
<body>
<div id="time"></div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload = function () {}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var str = ''，声明一个变量并赋值为空。
（3）.var oTime = document.getElementById('time')，获取id属性值为time的元素对象。
（4）.function fnTime() {},此方法实现了当前的时间日期，那么不断调用的话就实现了时间日期自动变动效果。（5）.var time = new Date()，创建一个时间日期对象。
（6）.var day = time.getDay()，返回一个0-6之间的数字，和星期相对应。
（7）.if (day == 1) {
day = '星期一';
} else if (day == 2) {
day = '星期二';
} else if (day == 3) {
day = '星期三';
} else if (day == 4) {
day = '星期四';
} else if (day == 5) {
day = '星期五';
} else if (day == 6) {
day = '星期六';
} else {
day = '星期日'
}将对应的数字转换为汉字形式的星期。
（8）.str = time.getFullYear() + '年'
+ time.getMonth() + 1 + '月'
+ time.getDate() + '日 '
+ day + ' '
+ toTwo(time.getHours())
+ ':'
+ toTwo(time.getMinutes()) + ':'
+ toTwo(time.getSeconds());
将时间日期连接成字符串。
（9）.oTime.innerHTML = str，将字符串写入指定元素。
（10）.fnTime()，执行此函数，这么做的目的是为了立马显示实现，否则会有一秒的延迟。
（11）.setInterval(function () {
fnTime();
}, 1000)，每隔一秒调用一次fnTime()函数，这样就是先时间日期自动变动效果。
（12）.function toTwo(n) {
return n < 10 ? '0' + n : '' + n;
}，如果日期数字是个位数，前面就加0。
二.相关阅读:
（1）.关于时间日期对象可以参阅JavaScript Date对象一章节。
（2）.innerHTML可以参阅innerHTML一章节。
（3）.setInterval()可以参阅setInterval()一章节。
js年月日小时分钟秒动态时钟效果，这样的场景在实际项目中还是用的比较多的，关于js年月日小时分钟秒动态时钟效果就介绍到这了。
js年月日小时分钟秒动态时钟效果属于前端实例代码，有关更多实例代码大家可以查看。