jquery/js实现一个网页同时调用多个倒计时(最新的)

最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦!



//js

//js2
var plugJs={
    stamp:0,
    tid:1,
    stampnow:Date.parse(new Date())/1000,//统一开始时间戳
    intervalTime:function(){
        if(plugJs.stamp > 0){
            var day = Math.floor(plugJs.stamp / (60 * 60 * 24));
            var hour = Math.floor(plugJs.stamp / (60 * 60)) - (day * 24);
            var minute = Math.floor(plugJs.stamp / 60) - (day * 24 * 60) - (hour * 60);
            var second = Math.floor(plugJs.stamp) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            
            if (day <= 9) day = '0' + day;
            if (hour <= 9) hour = '0' + hour;
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            jQuery('.t_h_'+plugJs.tid).html(hour);
            jQuery('.t_m_'+plugJs.tid).html(minute);
            jQuery('.t_s_'+plugJs.tid).html(second);
            plugJs.stamp--;
            setTimeout('if(typeof(plugJs.intervalTime) == "function"){plugJs.intervalTime();}',1000);
        }
    },
    timer:function (stampend,tid){
        plugJs.stamp = parseInt(stampend)-parseInt(plugJs.stampnow);//剩余时间戳
        plugJs.tid = tid;
        setTimeout('if(typeof(plugJs.intervalTime) == "function"){plugJs.intervalTime();}',1000);
    }
};
jQuery(document).ready(function(){
    var stampend = parseInt(jQuery('.countdown_1').attr('data-time'));//灵活读取表里的结束时间戳
    plugJs.timer(stampend,'1');
});

 



//html 原文http://blog.csdn.net/websites/article/details/50037611

 

<div class="time countdown_1" data-time="1449429731">
    <span class="t_h_1">00</span>
    <i class="lay_line">:</i>
    <span class="t_m_1">00</span>
    <i class="lay_line">:</i>
    <span class="t_s_1">00</span>
</div>
<div class="time countdown_2" data-time="1449456731">
    <span class="t_h_2">00</span>
    <i class="lay_line">:</i>
    <span class="t_m_2">00</span>
    <i class="lay_line">:</i>
    <span class="t_s_2">00</span>

</div>

 

注释:setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

 



 

 

 

 

先看效果图！代码分别在下面展示



先看单个倒计时：

代码：

<div class="titRight">
        <div class="top">
          <p>{{detailsListDetails.cate1_name1}}</p>
          <p>还有{{detailsListDetails.project_number4}}头未有人预约计划</p>
        </div>
        <div class="bottom" v-if="ifCountDown==0">
          <p>您还有</p>
          <p style="font-size: 22px;">{{CountDown}}</p>
          <p>可以预约计划</p>
        </div>
        <div class="bottom" v-if="ifCountDown!=0">
          <p>抱歉</p>
          <p style="font-size: 22px;">预约已截止</p>
        </div>
</div>

