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延迟执行实现方法(setTimeout)
Dec 30 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
JavaScript实现多球运动效果
Sep 07 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动态实现表格跨行跨列实现代码
2012/11/06 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
基于jquery的页面划词搜索JS
2010/09/14 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
Vue页面骨架屏的实现方法
2018/05/22 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
python分治法求二维数组局部峰值方法
2018/04/03 Python
Python3实现转换Image图片格式
2018/06/21 Python
python实现图片彩色转化为素描
2019/01/15 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
.net软件工程师面试题
2015/03/31 面试题
介绍一下gcc特性
2012/01/20 面试题
教师申诉制度
2014/01/29 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
研讨会主持词
2014/04/02 职场文书
应届大专生自荐书
2014/06/16 职场文书
校长四风对照检查材料
2014/09/27 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android