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遮罩层实例讲解
May 11 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 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
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
php接口隔离原则实例分析
2019/11/11 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
js实现网页随机验证码
2020/10/19 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python__name__原理及用法详解
2019/11/02 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
Python 代码调试技巧示例代码
2020/08/11 Python
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
个人求职简历中英文自我评价
2013/12/16 职场文书
教师群众路线心得体会
2014/11/04 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
2015年电教工作总结
2015/05/26 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书