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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
PHP中的use关键字概述
2014/07/23 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
用Python生成器实现微线程编程的教程
2015/04/13 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python贪吃蛇游戏代码
2020/04/18 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
python中pyqtgraph知识点总结
2021/01/26 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
工厂保安员岗位职责
2014/01/31 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
新员工考核评语
2014/12/31 职场文书
人事文员岗位职责
2015/02/04 职场文书
小学庆六一主持词
2015/06/30 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers