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 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
Django使用多数据库的方法
Sep 06 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
js实现盒子滚动动画效果
Aug 09 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
laravel安装zend opcache加速器教程
2015/03/02 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
Python中自定义函数的教程
2015/04/27 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
Python配置文件处理的方法教程
2019/08/29 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
亲子运动会的活动方案
2014/08/17 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
会计主管岗位职责
2015/04/02 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python
OpenCV实现常见的四种图像几何变换
2022/04/01 Python