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

前端技术 2023/09/02 JavaScript

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

本文地址：https://www.stayed.cn/item/4106

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案