Jquery倒计时源码分享


Posted in Javascript onMay 16, 2014

在静态页添加显示倒计时的容器,并引用下面脚本,代入时间参数即可使用。

timeoutDate——到期时间,时间格式为2014/01/01或2014/1/1

D——天

H——小时

M——分钟

S——秒

xs——数字0~9

效果图:

Jquery倒计时源码分享

代码展示:

html:

<span id="top_tuan_countdown"></span>

jquery:

$().ready(function () {
    CcountDown([, , timeoutDate], ['还有 <b><font color="#ff0000" size="4">D</font> 天 </b><b><font color="#ff0000" size="4">H</font> 时 </b><b><font color="#ff0000" size="4">M</font> 分 </b><b><font color="#ff0000" size="4">S</font> 秒 </b><b><font color="#ff0000" size="4">xs</font></b> 到期', '', ''], '#top_tuan_countdown', function () { $('#top_tuan_countdown').remove() });
})
function CcountDown(t, c, _self, fn) {
    function nd(d) {
        return isNaN(d) ? (d ? new Date(d).getTime() : new Date().getTime()) : d * 1000;
    }
    var e = [nd(t[0]), nd(t[1]), nd(t[2])], _s = _self, b;
    if (t[0] && e[0] > e[1]) {
        $(_s).html(c[1]);
        return;
    } else if (e[1] > e[2]) {
        fn && fn($(_s));
        $(_s).html(c[2]);
        return;
    }
    (b = function (l) {
        var l = l || (e[2] - e[1]) / 100, k = {
            D: l / 36000 / 24, H: l / 36000 % 24, M: l / 600 % 60, S: l / 10 % 60, xs: l % 10
        };
        $(_s).html(c[0].replace(/D|H|M|S|xs/g, function (m) {
            var n = parseInt(k[m]) + ''
            if (n.length == 1 && m != 'D' && m != 'xs') {
                n = 0 + n;
            }
            return n
        }));
        setTimeout(function () {
            b(l - 1)
        }, 100);
    })()
}
Javascript 相关文章推荐
javascript eval函数深入认识
Feb 21 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
js实现本地时间同步功能
Aug 26 Javascript
vue地区选择组件教程详解
May 04 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
js取模(求余数)隔行变色
May 15 #Javascript
JS案例分享之金额小写转大写
May 15 #Javascript
自写的jQuery异步加载数据添加事件
May 15 #Javascript
js子页面获取父页面数据示例
May 15 #Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 #Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 #Javascript
javascript常用的正则表达式实例
May 15 #Javascript
You might like
PHP数据库开发知多少
2006/10/09 PHP
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
js 操作select相关方法函数
2009/12/06 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
node网页分段渲染详解
2016/09/05 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
python学习 流程控制语句详解
2016/06/01 Python
Python函数的周期性执行实现方法
2016/08/13 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Django在win10下的安装并创建工程
2017/11/20 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
什么是封装
2013/03/26 面试题
大学生求职计划书
2014/04/30 职场文书
工作说明书范文
2014/05/07 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS