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 23 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jQuery 移除事件的方法
Jun 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
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
js实现数字滚动特效
2019/12/16 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
Python sys模块常用方法解析
2020/02/20 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
python创建文本文件的简单方法
2020/08/30 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
怎样拟定创业计划书
2014/05/01 职场文书
党员民主生活会材料
2014/12/15 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
Python可视化神器pyecharts绘制水球图
2022/07/07 Python
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers