zoukankan      html  css  js  c++  java
  • 小程序倒计时

    1、一般我们说的显示秒杀都是指的单条数据,循环我没做。

    效果:

    2、wxml代码:

    <p> 
      <block wx:if="{{total_micro_second<=0}}">
    剩余时间:已经截止
    </block>
    <block wx:if="{{clock!='已经截止'}}">
    剩余时间:{{clock}}
    </block>
    </p>

    3、.js文件代码:

    
    function countdown(that) {
      var EndTime = that.data.end_time || [];
      var NowTime = new Date().getTime();
      var total_micro_second = EndTime - NowTime || [];   //单位毫秒
      if (total_micro_second < 0) {
        console.log('时间初始化小于0,活动已结束状态');
        total_micro_second = 1;     //单位毫秒 ------  WHY?
      }
      console.log('剩余时间:' + total_micro_second);
      // 渲染倒计时时钟
      that.setData({
        clock: dateformat(total_micro_second)   //若已结束,此处输出'0天0小时0分钟0秒'
      });
      if (total_micro_second <= 0) {
        that.setData({
          clock: "已经截止"
        });
        return;
      }
      setTimeout(function () {
        total_micro_second -= 1000;
        countdown(that);
      }
        , 1000)
    }
    
    // 时间格式化输出,如11天03小时25分钟19秒  每1s都会调用一次
    function dateformat(micro_second) {
      // 总秒数
      var second = Math.floor(micro_second / 1000);
      // 天数
      var day = Math.floor(second / 3600 / 24);
      // 小时
      var hr = Math.floor(second / 3600 % 24);
      // 分钟
      var min = Math.floor(second / 60 % 60);
      //
      var sec = Math.floor(second % 60);
      return day + "" + hr + "小时" + min + "分钟" + sec + "";
    }
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        id: '',
        result: [],
        end_time: '',
        clock: ''
      },/**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that = this;
        wx.request({
          url: 'https://m.******.com/index.php/Home/Xiaoxxf/activity_detail?a_id=' + options.id,//不含富文本html
          data: {},
          method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          header: {
            'Content-Type': 'application/json'
          },
          success: function (res) {
            that.setData({
              common: res.data,   //一维数组,全部数据
              end_time: res.data.end_time    //项目截止时间,时间戳,单位毫秒
            })
            console.log(that.data.common);
            console.log('结束时间:' + that.data.end_time);
          },
          fail: function (res) { },
          complete: function (res) { },
        })
        //调用上面定义的递归函数,一秒一刷新时间
        countdown(that)
      }
    })
  • 相关阅读:
    298. Binary Tree Longest Consecutive Sequence
    117. Populating Next Right Pointers in Each Node II
    116. Populating Next Right Pointers in Each Node
    163. Missing Ranges
    336. Palindrome Pairs
    727. Minimum Window Subsequence
    211. Add and Search Word
    年底购物狂欢,移动支付安全不容忽视
    成为程序员前需要做的10件事
    全球首推iOS应用防破解技术!
  • 原文地址:https://www.cnblogs.com/dalulu/p/8992247.html
Copyright © 2011-2022 走看看