html 3秒倒计时效果,js实现精确到秒的倒计时效果

本文实例为大家分享了两种倒计时效果，供大家参考，具体内容如下

效果图：

1.倒计时效果

倒计时

*{ margin:0; padding:0;}

.dtime{ margin:10px;}

.dtime span{ color:#C30;}

function tbdTimeCountdown(args){//倒计时函数

var ele=document.getElementById(args.id);

var alltime=args.alltime;

var arr=[];

var t=Math.floor(alltime/(24*60*60));

var yt=alltime%(24*60*60);

var s=Math.floor(yt/(60*60));

var ys=yt%(60*60);

var f=Math.floor(ys/(60));

var yf=ys%(60);

var m=yf;

arr[0]=[t,"天"];

arr[1]=[s,"小时"];

arr[2]=[f,"分"];

arr[3]=[m,"秒结束"];

var s=ce(arr,0);

ele.innerHTML=s;

var dong;

dong=setInterval(function(){

alltime-=1;

if(alltime<=0){

clearInterval(dong);

ele.innerHTML="0秒";

args.end();

}else{

t=Math.floor(alltime/(24*60*60));

yt=alltime%(24*60*60);

s=Math.floor(yt/(60*60));

ys=yt%(60*60);

f=Math.floor(ys/(60));

yf=ys%(60);

m=yf;

arr[0]=[t,"天"];

arr[1]=[s,"小时"];

arr[2]=[f,"分"];

arr[3]=[m,"秒结束"];

var s=ce(arr,0);

ele.innerHTML=s;

};

},1000);

function ce(arr,sta){

var i=sta;

if(i

if(arr[i][0]!=0){

var s="";

for(var j=i;j

s+=""+arr[j][0]+""+arr[j][1];

};

return s;

}else{

return ce(arr,i+1);

};

};

};

};//倒计时end

//效果1

//86402 3602 62

tbdTimeCountdown({id:"a1",//含有倒计时容器

alltime:3,//倒计时总秒数

end:function(){//倒计时结束，时间为0是调用的函数

//alert("倒计时结束才会执行！");

},

});

//效果2

tbdTimeCountdown({id:"a2",//含有倒计时容器

alltime:62,//倒计时总秒数

end:function(){//倒计时结束，时间为0是调用的函数

},

});

//效果3

tbdTimeCountdown({id:"a3",//含有倒计时容器

alltime:3602,//倒计时总秒数

end:function(){//倒计时结束，时间为0是调用的函数

},

});

//效果4

tbdTimeCountdown({id:"a4",//含有倒计时容器

alltime:86402,//倒计时总秒数

end:function(){//倒计时结束，时间为0是调用的函数

},

});

//效果4

tbdTimeCountdown({id:"a5",//含有倒计时容器

alltime:154789,//倒计时总秒数

end:function(){//倒计时结束，时间为0是调用的函数

},

});

2.倒计时2.html

倒计时

*{ margin:0; padding:0;}

.dtime{ margin:10px;}

.dtime span{ color:#C30;}

function tbdTimeCountdown(args){//倒计时函数

var ele=document.getElementById(args.id);

var alltime=Number(ele.getAttribute(args.alltime));

var arr=[];

var t=Math.floor(alltime/(24*60*60));

var yt=alltime%(24*60*60);

var s=Math.floor(yt/(60*60));

var ys=yt%(60*60);

var f=Math.floor(ys/(60));

var yf=ys%(60);

var m=yf;

arr[0]=[t,"天"];

arr[1]=[s,"小时"];

arr[2]=[f,"分"];

arr[3]=[m,"秒结束"];

var s=ce(arr,0);

ele.innerHTML=s;

var dong;

dong=setInterval(function(){

alltime-=1;

ele.setAttribute(args.alltime,alltime);

if(alltime<=0){

clearInterval(dong);

ele.innerHTML="0秒";

args.end();

}else{

t=Math.floor(alltime/(24*60*60));

yt=alltime%(24*60*60);

s=Math.floor(yt/(60*60));

ys=yt%(60*60);

f=Math.floor(ys/(60));

yf=ys%(60);

m=yf;

arr[0]=[t,"天"];

arr[1]=[s,"小时"];

arr[2]=[f,"分"];

arr[3]=[m,"秒结束"];

var s=ce(arr,0);

ele.innerHTML=s;

};

},1000);

function ce(arr,sta){

var i=sta;

if(i

if(arr[i][0]!=0){

var s="";

for(var j=i;j

s+=""+arr[j][0]+""+arr[j][1];

};

return s;

}else{

return ce(arr,i+1);

};

};

};

};//倒计时end

//效果1

//86402 3602 62

tbdTimeCountdown({id:"a1",//含有倒计时容器

alltime:"alltime",//倒计时总秒数

end:function(){//倒计时结束，时间为0是调用的函数

alert("倒计时结束才会执行！");

},

});

//效果2

tbdTimeCountdown({id:"a2",//含有倒计时容器

alltime:"alltime",//倒计时总秒数

end:function(){//倒计时结束，时间为0是调用的函数

},

});

//效果3

tbdTimeCountdown({id:"a3",//含有倒计时容器

alltime:"alltime",//倒计时总秒数

end:function(){//倒计时结束，时间为0是调用的函数

},

});

//效果4

tbdTimeCountdown({id:"a4",//含有倒计时容器

alltime:"alltime",//倒计时总秒数

end:function(){//倒计时结束，时间为0是调用的函数

},

});

//效果4

tbdTimeCountdown({id:"a5",//含有倒计时容器

alltime:"alltime",//倒计时总秒数

end:function(){//倒计时结束，时间为0是调用的函数

},

});

大家可以参考专题 《js倒计时功能汇总》 进行深入学习。

以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。