您的位置：首页 > Web前端 > JavaScript
可调整倒计时间的JS代码

2013-12-02 23:02 351 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可调整倒计时间的JS代码</title>

</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);
}

};
</script>
<body>

<div id="miaov">
<div id="fill_in">
<span>请输入：</span>
<input type="text" class="long_text" value="2014" />
<span>年</span>
<input type="text" class="text" value="12" />
<span>月</span>
<input type="text" class="text" value="22" />
<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>2014年12月22日</strong>
- 还剩：
</p>

<div id="date">
<span id="day">000</span>天
<span id="hour">00</span>小时
<span id="min">00</span>分
<span id="sec">00</span>秒
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航