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 相关文章推荐
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
微信小程序实现签字功能
Dec 23 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 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数据库表操作的封装类及用法实例详解
2016/07/12 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
Python中除法使用的注意事项
2014/08/21 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
python实现随机漫步算法
2018/08/27 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
pygame实现成语填空游戏
2019/10/29 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
行政前台岗位职责
2013/12/04 职场文书
小学运动会表扬稿
2014/01/19 职场文书
收款委托书范本
2014/09/11 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技