【页面常见特效】倒计时

页面中有多个倒计时怎么办？如何避免多个 setInterval() 带来的性能消耗问题？ 

这里试着采用 构造函数 + 原型继承 的方式来进行优化，请看代码！

// 基于JQuery
/*
    **倒计时构造函数
     * endTime  结束时间对象
     * $obj     倒计时显示区域对象
     * words    倒计时说明文字
*/
function CountTimeDown(endTime, $obj, words) {
    this.el = $obj;
    this.endTime = endTime;
    this.words = words ? words : "";
    // 开启倒计时
    this.timer();
}

//初始化
CountTimeDown.prototype.init = function() {
    this.now = new Date();
    //计算时间差
    this.leftTime = parseInt((this.endTime.getTime() - this.now.getTime()) / 1000);
    var leftTime = this.leftTime;
    //计算“天，时，分，秒”
    var d = parseInt(leftTime / 3600 / 24);
    var h = parseInt((leftTime / 3600) % 24);
    var m = parseInt((leftTime / 60) % 60);
    var s = parseInt(leftTime % 60);
    //补位
    h = h > 9 ? h : ("0" + h);
    m = m > 9 ? m : ("0" + m);
    s = s > 9 ? s : ("0" + s);
    //更新时间
    this.el.html(this.words + d + "天" + h + "小时" + m + "分" + s + "秒");
};

//倒计时方法
CountTimeDown.prototype.timer = function() {
    var self = this;
    this.timer = setInterval(function() {
        self.init();
        if (self.leftTime <= 0) {
            self.el.html("活动已结束");
            clearInterval(self.timer);
        }
    }, 1000);
};

近期模拟了个小型电商网站项目，借鉴了慕课上很多相关课程的知识，对于其中一些常见特效，如倒计时、选项卡焦点图、放大镜、楼梯、购物车等，可算是熟练掌握了。对AJAX、cookie、跨域、构造函数、面向对象等知识，也有了更深入地了解，感谢慕课、各位老师，以及诸位小伙伴，现将部分代码与大家分享一下。不足之处，还望指正！