export default {
    name: "verShops",
    data() {
      return {
        user_collect_type:"",//收藏
        token_centent:JSON.parse(sessionStorage.getItem("loginInformation")),//token
        status_type:"",//预约状态
        status_message1:"",//预约显示的文字
        CountDown:"",//单倒计时
        ifCountDown:0,
      }
    },

methods: {
    initList(){
        var that=this;
        api.post("/api/sssss/sssssss/", {//服务详情
          source:1,
          token:that.token_centent.token,//Token
          uuid:that.businessUuid,//UUID
        })
        .then(function(res) {
          if(res.data.code==1000){
            that.detailsListDetails=res.data.data
            that.value5=parseInt(res.data.data.user_star)
            that.chaturl=res.data.data.user_chat1
            that.user_collect_type=res.data.data.user_collect
            that.status_type=res.data.data.status
            that.status_message1=res.data.data.message1
            that.Djs_time();//获取数据后调用单个的倒计时
            setTimeout(that.Djs_timeList, 1000);//倒计时列表，多个
          }
        });
    },
    Djs_time: function(){
        setInterval( ()=> {
          var Deadline=new Date(this.detailsListDetails.project_time3_str).getTime();
          var presentTime=new Date().getTime();
          var rightTime = Deadline - presentTime;
          if (rightTime > 0) {
            var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
            var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
            var mm = Math.floor((rightTime / 1000 / 60) % 60);
            var ss = Math.floor((rightTime / 1000) % 60);
            this.CountDown= dd + "天" + hh + "小时" + mm + "分" + ss + "秒"
            this.ifCountDown=0
          }else{
            this.CountDown="已到截止申请时间"
            this.status_type=7
            this.status_message1="预约已结束"
            this.ifCountDown=1
          }
        }, 1000);
      },

CountDown  就是最终要在页面上显示的数据！

单个倒计时思路如下：

获取倒计时的截止时间，再获取现在的时间，截止时间戳减去现在的时间戳 如果大于0 就执行 计算结果 

最终拼字符串形式获得数据，渲染页面上即可！

多个倒计时（列表倒计时）

<p v-show="false">{{CountDown}}</p>   //辅助倒计时用于刷新

<div class="list" v-for="(item,index) in MerchantDemandList" :key="index">
    <div class="listPush">
          <div v-show="item.status==1">{{item.message1}}</div>
          <div v-show="item.status==1">
            {{Djs_timeList(item.project_time3_str)}}
            
            <!-- {{item.project_time3_str}} -->
          </div>
          <div v-show="item.status!=1">{{item.message1}}</div>
    </div>
</div>

{{Djs_timeList(item.project_time3_str)}}   for循环下面的 item里的project_time3_str就是传递的截止时间。方法Djs_timeList()

data() {
      return {
        token_centent:JSON.parse(sessionStorage.getItem("loginInformation")),//token
        status_type:"",//预约状态
        status_message1:"",//预约显示的文字
        ifCountDown:0,
        CountDown:"",//辅助倒计时用于刷新
 
      }
    },
methods: {
    initList(){
        var that=this;
        api.post("/api/sssss/sssssss/", {//服务详情
          source:1,
          token:that.token_centent.token,//Token
          uuid:that.businessUuid,//UUID
        })
        .then(function(res) {
          if(res.data.code==1000){
            that.Djs_time();//辅助列表倒计时
            that.status_message1=res.data.data.message1
            that.Djs_time();//获取数据后调用单个的倒计时
            setTimeout(that.Djs_timeList, 1000);//倒计时列表，多个
              
          }
        });
    },
    Djs_time: function(){
        setInterval( ()=> {
          var presentTime=new Date().getTime();
          this.CountDown=presentTime
        }, 1000);
      },
    Djs_timeList:function(itemEnd){
        var endItem=new Date(itemEnd).getTime();//获取列表传的截止时间
        var nowItem=new Date().getTime();//获取当前时间
        var rightTime = endItem - nowItem;//截止时间减去当前时间
        if (rightTime > 0) {//判断剩余倒计时时间如果大于0就执行倒计时否则就结束
          var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
          var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
          var mm = Math.floor((rightTime / 1000 / 60) % 60);
          var ss = Math.floor((rightTime / 1000) % 60);
          var showTime= dd + "天" + hh + "小时" + mm + "分" + ss + "秒"
          // this.MerchantDemandList.status=1
        }else{
          var showTime= "预约已结束"
          // this.MerchantDemandList.status=0
        }
        return showTime
      }
},
mounted(){
  this.initList();
},
//离开页面后清除定时器
destroyed () {
  clearInterval()
}

多个倒计时思路：

setTimeout(that.Djs_timeList, 1000) 在数据获取完成后 加定时器 每1秒执行 调用页面上所有的Djs_timeList（） 这个方法

后台正常for循环渲染数据，获取截止时间item.project_time3_str   从Djs_timeList（） 这个方法传递截止时间

Djs_timeList（）方法里 获取传递的截止时间，截止时间减去现在的时间就是剩余的时间，计算拼字符串，

return 最终结果 返回到页面展示 {{Djs_timeList(item.project_time3_str)}}

结尾

因为这个比较好理解，还是在渲染页面时for循环里直接传递参数去执行的！个人感觉比网上看的其他方法要单独提取个数组要方便多了！且我这里是用的分页，数据比较多！数量不确定，这个好理解

 

3月26 补充：

跳转其他路由后 销毁定时器  加在 destroyed 里个清除即可

mounted(){
      this.initList();
      
},
//离开页面后清除定时器
destroyed () {
      clearInterval()
},

 

更多技巧请查看vue专栏   https://blog.csdn.net/qq_42221334/column/info/27230/1



 

倒计时清除  setInterval



倒计时5s后跳转页面,      clearInterval(this.handler);  清除倒计时




不执行倒计时里面的跳转,  点击事件强制跳转到其他页面 并且清除 倒计时任务



  // 倒计时
    cutDown() {
          this.handler = setInterval(() => {
        // 路由跳转后 倒计时没有清理 在点击跳转时清除定时器
        this.second--;
        if (this.second == 0) {
          clearInterval(this.handler);  // 跳转成功后 清除 倒计时
          this.detailsSkipFn();  // 执行跳转页面
        }
      }, 1000);
    
    },


不执行倒计时里面的跳转 点击事件强制跳转到其他页面 并且清除 倒计时任务

 indexFn() {
      this.$router.replace({  强制跳转路由
        name: "site",
        params: { site: this.shortUrl },
      });
        clearInterval(this.handler); // 清除定时器

    },

示例代码简单易懂：
每日更新关注:http://weibo.com/hanjunqiang  新浪微博
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet UILabel *dayLabel;
@property (weak, nonatomic) IBOutlet UILabel *hourLabel;
@property (weak, nonatomic) IBOutlet UILabel *minuteLabel;
@property (weak, nonatomic) IBOutlet UILabel *secondLabel;

@end


#import "ViewController.h"

@interface ViewController ()
{
     dispatch_source_t _timer;
}
@end

@implementation ViewController
/**
 *  获取当天的年月日的字符串
 *  这里测试用
 *  @return 格式为年-月-日
 */
-(NSString *)getyyyymmdd{
    NSDate *now = [NSDate date];
    NSDateFormatter *formatDay = [[NSDateFormatter alloc] init];
    formatDay.dateFormat = @"yyyy-MM-dd";
    NSString *dayStr = [formatDay stringFromDate:now];
    
    return dayStr;
    
}
- (void)viewDidLoad {
    [super viewDidLoad];
    NSDateFormatter *dateFormatter=[[NSDateFormatter alloc] init];
    [dateFormatter setDateFormat:@"yyyy-MM-dd"];
    
    NSDate *endDate = [dateFormatter dateFromString:[self getyyyymmdd]];
    NSDate *endDate_tomorrow = [[NSDate alloc] initWithTimeIntervalSinceReferenceDate:([endDate timeIntervalSinceReferenceDate] + 24*3600)];
    NSDate *startDate = [NSDate date];
    NSTimeInterval timeInterval =[endDate_tomorrow timeIntervalSinceDate:startDate];
    
    if (_timer==nil) {
        __block int timeout = timeInterval; //倒计时时间
        
        if (timeout!=0) {
            dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
            _timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0,queue);
            dispatch_source_set_timer(_timer,dispatch_walltime(NULL, 0),1.0*NSEC_PER_SEC, 0); //每秒执行
            dispatch_source_set_event_handler(_timer, ^{
                if(timeout<=0){ //倒计时结束，关闭
                    dispatch_source_cancel(_timer);
                    _timer = nil;
                    dispatch_async(dispatch_get_main_queue(), ^{
                        self.dayLabel.text = @"";
                        self.hourLabel.text = @"00";
                        self.minuteLabel.text = @"00";
                        self.secondLabel.text = @"00";
                    });
                }else{
                    int days = (int)(timeout/(3600*24));
                    if (days==0) {
                        self.dayLabel.text = @"";
                    }
                    int hours = (int)((timeout-days*24*3600)/3600);
                    int minute = (int)(timeout-days*24*3600-hours*3600)/60;
                    int second = timeout-days*24*3600-hours*3600-minute*60;
                    dispatch_async(dispatch_get_main_queue(), ^{
                        if (days==0) {
                            self.dayLabel.text = @"0天";
                        }else{
                            self.dayLabel.text = [NSString stringWithFormat:@"%d天",days];
                        }
                        if (hours<10) {
                            self.hourLabel.text = [NSString stringWithFormat:@"0%d",hours];
                        }else{
                            self.hourLabel.text = [NSString stringWithFormat:@"%d",hours];
                        }
                        if (minute<10) {
                            self.minuteLabel.text = [NSString stringWithFormat:@"0%d",minute];
                        }else{
                            self.minuteLabel.text = [NSString stringWithFormat:@"%d",minute];
                        }
                        if (second<10) {
                            self.secondLabel.text = [NSString stringWithFormat:@"0%d",second];
                        }else{
                            self.secondLabel.text = [NSString stringWithFormat:@"%d",second];
                        }
                        
                    });
                    timeout--;
                }
            });
            dispatch_resume(_timer);
        }
    }


}

每日更新关注:http://weibo.com/hanjunqiang  新浪微博
效果：

  
                  iOS开发者交流群：446310206
Demo下载地址GitHub：https://github.com/XiaoHanGe/CountDown