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平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
php&amp;java(一)
2006/10/09 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
Node 代理访问的实现
2019/09/19 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
python处理cookie详解
2014/02/07 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
Django实现发送邮件功能
2019/07/18 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
巴基斯坦购物网站:Goto
2019/03/11 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
GC是什么?为什么要有GC?
2013/12/08 面试题
学生就业推荐信
2013/11/13 职场文书
名人演讲稿范文
2013/12/28 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
MySQL数据库 安全管理
2022/05/06 MySQL