编程 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 相关文章推荐

使用Firebug对js进行断点调试的图文方法

Apr 02 Javascript

鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)

Dec 14 Javascript

JavaScript Serializer序列化时间处理示例

Jul 31 Javascript

更快的异步执行(setTimeout多浏览器)

Aug 12 Javascript

jquery 实现两Select 标签项互调示例代码

Sep 25 Javascript

JS动态改变表格边框宽度的方法

Mar 31 Javascript

node.js读取文件到字符串的方法

Jun 29 Javascript

实例详解ECMAScript5中新增的Array方法

Apr 05 Javascript

在vue中安装使用vux的教程详解

Sep 16 Javascript

js实现无缝滚动双图切换效果

Jul 09 Javascript

Layui表格行工具事件与数据回填方法

Sep 13 Javascript

JS继承实现方法及优缺点详解

Sep 02 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

PHP安全配置

2006/12/06 PHP

Window下PHP三种运行方式图文详解

2013/06/11 PHP

php使用explode()函数将字符串拆分成数组的方法

2015/02/17 PHP

PHP实现过滤掉非汉字字符只保留中文字符

2015/06/04 PHP

jquery animate 动画效果使用说明

2009/11/04 Javascript

基于Jquery插件开发之图片放大镜效果(仿淘宝)

2011/11/19 Javascript

JavaScript window.document的属性、方法和事件小结

2012/10/24 Javascript

JavaScript获取并更改input标签name属性的方法

2015/07/02 Javascript

JavaScript数组合并的多种方法

2016/05/22 Javascript

JavaScript获取css行间样式,内连样式和外链样式的简单方法

2016/07/18 Javascript

用AngularJS的指令实现tabs切换效果

2016/08/31 Javascript

VueJs单页应用实现微信网页授权及微信分享功能示例

2017/07/26 Javascript

JavaScript伪数组用法实例分析

2017/12/22 Javascript

boostrap模态框二次弹出清空原有内容的方法

2018/08/10 Javascript

使用jQuery动态设置单选框的选中效果

2018/12/06 jQuery

bootstrap与pagehelper实现分页效果

2018/12/29 Javascript

微信小程序-form表单提交代码实例

2019/04/29 Javascript

ES6 class类链式继承，实例化及react super(props)原理详解

2020/02/15 Javascript

浅谈Vue3 Composition API如何替换Vue Mixins

2020/04/29 Javascript

在nuxt中使用路由重定向的实例

2020/11/06 Javascript

python中使用序列的方法

2015/08/03 Python

python 按不同维度求和,最值,均值的实例

2018/06/28 Python

实例讲解python中的协程

2018/10/08 Python

Python列表list排列组合操作示例

2018/12/18 Python

对python:循环定义多个变量的实例详解

2019/01/20 Python

Python中format()格式输出全解

2019/04/12 Python

使用python判断jpeg图片的完整性实例

2019/06/10 Python

python模拟实现斗地主发牌

2020/01/07 Python

python爬虫看看虎牙女主播中谁最“顶”步骤详解

2020/12/01 Python

前端制作动画的几种方式（css3，js）

2016/12/12 HTML / CSS

日本乐天官方海外转运服务：Rakuten Global Express

2018/11/30 全球购物

老师自我鉴定范文

2013/12/25 职场文书

初中校园广播稿

2014/02/02 职场文书

公司授权委托书范本

2014/04/03 职场文书

vue实现无缝轮播效果（跑马灯）

2021/05/14 Vue.js

MySQL官方导出工具mysqlpump的使用

2021/05/21 MySQL