2種簡單的js倒計時方式
更新時間：2017年10月20日 15:06:37 作者：逗伴不是瓣
這篇文章主要為大家詳細(xì)介紹了2個簡單js倒計時方式，一是帶天數(shù)的倒計時，二是單純分鐘和秒倒計時，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一般倒計時的時間都是后臺傳來的然后渲染到頁面，這里有2個簡單的倒計時方式
//帶天數(shù)的倒計時
function countDown(times){
var timer=null;
timer=setInterval(function(){
var day=0,
hour=0,
minute=0,
second=0;//時間默認(rèn)值
if(times > 0){
day = Math.floor(times / (60 * 60 * 24));
hour = Math.floor(times / (60 * 60)) - (day * 24);
minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);
second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
}
if (day <= 9) day = '0' + day;
if (hour <= 9) hour = '0' + hour;
if (minute <= 9) minute = '0' + minute;
if (second <= 9) second = '0' + second;
//
console.log(day+"天:"+hour+"小時："+minute+"分鐘："+second+"秒");
times--;
},1000);
if(times<=0){
clearInterval(timer);
}
}
//單純分鐘和秒倒計時
function resetTime(time){
var timer=null;
var t=time;
var m=0;
var s=0;
m=Math.floor(t/60%60);
m<10&&(m='0'+m);
s=Math.floor(t%60);
function countDown(){
s--;
s<10&&(s='0'+s);
if(s.length>=3){
s=59;
m="0"+(Number(m)-1);
}
if(m.length>=3){
m='00';
s='00';
clearInterval(timer);
}
console.log(m+"分鐘"+s+"秒");
}
timer=setInterval(countDown,1000);
}
如何使用
更多關(guān)于倒計時的文章請查看專題： 《倒計時功能》
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了js實現(xiàn)拉幕效果的廣告代碼,涉及javascript定時操作頁面元素屬性變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
使用Promise和JavaScript有效處理1000個請求的方法
在現(xiàn)代Web開發(fā)中,處理高并發(fā)請求是一個常見的挑戰(zhàn),當(dāng)我們需要從服務(wù)器獲取大量數(shù)據(jù)或執(zhí)行多個異步任務(wù)時,如何有效地管理請求的并發(fā)性和性能變得至關(guān)重要,本文將介紹如何使用Promise和JavaScript來管理高并發(fā)請求,需要的朋友可以參考下2023-09-09
eval的用法eval函數(shù)接收一個參數(shù)s，如果s不是字符串，則直接返回s。否則執(zhí)行s語句,下面給出eval解析json的示例2014-01-01
rollup是一款用來es6模塊打包代碼的構(gòu)建工具(支持css和js打包)。這篇文章主要介紹了Rollup處理并打包JS文件項目實例,需要的朋友可以參考下2018-05-05
JS/HTML5游戲常用算法之碰撞檢測 包圍盒檢測算法詳解【矩形情況】
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測 包圍盒檢測算法,結(jié)合實例形式詳細(xì)分析了游戲算法中針對碰撞檢測的包盒矩形情況下的相關(guān)算法原理與操作注意事項,需要的朋友可以參考下2018-12-12
webpack組織模塊打包Library的原理及實現(xiàn)
這篇文章主要介紹了webpack組織模塊打包Library的原理及實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了JS正則驗證多個郵箱的方法,且郵箱字符串使用分號隔開,非常簡單實用,需要的朋友可以參考下2017-04-04
微信小程序input、textarea層級過高穿透的問題解決
微信小程序原生組件camera、canvas、input、live-player、live、pusher、map、textarea、video的層級是最高的，那么如何解決微信小程序input、textarea層級過高穿透，本文就詳細(xì)的介紹一下2021-11-11
本文主要介紹了uniapp中的picker選擇器的幾種使用場景，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
淺析微信小程序modal彈窗關(guān)閉默認(rèn)會執(zhí)行cancel問題
這篇文章主要介紹了小程序modal彈窗關(guān)閉默認(rèn)會執(zhí)行cancel方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10