JS实现网页实时显示时间

原生JavaScript中，有一个setInterval()方法，它的作用是可以按照指定的周期（最小单位毫秒）来调用函数或计算表达式。我们想要实现实时显示当前时间，可以使用setInterval()方法，每1秒钟（1000毫秒）执行一次计算从而实现功能。

代码

var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

setInterval(function(){
    var date = new Date();
    var YY, MM, DD, HH, II, SS, WE;
    YY = date.getFullYear();
    MM = date.getMonth() + 1;
    DD = date.getDate();
    HH = date.getHours();
    II = date.getMinutes();
    SS = date.getSeconds();
    WE = date.getDay();
    document.getElementById("time").innerHTML = YY + "年" + FilterTimeString(MM) + "月" + FilterTimeString(DD) + "日" + "\t" + FilterTimeString(HH) + ":" + FilterTimeString(II) + ":" + FilterTimeString(SS) + "\t" + weeks[WE];
}, 1000);

function FilterTimeString(a){
    if(a < 10){
        return '0' + a;
    }
    return a;
}

注释

代码其实很简单，定义一个weeks星期数组，因为在JS里面的星期天是用0表示，所以我们要把星期天放在数组的0键值上。

FilterTimeString()函数是用来处理时间格式问题，当数值小于10时，自动在前面补一个0

总结

setInterval()方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。setInterval()返回的ID值可以看成是它的句柄值。

在动态加载的页面中，一定要清理循环定时器。有时候重复设置定时器，严重的时候会导致内存泄露，最终页面崩溃。

回调函数中会包含一些变量或者DOM元素，需要更加小心谨慎，考虑这些元素的释放问题。