zoukankan      html  css  js  c++  java
  • vue uniapp拼团列表倒计时

    <template>
    <view>
    <view v-for="(item,index) in timelimitList" :key="index">
    {{item.grouptime_d}}天
    {{item.grouptime_h}}时
    {{item.grouptime_m}}分
    {{item.grouptime_s}}秒
    </view>
    </view>
    </template>

    <script>
    import request from "../../static/common/common.js"
    export default {
    data() {
    return {
    timer: null, //重复执行
    timelimitList: [],
    }
    },
    methods: {
    // 限时拼团倒计时
    gettimelimitpuzzle() {
    var that = this;
    request.httpRequest({
    url: 'api/index/timelimitpuzzles'
    }).then(res => {
    if (res.data.data == null) {
    that.homeheight = 60;
    that.timelimitListlen = 0;
    } else {
    that.timelimitListlen = res.data.data.length;
    that.homeheight = 100;
    for(var i = 0;i<res.data.data.length;i++){
    res.data.data[i].grouptime_d = '';
    res.data.data[i].grouptime_h = '';
    res.data.data[i].grouptime_m = '';
    res.data.data[i].grouptime_s = '';
    }
    that.timelimitList = res.data.data;
    }
    });
    },
    countdown() {
    let that = this;
    let timer = setInterval(function() {
    for (let i = 0; i < that.timelimitList.length; i++) {
    that.timelimitList[i].grouptime -= 1000
    let t = that.timelimitList[i].grouptime
    if (t > 0) {
    let day = Math.floor(t / 86400000)
    let hour = Math.floor((t / 3600000) % 24)
    let min = Math.floor((t / 60000) % 60)
    let sec = Math.floor((t / 1000) % 60)
    day = day < 10 ? '0' + day : day
    hour = hour < 10 ? '0' + hour : hour
    min = min < 10 ? '0' + min : min
    sec = sec < 10 ? '0' + sec : sec
    that.timelimitList[i].grouptime_d = day;
    that.timelimitList[i].grouptime_h = hour;
    that.timelimitList[i].grouptime_m = min;
    that.timelimitList[i].grouptime_s = sec;
    } else {
    // 进行判断 如果数据内所有的倒计时已经结束,那么结束定时器, 如果没有那么继续执行定时器
    let flag = that.timelimitList.every((val, ind) =>val.grouptime <= 0);
    if (flag){
    clearInterval(timer);
    }
    that.timelimitList[i].grouptime_d = 0;
    that.timelimitList[i].grouptime_h = 0;
    that.timelimitList[i].grouptime_m = 0;
    that.timelimitList[i].grouptime_s = 0;
    }
    }
    }, 1000);
    },
    },
    destroyed() {
    let that = this;
    that.timelimitList.forEach((val) => {
    val.grouptime = 0
    });
    },
    onLoad() {
    this.gettimelimitpuzzle();
    this.countdown();
    }
    }
    </script>
    <style lang="less" scoped>

    </style>

    ..
  • 相关阅读:
    c++ const的使用
    C++面向对象程序设计举例
    C++构造函数与析构函数的解析
    inline函数和一般的函数有什么不同
    Linux 脚本为什么会有#!
    Linux 基本概念和操作2
    Linux 基本概念和操作
    ubuntu14.0464位 Ros环境 安装halcon13.01
    数据类型之间的连接和运算
    cmd命令 从C盘转到D盘
  • 原文地址:https://www.cnblogs.com/shoolnight/p/15545662.html
Copyright © 2011-2022 走看看