jquery实现倒计时小应用

 本文实例为大家分享了jquery倒计时效果的具体代码，供大家参考，具体内容如下

html

<div id="shop_rec">
  <ul class="cf">
    <li>
      <img src="image/goods.jpg" alt="小米 Note 顶配版" />
      <div>
        <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="image/goods.jpg" alt="小米 Note 顶配版" />
      <div>
        <h5>小米 Note 顶配版</h5>
        <p>全网通 香槟金 移动联通<br />双4G手机 双卡双待</p>
        <em>¥2998<i>起</i></em>
        <span class="time" data-starttime="1445912375" data-endtime="1436350400"></span>
      </div>
    </li>
  </ul>
</div>

jquery

$(function(){
  var abj = $("#shop_rec"),
    timeObj = abj.find('.time');
  var starttime = timeObj.data('starttime');

  // 定时器函数
  function actionDo(){
    return setInterval(function(){
      timeObj.each(function(index, el) {
        var t = $(this),
          surplusTime = t.data('endtime') -starttime;
        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("");
          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();
});

 总结

不是特别优秀，但是小的应用完全没有问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# jquery  # 倒计时  # jquery实现手机发送验证码的倒计时代码  # JQuery实现倒计时按钮具体方法  # jquery简单倒计时实现方法  # 基于jQuery的倒计时实现代码  # jQuery实现倒计时跳转的例子  # jQuery倒计时代码(超简单)  # JQuery实现倒计时按钮的实现代码  # 利用jQuery实现漂亮的圆形进度条倒计时插件  # jquery 倒计时效果实现秒杀思路  # jQuery实现倒计时按钮功能代码分享  # 网通  # 香槟金  # 已经开始  # 大家分享  # 具体内容  # 大家多多  # Note  # 顶配版  # goods  # 双卡双待  # alt  # jpg  # starttime  # span  # time  # yen  # data  # br  # em 

相关文章： 如何在西部数码注册域名并快速搭建网站？  建站主机是否属于云主机类型？  制作农业网站的软件,比较好的农业网站推荐一下？  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  如何有效防御Web建站篡改攻击？  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  如何用搬瓦工VPS快速搭建个人网站？  建设网站制作价格,怎样建立自己的公司网站？  如何在服务器上三步完成建站并提升流量？  怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm，可以有哪些措施降低舍内氨气水平？  免费制作小说封面的网站有哪些,怎么接网站批量的封面单？  道歉网站制作流程,世纪佳缘致歉小吴事件，相亲网站身份信息伪造该如何稽查？  制作销售网站教学视频,销售网站有哪些？  如何通过.red域名打造高辨识度品牌网站？  ppt制作免费网站有哪些,ppt模板免费下载网站？  建站之星如何修改网站生成路径？  网站视频怎么制作,哪个网站可以免费收看好莱坞经典大片？  建站中国必看指南：CMS建站系统+手机网站搭建核心技巧解析  如何通过二级域名建站提升品牌影响力？  建站之星CMS建站配置指南：模板选择与SEO优化技巧  如何彻底删除建站之星生成的Banner？  行程制作网站有哪些,第三方机票电子行程单怎么开？  已有域名和空间如何搭建网站？  网站制作哪家好,cc、.co、.cm哪个域名更适合做网站？  香港网站服务器数量如何影响SEO优化效果？  赚钱网站制作软件,建一个网站怎样才能赚钱?是如何盈利的？  php条件判断怎么写_ifelse和switchcase的使用区别【对比】  教程网站设计制作软件,怎么创建自己的一个网站？  如何使用Golang安装API文档生成工具_快速生成接口文档  青浦网站制作公司有哪些,苹果官网发货地是哪里？  建站之星logo尺寸如何设置最合适？  建站主机选择指南：服务器配置与SEO优化实战技巧  长沙做网站要多少钱,长沙国安网络怎么样？  如何在Golang中处理模块冲突_解决依赖版本不兼容问题  如何配置WinSCP新建站点的密钥验证步骤？  Bpmn 2.0的XML文件怎么画流程图  Android自定义控件实现温度旋转按钮效果  如何通过西部数码建站助手快速创建专业网站？  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  如何正确下载安装西数主机建站助手？  建站主机如何选？性能与价格怎样平衡？  网站制作新手教程,新手建设一个网站需要注意些什么？  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  百度网页制作网站有哪些,谁能告诉我百度网站是怎么联系？  建站之星如何一键生成手机站？  上海网站制作网页,上海本地的生活网站有哪些？最好包括生活的各个方面的？  b2c电商网站制作流程,b2c水平综合的电商平台？  javascript基本数据类型及类型检测常用方法小结  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  建站之星展会模版如何一键下载生成？