微信小程序(12)--倒计时
记录一个常见的效果,倒计时。
<text>倒计时:{{content}}</text>
Page({
  /**
   * 页面的初始数据
   */
  data: {
    endTime: '',
    content:''
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    that.setData({
      endTime:''
    })
    that.countdowm();
  },
  countdowm: function (e) {
    let that = this;
    let timer = setInterval(function () {
      let nowTime = new Date();
      let endTime = new Date(that.data.endTime * );
      let t = endTime.getTime() - nowTime.getTime();
      if (t > ) {
        let day = Math.floor(t / );
        let hour = Math.floor((t / ) % );
        let min = Math.floor((t / ) % );
        let sec = Math.floor((t / ) % );
        hour = hour <  ? "" + hour : hour;
        min = min <  ? "" + min : min;
        sec = sec <  ? "" + sec : sec;
        let format = '';
        if (day > ) {
          format = `${day}天${hour}时${min}分${sec}秒`;
        }
        if (day <=  && hour > ) {
          format = `${hour}时${min}分${sec}秒`;
        }
        if (day <=  && hour <= ) {
          format = `${min}分${sec}秒`;
        }
        that.setData({
          content: format
        })
      } else {
        clearInterval(timer);
        that.setData({
          content: '结束了!'
        })
      }
    }, );
  }
})
微信小程序(12)--倒计时的更多相关文章
- 微信小程序之倒计时插件   wxTimer
		微信小程序之倒计时插件 wxTimer 介绍: 用于在微信小程序中进行倒计时的组件. 功能: 1.最基础的当然就是倒计时功能了. 2.可以设置倒计时结束后执行的事件. 3.可以设置倒计时执行过程中 ... 
- 微信小程序 - 考试倒计时
		源码如下(csdn提供了思路 , 多谢 ,第二个小程序项目,有惊无险(_._): Page({ /** * 页面的初始数据 */ data: { timer: '', //定时器名字 countDow ... 
- 微信小程序单个倒计时效果
		var end_time = grouponList.expire_time.replace(/-/g, '/') grouponcountdown(that, end_time) //适用于商品列表 ... 
- 微信小程序 列表倒计时
		最近要实现一个列表倒计时的功能,写了个demo 展示图 <view class="center colu"> <view class="time&quo ... 
- 微信小程序 验证码倒计时组件
		https://blog.csdn.net/susuzhe123/article/details/80032224 
- 微信小程序----团购或秒杀的批量倒计时实现
		效果图 实现思路微信小程序实现倒计时,可以将倒计时的时间进行每一秒的计算和渲染! JS模拟商品列表数据 goodsList:在 onLoad 周期函数中对活动结束时间进行提取:建立时间格式化函数 ti ... 
- 微信小程序60秒倒计时
		微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整代码 index.wxml <!--index.wxml--> <view class="container&qu ... 
- CI Weekly #12 | 微信小程序的自动化测试进阶
		岁末将至,站在年终冲刺的尾巴上,flow.ci 新增了个人和团队设置的功能: 上线团队功能,注册时默认创建一个与用户名一致的团队,可设置:团队名称.增减团队成员,后续会不断完善: 增加个人设置,可修改 ... 
- 微信小程序【获取验证码】倒计时效果
		最近开始接触微信小程序,会记录一些相关的小功能——例如这次是点击[获取验证码]按钮出现的倒计时效果. 原文: http://blog.csdn.net/Wu_shuxuan/article/detai ... 
- 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
		微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ... 
随机推荐
- Test 3.27 T3 矩阵
			Description 给一个 n*n 的地图,每个格子有一个价格,找一个矩形区域,使其价格总和位于[k,2k] Input 输入 k n(n<2000)和一个 n*n 的地图 Output 输 ... 
- 模拟安装redis5.0集群并通过Java代码访问redis集群
			在虚拟机上模拟redis5.0的集群,由于redis的投票机制,一个集群至少需要3个redis节点,如果每个节点设置一主一备,一共需要六台虚拟机来搭建集群,此处,在一台虚拟机上使用6个redis实例来 ... 
- Word文档粘贴到帝国CMS
			很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ... 
- BZOJ 2226: [Spoj 5971] LCMSum  莫比乌斯反演 + 严重卡常
			Code: #pragma GCC optimize(2) #include<bits/stdc++.h> #define setIO(s) freopen(s".in" ... 
- 用ASP实现文件下载
			<% '**************************************************************'**使用方法: ... 
- pl/sql中return和exit区别
			经测试: 1.exit只能用于循环中,并且退出循环往下执行: 2.return可用于循环或非循环,并且退出整个程序模块不往下执行. declare i number :=1; j number :=1 ... 
- sqlserver备份和恢复-5
			视图备份和恢复 备份 1. 2. 恢复 1. 2. 3.勾选覆盖现有数据库. 4. bat备份恢复 原文: https://www.cnblogs.com/lonelyxmas/p/7958649.h ... 
- ConcurrentModificationException异常
			介绍一个我今天在开发中遇到的异常:ConcurrentModificationException异常,当然它是一个非受检的异常,也就是运行时异常. 当我们在遍历集合对象的时候,不能够将集合删除.最佳实 ... 
- 用flask写一个简单的接口
			用falsk写一个简单的接口,这个接口的数据本来是爬虫爬取的数据,但是今天只写一个flask接口,数据就用测试数据好了. import random import re import time imp ... 
- (转)CoreDNS介绍
			转:https://www.colabug.com/4171614.html 本文介绍 CoreDNS 相关配置以及验证方法,实验环境为 Kubernetes 1.11,搭建方法参考 kubeadm安 ... 
