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 相关文章推荐
css值转换成数值请抛弃parseInt
Oct 24 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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学习资料汇总与网址
2007/03/16 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
Using the TextRange Object
2006/10/14 Javascript
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
巧用canvas
2017/01/21 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
python下如何让web元素的生成更简单的分析
2008/07/17 Python
python处理json数据中的中文
2014/03/06 Python
python基础教程之自定义函数介绍
2014/08/29 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
python圣诞树编写实例详解
2020/02/13 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
借款协议书
2014/09/16 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
大学生毕业个人总结
2015/02/15 职场文书
工程款申请报告
2015/05/15 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL