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 继承实例分析
Nov 04 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
js实现窗口全屏示例详解
Sep 17 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
PHP4和PHP5共存于一系统
2006/11/17 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
python使用tensorflow深度学习识别验证码
2018/04/03 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
幼儿园大班家长评语
2014/04/17 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
写给老婆的保证书
2015/02/27 职场文书
2019同学聚会主持词
2019/05/06 职场文书
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL
Python如何加载模型并查看网络
2022/07/15 Python