原版的jQuery组件只支持到秒级,现做了改动,已经支持到毫秒级,改完以后的js代码如下

/**
* 倒计时插件
* @author Tungse
* @param dayTag 显示天数的html
* @param hourTag 显示小时的html
* @param minTag 显示分钟的html
* @param secTag 显示秒数的html
* @param dayClass 绑定天数对应tag的ClassName
* @param hourClass 绑定小时对应tag的ClassName
* @param minClass 绑定分钟对应tag的ClassName
* @param secClass 绑定秒数对应tag的ClassName
* @param msecClass 绑定毫秒数对应tag的ClassName
* @param isDefault 是否使用默认tagTemp
* @param showTemp 显示模板0:(天时分秒) 1:(时分秒)
* @param backfun 定时完成回调
*/
(function ($) {
$.fn.countdownsync = function (tagTemp, backfun) {
var data = "";
var _DOM = null;
var _defaultTag = _TempTag = {
dayTag: "<li class='countdownday'></li><li class='split'>天</li>",
hourTag: "<li class='countdownhour'></li><li class='split'>:</li>",
minTag: "<li class='countdownmin'></li><li class='split'>:</li>",
secTag: "<li class='countdownsec'></li><li class='split'>:</li>",
msecTag: "<li class='countdownmsec'></li><li class='split'>:</li>",
dayClass: ".countdownday",
hourClass: ".countdownhour",
minClass: ".countdownmin",
secClass: ".countdownsec",
msecClass: ".countdownmsec",
isDefault: false,
showTemp:0
};
var _temp = $.extend(_TempTag, tagTemp);
var TIMER;
createdom = function (dom) {
_DOM = dom;
data = Math.round($(dom).attr("data"));
var htmlstr = (_temp.showTemp == 0 ? _temp.dayTag : "") + _temp.hourTag + _temp.minTag + _temp.secTag + _temp.msecTag;
if (_temp.isDefault) {
htmlstr = (_temp.showTemp == 0 ? _defaultTag.dayTag : "") + _defaultTag.hourTag + _defaultTag.minTag + _defaultTag.secTag + _defaultTag.msecTag;
htmlstr = "<ul class='countdown'>" + htmlstr + "</ul>";
$("head").append("<style type='text/css'>.countdown {list-style:none;}.countdown li{float:left;background:#000;color:#fff;border-radius:50%;padding:10px;font-size:14px; font-weight:bold;margin:10px;}.countdown li.split{background:none;margin:10px 0;padding:10px 0;color:#000000;}</style>");
}
$(_DOM).html(htmlstr);
reflash();
};
reflash = function () {
var range = data,
msecday = 86400000,
msechour = 3600000,
msemin = 60000,
msecsec = 1000,
days = parseInt(range / msecday),
hours = parseInt((range - days * msecday) / msechour),
min = parseInt((range - days * msecday - hours * msechour) / msemin),
sec = parseInt((range - days * msecday - hours * msechour - min * msemin) / msecsec),
msec = range - days * msecday - hours * msechour - min * msemin - sec * msecsec;
data = data - 20;
if (range < 0) {
window.clearInterval(TIMER); //清楚定时器
} else {
$(_DOM).find(_temp.dayClass).html(nol(days));
$(_DOM).find(_temp.hourClass).html(nol(hours));
$(_DOM).find(_temp.minClass).html(nol(min));
$(_DOM).find(_temp.secClass).html(nol(sec));
$(_DOM).find(_temp.msecClass).html(mnol(msec));
}
if ((range - 1) == 0) {
undefined == backfun ? function () { } : backfun();
}
};
TIMER = setInterval(reflash, 20); nol = function (h) {
return h > 9 ? h : '0' + h;
};
// 毫秒处理
mnol = function (h) {
if(h <= 9) {
return '00' + h
} else if((h > 9) && (h <= 99)) {
return '0' + h
} else {
return h
}
}
return this.each(function () {
var $box = $(this);
createdom($box);
});
}; })(jQuery);

使用如下方式调用

<!-- data里写毫秒数 900000就是15分钟 -->
<span class="countdownWin" data="900000"></span> <script>
$('.countdownWin').countdownsync({
dayTag: "",
hourTag: "<label class='tt hh dib vam'>00</label><span>:</span>",
minTag: "<label class='tt mm dib vam'>00</label><span>:</span>",
secTag: "<label class='tt ss dib vam'>00</label><span>:</span>",
msecTag: "<label class='tt ms dib vam'>000</label><span></span>",
dayClass: ".dd",
hourClass: ".hh",
minClass: ".mm",
secClass: ".ss",
msecClass: '.ms',
isDefault: false,
showTemp:1
}, function () { });
</script>

