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实现全选、反选和不选功能
Aug 16 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 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 字符串替换的方法
2012/01/10 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
php适配器模式简单应用示例
2019/10/23 PHP
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
js轮播图无缝滚动效果
2017/06/17 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
JS实现求5的阶乘示例
2019/01/21 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
Python中私有属性的定义方式
2020/03/05 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
仓管岗位职责范本
2014/02/08 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
学校百日安全活动总结
2015/05/07 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
Python基础之元类详解
2021/04/29 Python