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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery实现简单日历效果
Jul 05 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
调频问题解答
2021/03/01 无线电
PHP编程函数安全篇
2013/01/08 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
JS跨域总结
2012/08/30 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
Python3基础之list列表实例解析
2014/08/13 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
django实现后台显示媒体文件
2020/04/07 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
办理护照介绍信
2014/01/16 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
表扬稿格式范文
2015/01/16 职场文书
运动会广播稿20字
2015/08/19 职场文书
《司马光》教学反思
2016/02/22 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