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 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
JS运算符简单用法示例
Jan 19 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 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日期时间函数的高级应用技巧
2009/05/16 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
python简单实现基数排序算法
2015/05/16 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
通过cmd进入python的步骤
2020/06/16 Python
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
银行实习鉴定
2013/12/13 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
广告学专业求职信
2014/06/19 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
大学生个人学年总结
2015/02/15 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript