html倒计时代码修改,JS实现可调整倒计时间代码分享

这是一款基于javascript实现可调整倒计时间的代码,我们可以手动调整倒计时间,可以精确到“天、时、分、秒”,而且样式布局也很新颖。

先上运行效果图:

19a389f0625eb2fdc9265f1e7c32d53d.png

为大家分享的可调整倒计时间的JS代码如下(浏览器中如果不能正常运行,可以尝试切换浏览模式)。

可调整倒计时间的JS代码

window.οnlοad=function ()

{

var oFill=document.getElementById('fill_in');

var oInputYear=oFill.getElementsByTagName('input')[0];

var oInputMonth=oFill.getElementsByTagName('input')[1];

var oInputDay=oFill.getElementsByTagName('input')[2];

var oBtn=document.getElementById('go');

var oBtn2=document.getElementById('go2');

var oTxtDay=document.getElementById('day');

var oTxtHour=document.getElementById('hour');

var oTxtMin=document.getElementById('min');

var oTxtSec=document.getElementById('sec');

var oTxtTarget=document.getElementById('target').getElementsByTagName('strong')[0];

var timer=null;

oBtn2.οnclick=function ()

{

timer=setInterval(updateTime, 1000);

updateTime();

oTxtTarget.innerHTML=oInputYear.value+"年"+oInputMonth.value+"月"+oInputDay.value+"日";

};

function fillZero(num, digit)

{

var str=''+num;

while(str.length

{

str='0'+str;

}

return str;

}

function updateTime()

{

var oDateEnd=new Date();

var oDateNow=new Date();

var iRemain=0;

var iDay=0;

var iHour=0;

var iMin=0;

var iSec=0;

oDateEnd.setFullYear(parseInt(oInputYear.value));

oDateEnd.setMonth(parseInt(oInputMonth.value)-1);

oDateEnd.setDate(parseInt(oInputDay.value));

oDateEnd.setHours(0);

oDateEnd.setMinutes(0);

oDateEnd.setSeconds(0);

iRemain=(oDateEnd.getTime()-oDateNow.getTime())/1000;

if(iRemain<=0)

{

clearInterval(timer);

iRemain=0;

alert('已过时间');

}

iDay=parseInt(iRemain/86400);

iRemain%=86400;

iHour=parseInt(iRemain/3600);

iRemain%=3600;

iMin=parseInt(iRemain/60);

iRemain%=60;

iSec=iRemain;

oTxtDay.innerHTML=fillZero(iDay,3);

oTxtHour.innerHTML=fillZero(iHour,2);

oTxtMin.innerHTML=fillZero(iMin,2);

oTxtSec.innerHTML=fillZero(iSec,2);

}

var t=null;

var alpha=0;

var bShow=true;

setInterval(function (){

if(bShow)

{

startMove(100);

}

else

{

startMove(0);

}

bShow=!bShow;

function startMove(iTarget)

{

if(t)clearInterval(t);

t=setInterval(function (){

doMove(iTarget);

}, 30);

}

function doMove(iTarget)

{

var iSpeed=0;

if(alpha

{

iSpeed=2;

}

else

{

iSpeed=-2;

}

if(alpha==iTarget)

{

clearInterval(t);

t=null;

if(iTarget==100)

{

startMove(0);

}

}

else

{

alpha+=iSpeed;

oBtn2.style.filter="alpha(opacity:"+alpha+")";

oBtn2.style.opacity=alpha/100;

}

}

}, 2000);

};

请输入:

现在距离 -

2015年10月1日

- 还剩:

000

00

00

00

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值