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 replace方法去空格
May 08 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jquery插件实现搜索历史
Apr 24 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中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
Angular 项目实现国际化的方法
2018/01/08 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
详解node.js 事件循环
2020/07/22 Javascript
Python文件夹与文件的操作实现代码
2014/07/13 Python
Python标准库之collections包的使用教程
2017/04/27 Python
python机器学习之决策树分类详解
2017/12/20 Python
Python中Threading用法详解
2017/12/27 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
记帐员岗位责任制
2014/02/08 职场文书
大学生自我鉴定书
2014/03/24 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android