JavaScript实现计数器、计时器——setTimeout与setInterval的区别
JavaScript代码可以在界面上实现计数器获取计时器，计数器和计时器的本质是数字的累加，而显示当前的本质是获取具体时间后的字符串操作。
以上可以通过两种方式实现，一种是通过setTimeout调用函数，一种为setInterval调用函数。
<!-- 使用setTimeout实现时钟 -->
<script type="text/javascript">
function getTime() {
var date = new Date();
var year = date.getFullYear();
// var year = date.getYear() + 1900; 获取的是年数差
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var time = year + "-" + month + "-" + (day<10 ? "0"+day:day ) + " " + hour + ":" + (min<10 ? "0"+min:min ) + ":" + sec;
// console.log(year,month,day,hour,min,sec);
document.getElementById("time").innerText = time;
var timeOut = window.setTimeout(getTime,100);
}
</script>
</head>
<body onload="getTime();">
<div id="time"></div>
</body>
<!-- 使用setTimeout实现时钟 -->
<script type="text/javascript">
function getTime() {
var date = new Date();
var year = date.getFullYear();
// var year = date.getYear() + 1900; 获取的是年数差
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var time = year + "-" + month + "-" + (day<10 ? "0"+day:day ) + " " + hour + ":" + (min<10 ? "0"+min:min ) + ":" + sec;
// console.log(year,month,day,hour,min,sec);
document.getElementById("time").innerText = time;
}
</script>
</head>
<body onload="setInterval(getTime,1000);">
<div id="time"></div>
</body>
从以上两段代码对比可以看出，setTimeout仅仅执行一次，而setInterval可以在没有终止条件的情况下无限执行。
