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 相关文章推荐
Javascript操纵Cookie实现购物车程序
Nov 23 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 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
Zend Guard一些常见问题解答
2008/09/11 PHP
.htaccess文件保护实例讲解
2011/02/06 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
PHP的几个常用加密函数
2016/02/03 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
python 写一个文件分发小程序
2020/12/05 Python
python爬取youtube视频的示例代码
2021/03/03 Python
草莓网官网:StrawberryNET
2019/08/21 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
新三好学生主要事迹
2014/01/23 职场文书
村党支部公开承诺书
2014/05/29 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python