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中的deferred使用方法
Mar 27 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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 和 COM
2006/10/09 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
PHP7新功能总结
2019/04/14 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
浅析vue-router原理
2018/10/19 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
微信小程序实现原生步骤条
2019/07/25 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
Python与shell的3种交互方式介绍
2015/04/11 Python
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python中方法链的使用方法
2016/02/23 Python
Python实现读取并保存文件的类
2017/05/11 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python程序需要编译吗
2020/06/19 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
毕业研究生的自我鉴定
2013/11/30 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
全陪导游词
2015/02/04 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
新学期开学寄语2016
2015/12/04 职场文书
分家协议书范本
2016/03/22 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
Python 全局空间和局部空间
2022/04/06 Python