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 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
vuex实现简易计数器
Oct 27 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
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
用文本文件制作留言板提示(下)
2006/10/09 PHP
组合算法的PHP解答方法
2012/02/04 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
php常用的工具开发整理
2019/09/26 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
Vue下的国际化处理方法
2017/12/18 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python编程之属性和方法实例详解
2015/05/19 Python
python保存字符串到文件的方法
2015/07/01 Python
django框架自定义用户表操作示例
2018/08/07 Python
python关于变量名的基础知识点
2020/03/03 Python
python如何设置静态变量
2020/09/07 Python
策划主管的工作职责
2013/11/24 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
环保倡议书
2014/04/14 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
法人代表证明书格式
2014/10/01 职场文书
教导主任个人总结
2015/03/03 职场文书
爱心捐助活动总结
2015/05/09 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
python微信智能AI机器人实现多种支付方式
2022/04/12 Python