JS实现可调整倒计时间代码分享

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

效果演示源码下载
为大家分享的可调整倒计时间的JS代码如下（浏览器中如果不能正常运行，可以尝试切换浏览模式）。

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>可调整倒计时间的JS代码</title><！--[if lte IE 6]><script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script> <script type="text/javascript"> DD_belatedPNG.fix（"a"）; </script><！[endif]--><link href="style.css" rel="stylesheet" type="text/css" /></head><script type="text/javascript">window.onload=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.onclick=function （） { timer=setInterval（updateTime, 1000）; updateTime（）; oTxtTarget.innerHTML=oInputYear.value+"年"+oInputMonth.value+"月"+oInputDay.value+"日"; };function fillZero（num, digit） { var str=""+num;while（str.length<digit） { 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<iTarget） { 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）;};</script><body><div id="miaov"> <div id="fill_in"> <span class="title">请输入：</span> <input type="text" class="long_text" value="2015" /> <span class="space1">年</span> <input type="text" class="text" value="10" /> <span class="space2">月</span> <input type="text" class="text" value="1" /> <span class="space3">日</span> </div> <a href="javascript:;" id="go" class="go"></a> <a href="javascript:;" id="go2" class="active"></a> <p id="target"> 现在距离 - <strong>2015年10月1日</strong> - 还剩： </p> <div id="date"> <p id="day">000</p> <p id="hour">00</p> <p id="min">00</p> <p id="sec">00</p> </div> </div> </body></html>

以上就是为大家分享的JS实现可调整倒计时间代码，是不是很赞，希望大家可以喜欢。