您的位置：首页 > Web前端 > JavaScript

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

2015-10-01 00:00 661 查看

这是一款基于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实现可调整倒计时间代码，是不是很赞，希望大家可以喜欢。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript正则表达式小结(test|match|se

相关文章推荐

新的分享

章节导航