Home  >  Article  >  Web Front-end  >  详解jquery实现倒计时小应用

详解jquery实现倒计时小应用

ringa_lee
ringa_leeOriginal
2017-12-27 13:27:371365browse

本文主要为大家详细介绍了jquery实现倒计时小应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

html


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

jquery


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

  // 定时器函数
  function actionDo(){
    return setInterval(function(){
      timeObj.each(function(index, el) {
        var t = $(this),
          surplusTime = t.data(&#39;endtime&#39;) -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计时器功能和倒计时功能的实现

三种js与jQuery实现用户注册倒计时功能的方法

JavaScript分秒倒计时器实现方法

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn