欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery实现倒计时小应用

程序员文章站 2022-04-28 23:33:31
 本文实例为大家分享了jquery倒计时效果的具体代码,供大家参考,具体内容如下 html
...

 本文实例为大家分享了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();
});

 总结

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

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