zoukankan      html  css  js  c++  java
  • 小程序页面抢购时间倒计时

    注意:

    •   设置一个时间段,几点到几点倒计时
    •   比如第一次进入页面是10秒,你出页面后3秒,第二次进入页面也在继续倒计时,这时候的时间是7秒,继续倒计时
          <view class='tui-countdown-content' wx:for="{{countDownList}}" wx:key="countDownList">
              <!-- <text class='tui-conutdown-box'>{{item.day}}</text>天 -->
              <text class='tui-conutdown-box'>{{item.hou}}</text>:
              <text class='tui-conutdown-box'>{{item.min}}</text>:
              <text class='tui-conutdown-box tui-countdown-bg'>{{item.sec}}</text>
            </view>

    let goodsList = [
      { actEndTime: '2019/03/26 20:00:00' }
    ]
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        countDownList: [],
        actEndTimeList: []
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        let endTimeList = [];
        // 将活动的结束时间参数提成一个单独的数组,方便操作
        goodsList.forEach(o => { endTimeList.push(o.actEndTime) })
        this.setData({ actEndTimeList: endTimeList });
        // 执行倒计时函数
        this.countDown();
      },
      timeFormat(param) {//小于10的格式化函数
        return param < 10 ? '0' + param : param;
      },
      countDown() {//倒计时函数
        // 获取当前时间,同时得到活动结束时间数组
        let newTime = new Date().getTime();
        let endTimeList = this.data.actEndTimeList;
        let countDownArr = [];
    
        // 对结束时间进行处理渲染到页面
        endTimeList.forEach(o => {
          let endTime = new Date(o).getTime();
          let obj = null;
          // 如果活动未结束,对时间进行处理
          if (endTime - newTime > 0) {
            let time = (endTime - newTime) / 1000;
            // 获取天、时、分、秒
            let day = parseInt(time / (60 * 60 * 24));
            let hou = parseInt(time % (60 * 60 * 24) / 3600);
            let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
            let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
            obj = {
              day: this.timeFormat(day),
              hou: this.timeFormat(hou),
              min: this.timeFormat(min),
              sec: this.timeFormat(sec)
            }
          } else {//活动已结束,全部设置为'00'
            obj = {
              day: '00',
              hou: '00',
              min: '00',
              sec: '00'
            }
          }
          countDownArr.push(obj);
        })
        // 渲染,然后每隔一秒执行一次倒计时函数
        this.setData({ countDownList: countDownArr })
        setTimeout(this.countDown, 1000);
      },
  • 相关阅读:
    MapXtreme 2005学习(5):总结查找图元的三种方法
    MapXtreme 2005学习(1):创建临时图层
    MapXtreme 2005学习(2):向图层中添加点
    MapXtreme 2005学习(7):Web页面中实现鼠标中键缩放
    MapXtreme 2005学习(3):向图层中添加线段
    MapXtreme 2005学习(4):添加标注图层
    MapXtreme 2005学习(6):两种方法实现动态轨迹
    JavaScript使用技巧精萃
    C#注释语法
    MapXtreme 2005学习(8):实现手动画线
  • 原文地址:https://www.cnblogs.com/weiyf/p/10628182.html
Copyright © 2011-2022 走看看