<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clcok {
font-style: normal;
}
</style>
<script>
window.onload = function () {
var obj = {
clockSpan: null,
timeStr: null,
init: function () {
this.clockSpan = document.querySelectorAll(".clock span");
this.setInter();
},
formatTime: function (n) {
if (n < 10) return "0" + n;
else return "" + n;
},
getTime: function () {
var date = new Date();
var hour = date.getHours();
var mintues = date.getMinutes();
var seconds = date.getSeconds();
//第一种方法
this.timeStr=this.formatTime(hour)+this.formatTime(mintues) + this.formatTime(seconds);
//第二种方法
// var hour1 = Math.floor(hour / 10);//获取个位
// var hour2 = hour % 10;//获取个位
// var mintues1 = Math.floor(mintues / 10);//获取十位
// var mintues2 = mintues % 10;//获取个位
// var seconds1 = Math.floor(seconds / 10);//获取十位
// var seconds2 = seconds % 10;//获取个位
// this.timeStr = hour1 + "" + hour2 + "" + mintues1 + "" + mintues2 + "" + seconds1 + "" + seconds2;
},
setTime: function () {
for (var i = 0, len = this.clockSpan.length; i < len; i++) {
this.clockSpan[i].innerHTML = this.timeStr.charAt(i);
}
},
setInter: function () {
var that = this;
setInterval(function () {
that.getTime();
that.setTime();
}, 1000);
}
}
obj.init();
}
</script>
</head>
<body>
<div class="clock">
<span>1</span>
<span>1</span>
<b>:</b>
<span>2</span>
<span>3</span>
<b>:</b>
<span>1</span>
<span>1</span>
</div>
</body>
</html>