Home >Web Front-end >JS Tutorial >Implementation of jQuery timer function and countdown function

Implementation of jQuery timer function and countdown function

小云云Original: 2017-12-27 11:55:472425browse

This article mainly introduces jQuery to implement the countdown function in detail. The method of jQuery to implement the timer function has certain reference value. Interested friends can refer to it. I hope it can help everyone.

In practical applications, the countdown effect is often used. The following code uses jQuery to implement a countdown timer.

<!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> 
  <p class="shop_list" id="shop_list"> 
   <ul> 
    <li> 
     <img src="img/index/zixun1.jpg"/> 
     <p class="listItem"> 
      <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="img/index/zixun1.jpg"/> 
     <p class="listItem"> 
      <h5>小米手机 Note 顶配版</h5> 
      <p>全网通 香槟金 移动联通<br/>双4G手机 双卡双待</p> 
      <em>￥2998<i>起</i></em> 
      <span class="time" data-starttime=&#39;1445982375&#39; data-endtime=&#39;1446350400&#39;></span> 
     </p> 
    </li> 
   </ul> 
  </p> 
 </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(&#39;.time&#39;); 
   //获取开始时间 
   var starttime = timeObj.data(&#39;starttime&#39;); 
    
   // 定时器函数 
   function actionDo(){ 
    return setInterval(function(){ 
     timeObj.each(function(index, el) { 
      //surplusTime为活动剩余开始时间 
      var t = $(this), 
       surplusTime = t.data(&#39;endtime&#39;) -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>

Related recommendations:

Three ways to implement user registration countdown function using js and jQuery

JavaScript minute and second countdown timer implementation method

Method to implement countdown in JS

The above is the detailed content of Implementation of jQuery timer function and countdown function. For more information, please follow other related articles on the PHP Chinese website!

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

Previous article：Implementation of jquery one-click copy to clipboard functionNext article：Implementation of jquery one-click copy to clipboard function

See more

Implementation of jQuery timer function and countdown function

Related articles