需要用到的知识点
a、Date()函数
b、构建函数
c、dom
d、setTimeout('需要执行的代码',时间);时间指的是代码多长时间执行一次,单位是ms。
思路:获取系统时间,截取时、分、秒;使用setTimeout();来控制函数执行的时间,简单来讲就是,多长时间函数执行一次。由于输出的形式为22:9:6,而我们需要将其变成22:09:06的形式,所以还需构建一个补位函数。相关代码如下:
结构层代码:
<p id="demo">这里会显示时间</p>
<button onclick="getTime()">点击我,开始运行</button>
js代码:
function getTime() {
var time = new Date();/* 定义一个时间变量,用于存储标准时间(年、月、日、星期、时、分、秒) */
var hours = time.getHours();/* 截取小时 */
var minutes = time.getMinutes();/* 截取分钟 */
var seconds = time.getSeconds();/* 截取秒钟 */
hours=fillGaps(hours);
minutes=fillGaps(minutes);
seconds=fillGaps(seconds);/* 调用补位函数 */
document.getElementById('demo').innerHTML = hours + ':' + minutes + ':' + seconds;/* 将变量按照时间的样子拼接 */
window.setTimeout('getTime()', 1000); /* 让getTime()函数每1s执行一次*/
/* 以上时间显示的结构与系统时间不同,小于10的数,会这样显示10:9:3;而正确的显示10:09:03
此时还需要构建一个补位函数。
*/
function fillGaps(a) {/* 定义一个带参数的函数 */
if (a < 10) {
return '0' + a;/*返回相应的值*/
} else {
return a;
}
}
}
总结:以上主要考察初学者对函数的理解,运用;对Date()函数的应用。setTimeout()的使用。