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一些不错的函数脚本代码
Sep 10 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 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中去除所有js,html,css代码
2010/10/12 PHP
第四章 php数学运算
2011/12/30 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
javascript 一些用法小结
2009/09/11 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
Django实现跨域请求过程详解
2019/07/25 Python
解决Django连接db遇到的问题
2019/08/29 Python
python 实现屏幕录制示例
2019/12/23 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
移动通信专业自荐信范文
2013/11/12 职场文书
暑期研修感言
2014/02/17 职场文书
教师党员一句话承诺
2014/03/28 职场文书
市场营销策划方案
2014/06/11 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
教师年终个人总结
2015/02/11 职场文书
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis