>  기사  >  웹 프론트엔드  >  jquery를 사용하여 작은 카운트다운 기능 구현

jquery를 사용하여 작은 카운트다운 기능 구현

巴扎黑
巴扎黑원래의
2017-09-21 11:59:031523검색

이 글은 주로 카운트다운 소형 애플리케이션을 구현하기 위한 jquery를 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

이 글의 예시는 참고용으로 특정 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();
});

Summary

특별히 우수하지는 않지만 소규모 애플리케이션에는 전혀 문제가 없습니다.

위 내용은 jquery를 사용하여 작은 카운트다운 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.