javascript 倒计时

从事前端工作以来，经常用到很多牛人写的javascript的库和插件。很是羡慕他们的能力，
自己也是以他们这些能人为目标不断努力。自己一直以来都想写一个自己的js库，再封装一
些自己常用插件，想法是美丽动人的，现实是自己一直都还没一个很好的行动。

很多人的想法是很丰富的，东南西北的乱想，但是能把想的转化成现实的，就是很少。而往往
想与行动结合才是学习提升的重点。自个为了能让自己的js库能够早日出炉，已经把大概的
js库模样构思出来啦，代码已提交到https://github.com/qiheng/baseLib，欢迎大家留言
建议。我的现在的想法就是利用自己编写的js库，扩展一些常用的js插件，比如我今天要说
的倒计时的小插件。但是今天说的倒计时小插件还没结合自己编写的js库，那个js库的还有
很多的问题存在，因此不便结合它来编写插件。

现在来说说倒计时的插件吧，我是把它封装成一个构造函数TimeCountDown，daima如下：

/*
* 倒计时 ( TimeCountDown ) 封装类
* @param { String } 类的属性 传入的结束时间
*/function TimeCountDown( strTime ) {if ( this instanceof TimeCountDown ) {this.strTime = strTime;}else {return new TimeCountDown();}
}

在这个构造函数有个strTime属性，是要传入的结束时间字符串。

下面是构造函数的一个原型链方法fillZero，这个函数从名字上就知道是作用，就是
在不足长度的字符串的前面添加0，有两个参数，第一个是要传入补零的参数，第二个是补
零后的字符串长度，代码如下：

/*
* @method fillZero 类的方法 倒计时的辅助函数，对时间格式化，不足位数填零(如:8:12:5--->08:12:05)
* @paran { Number } 传入要格式的时间
* @return { String } 返回格式的时间字符串
*/TimeCountDown.prototype.fillZero = function( num, digit ) {var str = '' + num;digit = digit || 2;while ( str.length < digit ) {str = '0' + str; }return str;
}

现在是倒计时的关键代码，先看代码：

