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实现文章图片弹出放大效果
Apr 06 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jquery实现拖拽小方块效果
Dec 10 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中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
php编写简单的文章发布程序
2015/06/18 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
潜说js对象和数组
2011/05/25 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
AngularJS中的promise用法分析
2017/05/19 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
python django 实现验证码的功能实例代码
2017/05/18 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python计算IV值的示例讲解
2020/02/28 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
留学自荐信
2013/10/10 职场文书
大学生军训自我评价分享
2013/11/09 职场文书
安全技术说明书
2014/05/09 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis