jquery实现倒计时小应用

 更新时间:2017年09月19日 14:16:14   作者:FungLeo  
这篇文章主要为大家详细介绍了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 uaMatch源代码

    jquery uaMatch源代码

    在jQuery 中只要用行uaMatch()这个函数。用到的关键点有:1.regExp.exec(str);2.navigator.userAgent;
    2011-02-02
  • 基于jquery自己写tab滑动门(通用版)

    基于jquery自己写tab滑动门(通用版)

    今天与大家分享一下,自己写的滑动门。在网上也搜索了一下,没发现比较好的,于是乎自己写一吧~写起来也很简单,为了方便使用,我已经尽量封装好了。好吧,闲话少说,直接上代码吧
    2012-10-10
  • jQuery实现的网页左侧在线客服效果代码

    jQuery实现的网页左侧在线客服效果代码

    这篇文章主要介绍了jQuery实现的网页左侧在线客服效果代码,涉及简单的jQuery页面动画显示与隐藏效果实现技巧,非常具有实用价值,需要的朋友可以参考下
    2015-10-10
  • jquery获取当前点击的元素的五种方法介绍

    jquery获取当前点击的元素的五种方法介绍

    我们可以使用$(this)方法获取事件处理函数内部的当前元素,也可以使用e.target方法在外部获取当前元素,此外,我们还介绍了parent()方法和find()方法获取当前元素的父元素或子元素,以及closest()方法获取当前元素最近的祖先元素
    2023-08-08
  • 推荐40个非常优秀的jQuery插件和教程【系列三】

    推荐40个非常优秀的jQuery插件和教程【系列三】

    jQuery 在如今的 Web 开发项目中扮演着重要角色,jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。本文大家分享40个实用的 jQuery 插件,可以根据您的项目需要来选择使用
    2011-11-11
  • jquery.validate使用详解

    jquery.validate使用详解

    Ajax在Web应用中的作用越来越大,许多工具都包含了对这一功能的使用,以下是对这些常用工具中Ajax的典型实例.
    2016-06-06
  • 文本域光标操作的jQuery扩展分享

    文本域光标操作的jQuery扩展分享

    最近的项目中,好几次用到操作文本域的方法,比如光标位置、删除光标前字符等。每次都是查阅资料(这部分操作涉及到的js方法都比较生僻),费时费事。于是就封装了一个jQuery扩展
    2014-03-03
  • jQuery中Find选择器用法示例

    jQuery中Find选择器用法示例

    这篇文章主要介绍了jQuery中Find选择器用法,简单介绍了find选择器的功能,并结合实例分析了find选择器的具体使用方法,需要的朋友可以参考下
    2016-09-09
  • jQuery中append()方法用法实例

    jQuery中append()方法用法实例

    这篇文章主要介绍了jQuery中append()方法用法,实例分析了append()方法的功能、定义及在匹配元素的结尾插入指定内容的使用技巧,需要的朋友可以参考下
    2015-01-01
  • 弹出层之1:JQuery.Boxy (一) 使用介绍

    弹出层之1:JQuery.Boxy (一) 使用介绍

    Boxy是一个基于JQuery的弹出层插件,它有相对漂亮的外观,功能齐全,支持iframe,支持模式窗口但相对于同样的弹出层插件BlockUI它明显笨重,但使用不那么方便。
    2011-10-10

最新评论