jquery实现一个全局计时器(商城可用)


Posted in jQuery onJune 30, 2017

本文实例为大家分享了商城一类都可以使用的jquery全局计时器,供大家参考,具体内容如下

实现思路

遍历所有待计时元素,添加一个setInterval计时函数,每隔X秒执行更新计时操作(中间可能还有格式化时间操作)。

代码实现

ps:JQ元素通过arr[i]取值时会转变成DOM元素,dom元素和JQ之间转换用 $(arr[i])

获取所有待计时元素

var arrList =$(".stime");
setInterval(function(){
 //遍历数组
 for(var i = 0,l = arrList.length; i<l ;i++ ){
  var elem = arrList[i];
  //格式化时间插入HTML文档
  $(elem).html(DateDiff( new Date(), new Date($(elem).attr("time") ), elem ));
 }
},1000);

计算时间函数,可倒可正

ps:如果是Java后台传过来的时间,注意下时间格式,这里已经做了处理(是个坑点);

/*DateDiff 处理*/
function DateDiff(t1, t2, elem){
 //GTM CST 时间相差14小时 
 var diff = t1.setHours(t1.getHours()+14) - Date.parse(t2);
 //超过一天显示warning色
 if(diff>(1000*60*60*24)){
  $(elem).css({color:"rgb(247, 186, 42)"});
 }
 return ShowTime(diff);
}

显示处理函数,可自行选择精确度

不需要,注释掉即可

/*fuc 计时显示处理*/
function ShowTime(ms){
 var obj = {
  "天" : 1000*60*60*24,
  "时" : 1000*60*60,
  "分" : 1000*60
  /*
  "秒" : 1000
  */
 };
 var tmp = ms;
 var str = "";
 for( var i in obj ){
  //向下取整 1.5天 => 1天
  s = Math.floor( tmp / obj[i] );
  tmp = tmp % obj[i];
  str += s+i;
 }
 return str;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery表单设置值的方法
Jun 30 #jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 #jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 #jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 #jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 #jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 #jQuery
基于jQuery封装的分页组件
Jun 26 #jQuery
You might like
php的正则处理函数总结分析
2008/06/20 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
Js动态创建div
2008/09/25 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
一份python入门应该看的学习资料
2018/04/11 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
使用python实现kNN分类算法
2019/10/16 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
武汉东之林科技有限公司机试
2013/09/17 面试题
优纳科技软件测试面试题
2012/05/15 面试题
本科毕业生自荐信
2014/05/26 职场文书
钱学森电影观后感
2015/06/04 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技