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 02 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 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/04/28 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
json跟xml的对比分析
2008/06/10 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
Python单链表的简单实现方法
2014/09/23 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
python逆序打印各位数字的方法
2018/06/25 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
python解析yaml文件过程详解
2019/08/30 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
工商治理实习生的自我评价
2014/01/15 职场文书
学期自我评价
2014/01/27 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
党支部书记岗位职责
2015/02/15 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
高中生军训感言
2015/08/01 职场文书
小学班级标语口号大全
2015/12/26 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
python本地文件服务器实例教程
2021/05/02 Python
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记