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上传图片显示预览功能
Jun 29 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jquery简易手风琴插件的封装
Oct 13 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不用正则验证真假身份证
2013/11/06 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
PHP创建XML接口示例
2019/07/04 PHP
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
微信小程序文章详情功能完整实例
2020/06/03 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
详解python while 函数及while和for的区别
2018/09/07 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
从0开始的Python学习016异常
2019/04/08 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
python解释器spython使用及原理解析
2019/08/24 Python
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
婚礼秀策划方案
2014/05/19 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
公司捐书倡议书
2015/04/27 职场文书
2015年度企业工作总结
2015/05/21 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
网吧员工管理制度
2015/08/05 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
初一语文教学反思
2016/03/03 职场文书