基于jquery的countdown插件实现毫秒倒计时的更多相关文章

  1. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

  2. 基于jQuery头像裁剪插件cropbox

    今天给大家分享一款基于jQuery头像裁剪插件cropbox,这是一款简单实用的jQuery头像在线裁剪插件.该插件适用于适用浏览器:IE8.360.FireFox.Chrome.Safari.Ope ...

  3. 基于jQuery的用户界面插件集合---EasyUI

    easyui是一种基于jQuery的用户界面插件集合.为创建现代化,互动,JavaScript应用程序,提供必要的功能.使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以 ...

  4. 基于jQuery的tooltips插件--poshytip

    摘要: 分享一款在项目中使用的tooltips插件--poshytip,这是一款基于jQuery的插件,其特点是简单易用,支持浏览器:IE6+, FF 2+, Opera 9+, Safari 3+, ...

  5. 一款基于jQuery的分页插件

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  6. 基于Jquery、JqueryUI插件编写

    刚开始编写jquery插件的时候,只是从网上找个模板看着写,并不理解.刚刚仔细把官网的API看了下,突然觉得豁然开朗了.马上放假了想着应该整理整理不然忘了又. How to create a Jque ...

  7. 基于jquery 的分页插件,前端实现假分页效果

    上次分享了一款jquery插件,现在依旧分享这个插件,不过上一次分享主要是用于regular框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...

  8. 基于jQuery的自定义插件:实现整屏分页转换的功能

    动态创建jQuery插件 一.实现功能: 1.基本功能:自适应式整屏分页功能的实现 2.通过鼠标点击标签页转换分页,支持键盘上下左右键的转换分页,同样支持 鼠标滚轮上下滑动转换分页 3.切屏时的动画效 ...

  9. 基于jquery的-获取短信验证码-倒计时

    在制作短信验证的时候,需要做一个获取短信按钮,点击后显示倒计时, html代码如下: <input class="gain" type="button" ...

  10. 自编基于jQuery实现分页插件

    $(function(){ }); /** * @params dataUrl:请求数据url地址 * @params countUrl:请求数据总数url地址 * @params pageSize: ...

随机推荐

  1. Servlet中过滤器、监听器和拦截器的区别

    基本概念   过滤器(Filter):当你有一堆东西的时候,你只希望选择符合你要求的某一些东西.定义这些要求的工具,就是过滤器.就是对请求起到过滤的作用:在监听器之后servlet之前对请求进行过滤. ...

  2. Vue 学习笔记 [Part 2]

    作者:故事我忘了¢个人微信公众号:程序猿的月光宝盒 目录 一. 计算属性 1.1. 计算属性的本质 1.2. 计算属性和methods对比 〇.ES6补充 0.1. let/var 0.2 const ...

  3. Springboot笔记<2>IOC容器与组件注入

    IOC容器就是具有依赖注入功能的容器,IOC容器负责实例化.定位.配置应用程序中的对象及建立这些对象间的依赖.应用程序无需直接在代码中new相关的对象,应用程序由IOC容器进行组装. 查看ioc容器中 ...

  4. 告别脆弱的 Playwright 测试:为什么基于 YAML 的测试是未来趋势

    专为 Claude Code 和 Playwright MCP 打造的 YAML 配置如何改变了我们的测试工作流程,让自动化测试变得人人可用 如果你曾经维护过大型 Playwright 测试套件,你一 ...

  5. Java 内存模型与 Happens-Before 关系深度解析

    在 Java 并发编程中,Java 内存模型(Java Memory Model, JMM)与 Happens-Before 关系是理解多线程数据可见性和有序性的核心理论.本文从 JMM 的抽象模型出 ...

  6. .net入行第4年(续集)

    .net入行第4年 - 园友2288976 - 博客园 .NET入行第4年 | 第二集的开始:账号封禁后的思考与转型 园友2288976 - 博客园 很多朋友希望我写得更详细一点,特别是"怎 ...

  7. Nginx 本地代理转发请求 502 Bad Gateway

    问题 在使用 yum 安装 nginx 后可能会出现配置完成后却无法访问的问题,查看 audit.log 会发现类似于以下的错误信息 原因 出现此问题的原因是 SELinux 基于最小权限原则默认拦截 ...

  8. 打砖块小游戏html小游戏

    这里提供一个打砖块小游戏html代码,有需要的小伙伴可以自己试试. body内容 点击查看代码 <select id="difficulty"> <option ...

  9. 10-2 MySQL 索引优化与查询优化

    10-2 MySQL 索引优化与查询优化 @[toc] 这篇文章是我蹲在<尚硅谷>-康师傅博主家的 WiFi 上(不是),连夜 Ctrl+C / V 俩的镇站神文. 这篇转载只是为了,跟大 ...

  10. .Net 5 调用 HttpContext.SignInAsync 报错 Microsoft.AspNetCore.Authentication.AuthenticationService.ChallengeAsync(HttpContext context, string scheme, AuthenticationProperties properties) 解决

    An unhandled exception occurred while processing the request. InvalidOperationException: No authenti ...