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 数组循环引起的思考
Jan 01 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
详解javascript中的事件处理
Nov 06 Javascript
理解javascript中的with关键字
Feb 15 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 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 insert语法详解
2008/06/07 PHP
PHP 采集程序原理分析篇
2010/03/05 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
一个javascript参数的小问题
2008/03/02 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
python根据多个文件名批量查找文件
2019/08/13 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
大学生毕业自荐信
2013/10/10 职场文书
网络书店创业计划书
2014/02/07 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python