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

Javascript 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 Javascript
css配合jquery美化 select
Nov 29 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
js字符串处理之绝妙的代码
Apr 05 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
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 获取百度的热词数据的代码
2012/02/18 PHP
PHP解析RSS的方法
2015/03/05 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
详解Vue方法与事件
2017/03/09 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
layui实现数据分页功能
2019/07/27 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
python实现的udp协议Server和Client代码实例
2014/06/04 Python
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python多线程编程(五):死锁的形成
2015/04/05 Python
numpy中的高维数组转置实例
2018/04/17 Python
Django ModelForm操作及验证方式
2020/03/30 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
小学教师岗位职责
2013/11/25 职场文书
设计顾问服务计划书
2014/05/04 职场文书
法制宣传标语
2014/06/23 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL