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实现前端分页功能
Mar 23 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery实现高级检索功能
May 28 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery HTML css()方法与css类实例详解
May 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生成静态html文件的三种方法
2013/06/18 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
Python中获取网页状态码的两个方法
2014/11/03 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
Python list与NumPy array 区分详解
2019/11/06 Python
wxpython绘制音频效果
2019/11/18 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Django中的session用法详解
2020/03/09 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
英国大码女性时装零售商:Evans
2018/08/29 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
工作自荐信
2013/12/11 职场文书
单位未婚证明范本
2014/01/18 职场文书
求职简历的自我评价
2014/01/31 职场文书
工厂会计员职责
2014/02/06 职场文书
自我检讨报告
2015/01/28 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
html form表单基础入门案例讲解
2021/07/21 HTML / CSS