zoukankan      html  css  js  c++  java
  • 微信小程序 列表倒计时

    最近要实现一个列表倒计时的功能,写了个demo

    展示图

      

    <view class="center colu">
      <view class="time" wx:for='{{list}}' style="color:{{item.color}}">{{item.show_time}}</view>
    </view>
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        list: []
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
        let datas = [];
        let current = new Date().getTime() / 1000;for (let i = 0; i < 5; i++) {
          datas.push({})
        }
        for (let i in datas) {
          let color = this.randomColor();
          let random = Math.random().toFixed(2) * 10000;
          datas[i].timer = setInterval(() => {
            //截止时间
            let time = current + random;
            time--;
            let now = new Date().getTime();
            let diff = parseInt(time - now / 1000);
            if (diff < 0) {
              let list = this.data.list;
              clearInterval(list[i].timer)
              this.setData({
                list
              })
            } else {
              let date = this.formattime(diff * 1000);
              datas[i].show_time = date;
              datas[i].color = color;
              this.setData({
                list: datas
              })
            }
          }, 1000)
        }
      },
      randomColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + ',' + g + ',' + b + ")";
      },
      formattime(time) {
        var leave1 = time % (24 * 3600 * 1000) //计算小时    
        var hour = Math.floor(leave1 / (3600 * 1000))
    
        var leave2 = leave1 % (3600 * 1000) //计算分钟    
        var minute = Math.floor(leave2 / (60 * 1000))
    
        var leave3 = leave2 % (60 * 1000) //计算秒    
        var second = Math.round(leave3 / 1000) == '60' ? '00' : Math.round(leave3 / 1000)
        return [hour, minute, second].map(this.formatNumber).join(':')
      },
      formatNumber(n) {
        n = n.toString()
        return n[1] ? n : '0' + n
      }, 
    })
  • 相关阅读:
    elasticsearch索引的增删改查入门
    windows下mongodb安装与使用
    在SqlServer中使用Try Catch(转)
    sqlserver 存储过程 try catch TRANSACTION (转)
    SQLserver2008如何把表格变量传递到存储过程中
    SQL对字符串数组的处理
    SQLSERVER数据库表各种同步技术
    函数参数
    闭包
    枚举
  • 原文地址:https://www.cnblogs.com/dongzhi1111/p/11423973.html
Copyright © 2011-2022 走看看