jQuery实现倒计时功能 jQuery实现计时器功能


Posted in jQuery onSeptember 19, 2017

本文转载自 jquery 做一个小的倒计时效果

在实际运用中,经常会使用到倒计时的效果。以下代码利用jQuery实现了一个倒计时计时器。

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title>jquery倒计时实现</title> 
 <style type="text/css"> 
  .shop_list ul li{ 
  display: inline-block; 
  list-style: none; 
  width: 300px; 
  } 
 </style> 
 </head> 
 <body> 
 <div class="shop_list" id="shop_list"> 
  <ul> 
  <li> 
   <img src="img/index/zixun1.jpg"/> 
   <div class="listItem"> 
   <h5>小米手机 Note 顶配版</h5> 
   <p>全网通 香槟金 移动联通<br/>双4G手机 双卡双待</p> 
   <em>¥2998<i>起</i></em> 
   <span class="time" data-starttime="1445982375" data-endtime="1446350400"></span> 
   </div> 
  </li> 
  <li> 
   <img src="img/index/zixun1.jpg"/> 
   <div class="listItem"> 
   <h5>小米手机 Note 顶配版</h5> 
   <p>全网通 香槟金 移动联通<br/>双4G手机 双卡双待</p> 
   <em>¥2998<i>起</i></em> 
   <span class="time" data-starttime='1445982375' data-endtime='1446350400'></span> 
   </div> 
  </li> 
  </ul> 
 </div> 
 </body> 
 <script type="text/javascript" src="js/lib/jquery-1.10.1.min.js" ></script> 
 <script type="text/javascript"> 
 $(function(){ 
  //找到商品列表以及时间显示span 
  var abj = $("#shop_list"), 
  timeObj = abj.find('.time'); 
  //获取开始时间 
  var starttime = timeObj.data('starttime'); 
  
  // 定时器函数 
  function actionDo(){ 
  return setInterval(function(){ 
   timeObj.each(function(index, el) { 
   //surplusTime为活动剩余开始时间 
   var t = $(this), 
    surplusTime = t.data('endtime') -starttime; 
   //若活动剩余开始时间小于0,则说明活动已开始 
   if (surplusTime <= 0) { 
    t.html("活动已经开始"); 
   } else{ 
   //否则,活动未开始,将剩余的时间转换成年,月,日,时,分,秒的形式 
    var year = surplusTime/(24*60*60*365), 
    showYear = parseInt(year), 
    month = (year-showYear)*12, 
    showMonth = parseInt(month), 
    day = (month-showMonth)*30, 
    showDay = parseInt(day), 
    hour = (day-showDay)*24, 
    showHour = parseInt(hour), 
    minute = (hour-showHour)*60, 
    showMinute = parseInt(minute), 
    seconds = (minute-showMinute)*60, 
    showSeconds = parseInt(seconds); 
    t.html(""); 
    //设置输出到HTML的格式并输出到HTML 
    if (showYear>0) { 
    t.append("<span>"+showYear+"年</span>") 
    }; 
    if (showMonth>0) { 
    t.append("<span>"+showMonth+"月</span>") 
    }; 
    if (showDay>0) { 
    t.append("<span>"+showDay+"天</span>") 
    }; 
    if (showHour>=0) { 
    t.append("<span>"+showHour+"小时</span>") 
    }; 
    if (showMinute>=0) { 
    t.append("<span>"+showMinute+"分钟</span>") 
    }; 
    if (showSeconds>=0) { 
    t.append("<span>"+showSeconds+"秒</span>") 
    }; 
   }; 
   }); 
   starttime++; 
  },1000); // 设定执行或延时时间 
  }; 
  // 执行它 
  actionDo(); 
 }); 
 </script> 
</html>

更多关于倒计时的文章请查看专题:《倒计时功能》

更多JavaScript时钟特效点击查看:JavaScript时钟特效专题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jquery实现倒计时小应用
Sep 19 #jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 #jQuery
jQuery选择器之表单元素选择器详解
Sep 19 #jQuery
jQuery实现简单日期格式化功能示例
Sep 19 #jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 #jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 #jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 #jQuery
You might like
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
PHP文件注释标记及规范小结
2012/04/01 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
php正则修正符用法实例详解
2016/12/29 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
python格式化字符串实例总结
2014/09/28 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
Python3 合并二叉树的实现
2019/09/30 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
大学毕业生个人自荐信范文
2014/01/08 职场文书
档案接收函范文
2014/01/10 职场文书
党员公开承诺事项
2014/03/25 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书