自己封裝的一個簡單的倒計時功能實例
因為平常工作中很常用到該功能,所以就利用這次國慶假期,重新梳理與對原有代碼進(jìn)行改善,再集成一個常用的功能,最終封裝出這個“簡單倒計時”功能。
該倒計時方法具有以下該功能:
1. 根據(jù)指定日期與當(dāng)前的電腦時間進(jìn)行匹配
2. 通過指定一個數(shù)組參數(shù),來設(shè)置在每一天內(nèi)不同的時間段進(jìn)行倒計時。
* 該方法還未通過實際工作的檢測,穩(wěn)定性未知(如果實際工作通過,會刪除這段話)
function countDown(date,target,filter){ var setTime = new Date(date).getTime(), timer = null; function core(){ var nowTime = new Date().getTime(), leftTime = 0, d = 0,h = 0,m = 0,s = 0; //////////////////////////// //conditation @ doublue time if(filter.length){ setTime = new Date(); for(var i=0,l=filter.length;i<l;i++){ setTime.setHours(filter[i]); setTime.setMinutes(0); setTime.setSeconds(0); if(nowTime < setTime.getTime()){ break; }else if(i == filter.length-1){ setTime.setDate(setTime.getDate()+1); setTime.setHours(filter[0]); } } } //////////////////////////// leftTime = Math.ceil((setTime - nowTime)/1000); if(nowTime <= setTime){ d = ~~(leftTime/86400); h = ~~(leftTime%86400/3600); m = ~~(leftTime%86400%3600/60); s = ~~(leftTime%86400%3600%60); timer = setTimeout(core,1e3); }else{ clearTimeout(timer); timer = null; } //here set out format target.innerHTML = 'd:'+d+' h:'+h+' m:'+m+' s:'+s; } core(); }
調(diào)用方式:
// 普通調(diào)用 countDown('2016/10/02/23:43',oDiv); // 指定時間循環(huán)倒計時 countDown('2016/10/02/23:43',oDiv,[9,11,18]);
以上這篇自己封裝的一個簡單的倒計時功能實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
JS實現(xiàn)把一個頁面層數(shù)據(jù)傳遞到另一個頁面的兩種方式
這篇文章主要介紹了JS實現(xiàn)把一個頁面層數(shù)據(jù)傳遞到另一個頁面的方式,本文給大家提供了兩種方式,需要的朋友可以參考下2018-08-08uniapp-路由uni-simple-router安裝配置教程
專為uniapp打造的路由器,和uniapp深度集成,uniapp用到了很多vue的api,但在路由管理的功能相對于vue-router還是比較欠缺的,比如全局導(dǎo)航守衛(wèi),本文給大家講解uniapp-路由uni-simple-router相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2022-11-11JS消息彈框alert、confirm、prompt的實現(xiàn)代碼
這篇文章主要介紹了JS消息彈框alert、confirm、prompt,文中還給大家介紹了js的三大基礎(chǔ)彈框,結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09