/*
* @method time 类的方法 倒计时的核心功能函数
* @return { Object || null } 返回时间,传入的时间结束啦则返回null
*/
TimeCountDown.prototype.time = function() {var aTimes = [],oResult = {},oDateEnd = null,oDateNow = null,iTimes = 0;aTimes = this.strTime.split(/[-:]|\s/g);oDateEnd = new Date( aTimes[0], aTimes[1] - 1, aTimes[2] || 1, aTimes[3] || 0, aTimes[4] || 0, aTimes[5] || 0 );oDateNow = new Date();iTimes = ( oDateEnd.getTime() - oDateNow.getTime() ) / 1000;  // 总的秒数
    oDateNow = oDateEnd = null;if ( iTimes < 0 ) {return null;}oResult.nowDays = parseInt( iTimes / 86400 ); // 天
iTimes = iTimes % 86400;oResult.nowHours = parseInt( iTimes / 3600 ); // 时iTimes = iTimes % 3600;oResult.nowMinutes = parseInt( iTimes / 60 ); // 时iTimes = iTimes % 60oResult.nowSeConds = parseInt( iTimes ); // 秒return oResult;}

这个代码里处理的时间格式比较单一，如“2013-11-22”，
“2013-11-22 12:1:45”，如果传入的时间是结束了就返回null，如果有就返回一个对象

倒计时的运用一希望时间格式为 xxx-xx-xx-xx 就是用实例化的fillZero方法，默认为填充两位

<!DOCTYPE HTML>
<html lang="en-US">
<head><meta charset="UTF-8"><title> 倒计时 </title><style type="text/css">* {margin:0; padding:0;}#clock {margin:50px; text-align:center; font:700 40px "Microsoft Yahei"}</style>
</head>
<body>
<div id="clock"><span id="days">0</span> :<span id="hours">0</span> :<span id="minutes">0</span> :<span id="seconds">0</span>
</div>
<script type="text/javascript">
function $( id ) {return typeof id === 'string' ? document.getElementById( id ) : id;
}var oDays = $('days');
var oHours = $('hours');
var oMinutes = $('minutes');
var oSeconds = $('seconds');function autoPlay() {var showTime = new TimeCountDown('2013-11-22');var timeId = setInterval(function(){var t = showTime.time();if (t) {oDays.innerHTML = showTime.fillZero( t.nowDays, 3 );oHours.innerHTML = showTime.fillZero( t.nowHours );oMinutes.innerHTML = showTime.fillZero( t.nowMinutes );oSeconds.innerHTML = showTime.fillZero( t.nowSeConds );}else {showTime = null;clearInterval( timeId );oDays.style.color = 'red';}}, 1000);
}
autoPlay();
</script>
</body>
</html>

View Code

倒计时的运用二希望时间格式为 xxx-xx-xx-xx 就是用实例化的fillZero方法，默认为填充两位；却希望每个时间数为各位，只需要将返回的时间用原生split函数进行分割处理
这样就可以利用图片作为时间数值进行时间显示。

<!DOCTYPE HTML>
<html lang="en-US">
<head><meta charset="UTF-8"><title> 倒计时 </title><style type="text/css">* {margin:0; padding:0;}#clock {margin:50px; text-align:center; font:700 40px "Microsoft Yahei"}</style>
</head>
<body>
<div id="clock"><span id="days">0</span> :<span id="hours">0</span> :<span id="minutes">0</span> :<span id="seconds">0</span>
</div>
<script type="text/javascript">
function $( id ) {return typeof id === 'string' ? document.getElementById( id ) : id;
}var oDays = $('days');
var oHours = $('hours');
var oMinutes = $('minutes');
var oSeconds = $('seconds');
function autoPlay() {var showTime = new TimeCountDown('2013-11-22');var timeId = setInterval(function(){var t = showTime.time();if (t) {oDays.innerHTML = showTime.fillZero( t.nowDays, 3 ).split('');oHours.innerHTML = showTime.fillZero( t.nowHours ).split('');oMinutes.innerHTML = showTime.fillZero( t.nowMinutes ).split('');oSeconds.innerHTML = showTime.fillZero( t.nowSeConds ).split('');}else {showTime = null;clearInterval( timeId );}}, 1000);
}
autoPlay();
</script>
</body>
</html>

View Code

以上就是倒计时的实现，功能上是有些单一，但是很是方便灵活。

转载于:https://www.cnblogs.com/qiheng/p/3438830.html

javascript 倒计时相关推荐

Javascript倒计时页面跳转
Javascript倒计时页面跳转在js中实现页面定时跳转我们要使用setInterval或setTimeOut函数,还可以使用页面的meta实现. 例1: <script type=&quo ...
html自动刷新倒计时,javascript – 倒计时结束时刷新页面
我有一个javascript倒计时脚本,我希望我的页面在倒计时结束时刷新一次. 这是我的完整代码. //JavaScript code for countdown function getTimeRe ...
javascript 倒计时工具
JavaScript 倒计时工具由于setInterval自身的不稳定性.因此,该工具主要是以setTimeout 结合递归方法来实现的, <!--* @Description: * @A ...
JavaScript倒计时算法（计算剩余多少天）实现
描述: 使用JavaScript完成指定的日期的倒计时,例如距离活动还有多少时间结束算法: 1.使用时间对象的getTime()方法获取所有的毫秒数 2.将指定时间的毫秒数和当前时间的毫秒数相减得到 ...
JavaScript倒计时及倒计时发送信息
1.js倒计时效果 <!DOCTYPE html> <html><head><meta charset="utf-8"><ti ...
JavaScript倒计时跳转到另一个页面
需求页面上显示一个倒计时5秒的数字,到了5秒以后跳转到另一个页面案例分析页面上创建一个span用于显示变化的数字,点返回链接直接跳转. 定义一个变量为5,每过1秒调用1次刷新refresh()函 ...
html加js倒计时代码,分享最简单的JavaScript倒计时代码（附完整代码）
工作中经常需要在页面中设置倒计时,那你知道JS倒计时代码怎么写吗?这篇文章就给大家分享一个最简单的JS倒计时代码,以及详细的倒计时JS代码的思路,,有一定的参考价值,感兴趣的朋友可以看看. 举例:设定 ...
JavaScript倒计时
倒计时: 1.设置一个有效的结束日期 2.计算剩余时间 3.将时间转换成可用的格式 4.输出时钟数据作为一个可重用的对象 5.在页面上显示时钟,并在它到达0时停止 <div id="c ...
JavaScript 倒计时动态效果（附带小天使）
倒计时动态效果 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...

javascript 倒计时

javascript 倒计时相关推荐

最新文章

热门文章