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 autocomplete 使用手册
Apr 01 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
小程序实现录音功能
Sep 22 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 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
php MYSQL 数据备份类
2009/06/19 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
php修改数组键名的方法示例
2017/04/15 PHP
laravel model 两表联查示例
2019/10/24 PHP
Ajax 数据请求的简单分析
2011/04/05 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
python实现关键词提取的示例讲解
2018/04/28 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
Python sorted排序方法如何实现
2020/03/31 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
销售演讲稿范文
2014/01/08 职场文书
计生工作先进事迹
2014/08/15 职场文书
银行授权委托书格式
2014/10/10 职场文书
组织生活会发言材料
2014/12/15 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
捐书仪式主持词
2015/07/04 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android