编程 Javascript

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

Posted in Javascript onAugust 18, 2015

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

先上运行效果图：

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

效果演示源码下载

为大家分享的可调整倒计时间的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实现可调整倒计时间代码，是不是很赞，希望大家可以喜欢。

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript调用XML制作连动下拉列表框

Jun 25 Javascript

js 页面输出值

Nov 30 Javascript

21个JavaScript事件(Events)属性汇总

Dec 02 Javascript

javascript中错误使用var造成undefined

Mar 31 Javascript

基于jQuery实现瀑布流页面

Apr 11 jQuery

Vue2几种常见开局方式详解

Sep 09 Javascript

JavaScript之创意时钟项目(实例讲解)

Oct 23 Javascript

AngularJS对动态增加的DOM实现ng-keyup事件示例

Mar 12 Javascript

layui清空,重置表单数据的实例

Sep 12 Javascript

微信小程序iOS下拉白屏晃动问题解决方案

Oct 12 Javascript

vuex state中的数组变化监听实例

Nov 06 Javascript

JS实现轮播图效果

Jan 11 Javascript

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

Aug 18 #Javascript

js实现带有介绍的Select列表菜单实例

Aug 18 #Javascript

jQuery垂直多级导航菜单代码分享

Aug 18 #Javascript

js简单实现表单中点击按钮动态增加输入框数量的方法

Aug 18 #Javascript

js实现的简单radio背景颜色选择器代码

Aug 18 #Javascript

jquery SweetAlert插件实现响应式提示框

Aug 18 #Javascript

js+css实现上下翻页相册代码分享

Aug 18 #Javascript

You might like

php5 图片验证码实现代码

2009/12/11 PHP

php获取操作系统语言代码

2013/11/04 PHP

PHP实现的连贯操作、链式操作实例

2014/07/08 PHP

yii2带搜索功能的下拉框实例详解

2016/05/12 PHP

删除PHP数组中的重复元素的实现代码

2017/04/10 PHP

PHP的RSA加密解密方法以及开发接口使用

2018/02/11 PHP

封装了一个支持匿名函数的Javascript事件监听器

2014/06/05 Javascript

jQuery简单实现遍历数组的方法

2015/04/14 Javascript

轻松实现jquery选项卡切换效果

2016/10/10 Javascript

jquery控制页面的展开和隐藏实现方法(推荐)

2016/10/15 Javascript

谈谈JS中常遇到的浏览器兼容问题和解决方法

2016/12/17 Javascript

BootStrap Table 获取同行不同列元素的方法

2016/12/19 Javascript

Angular下H5上传图片的方法（可多张上传）

2017/01/09 Javascript

jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】

2017/03/03 Javascript

基于vue如何发布一个npm包的方法步骤

2019/05/15 Javascript

vue+elementUi图片上传组件使用详解

2019/08/20 Javascript

layui使用label标签的方法

2019/09/14 Javascript

vue 实现基础组件的自动化全局注册

2020/12/25 Vue.js

[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP

2016/03/03 DOTA

[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集

2016/03/06 DOTA

Python获取当前时间的方法

2014/01/14 Python

Python常用的文件及文件路径、目录操作方法汇总介绍

2015/05/21 Python

Python快速排序算法实例分析

2017/11/29 Python

在python中将字符串转为json对象并取值的方法

2018/12/31 Python

Python生成验证码、计算具体日期是一年中的第几天实例代码详解

2019/10/16 Python

python matplotlib画盒图、子图解决坐标轴标签重叠的问题

2020/01/19 Python

python生成任意频率正弦波方式

2020/02/25 Python

详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案

2021/01/29 Python

Nice Kicks网上商店：ShopNiceKicks.com

2018/12/25 全球购物

简单说说tomcat的配置

2013/05/28 面试题

化工工艺专业求职信

2013/09/22 职场文书

人力资源管理专业应届生求职信

2014/04/24 职场文书

2015中秋节晚会主持词

2015/07/01 职场文书

如何用PHP实现多线程编程

2021/05/26 PHP

什么是Python装饰器？如何定义和使用？

2022/04/11 Python

Elasticsearch 数据类型及管理

2022/04/19 Python