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 相关文章推荐
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
js获取 type=radio 值的方法
May 09 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
vue实现分页加载效果
Dec 24 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 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
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
Python脚本实现网卡流量监控
2015/02/14 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
财务会计专业毕业生自荐信
2013/10/02 职场文书
应届大学生求职信
2013/12/01 职场文书
公司建议书怎么写
2014/05/15 职场文书
理财计划书
2014/08/14 职场文书
个人租房协议书
2014/11/28 职场文书
工作能力自我评价2015
2015/03/05 职场文书
廉政承诺书2015
2015/04/28 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android