zoukankan      html  css  js  c++  java
  • 微信小程序(12)--倒计时

    记录一个常见的效果,倒计时。

    <text>倒计时:{{content}}</text>
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        endTime: '',
        content:''
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that=this;
        that.setData({
          endTime:'1531116473'
        })
        that.countdowm();
      },
      countdowm: function (e) {
        let that = this;
        let timer = setInterval(function () {
          let nowTime = new Date();
          let endTime = new Date(that.data.endTime * 1000);
          let t = endTime.getTime() - nowTime.getTime();
          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);
            hour = hour < 10 ? "0" + hour : hour;
            min = min < 10 ? "0" + min : min;
            sec = sec < 10 ? "0" + sec : sec;
            let format = '';
            if (day > 0) {
              format = `${day}天${hour}时${min}分${sec}秒`;
            }
            if (day <= 0 && hour > 0) {
              format = `${hour}时${min}分${sec}秒`;
            }
            if (day <= 0 && hour <= 0) {
              format = `${min}分${sec}秒`;
            }
            that.setData({
              content: format
            })
          } else {
            clearInterval(timer);
            that.setData({
              content: '结束了!'
            })
          }
        }, 1000);
      }
    })
  • 相关阅读:
    Spring Boot 应用监控
    学习学习SpringSecurity
    Spring Cloud 简介
    thinkphp 请求
    八、主从复制
    七、AOF 持久化
    五、五大数据类型实现原理
    六、RDB 持久化
    四、redis的底层数据结构
    三、五大数据类型详细用法
  • 原文地址:https://www.cnblogs.com/juewuzhe/p/8243512.html
Copyright © 2011-2022 走看看