第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

【頁(yè)面常見(jiàn)特效】倒計(jì)時(shí)

標(biāo)簽:
Html/CSS JQuery JavaScript
页面中有多个倒计时怎么办?如何避免多个 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、跨域、构造函数、面向对象等知识,也有了更深入地了解,感谢慕课、各位老师,以及诸位小伙伴,现将部分代码与大家分享一下。不足之处,还望指正!

點(diǎn)擊查看更多內(nèi)容
7人點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消