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

<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)--倒计时的更多相关文章

  1. 微信小程序之倒计时插件 wxTimer

    微信小程序之倒计时插件   wxTimer 介绍: 用于在微信小程序中进行倒计时的组件. 功能: 1.最基础的当然就是倒计时功能了. 2.可以设置倒计时结束后执行的事件. 3.可以设置倒计时执行过程中 ...

  2. 微信小程序 - 考试倒计时

    源码如下(csdn提供了思路 , 多谢 ,第二个小程序项目,有惊无险(_._): Page({ /** * 页面的初始数据 */ data: { timer: '', //定时器名字 countDow ...

  3. 微信小程序单个倒计时效果

    var end_time = grouponList.expire_time.replace(/-/g, '/') grouponcountdown(that, end_time) //适用于商品列表 ...

  4. 微信小程序 列表倒计时

    最近要实现一个列表倒计时的功能,写了个demo 展示图 <view class="center colu"> <view class="time&quo ...

  5. 微信小程序 验证码倒计时组件

    https://blog.csdn.net/susuzhe123/article/details/80032224

  6. 微信小程序----团购或秒杀的批量倒计时实现

    效果图 实现思路微信小程序实现倒计时,可以将倒计时的时间进行每一秒的计算和渲染! JS模拟商品列表数据 goodsList:在 onLoad 周期函数中对活动结束时间进行提取:建立时间格式化函数 ti ...

  7. 微信小程序60秒倒计时

    微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整代码 index.wxml <!--index.wxml--> <view class="container&qu ...

  8. CI Weekly #12 | 微信小程序的自动化测试进阶

    岁末将至,站在年终冲刺的尾巴上,flow.ci 新增了个人和团队设置的功能: 上线团队功能,注册时默认创建一个与用户名一致的团队,可设置:团队名称.增减团队成员,后续会不断完善: 增加个人设置,可修改 ...

  9. 微信小程序【获取验证码】倒计时效果

    最近开始接触微信小程序,会记录一些相关的小功能——例如这次是点击[获取验证码]按钮出现的倒计时效果. 原文: http://blog.csdn.net/Wu_shuxuan/article/detai ...

  10. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

随机推荐

  1. 【leetcode】885. Boats to Save People

    题目如下: 解题思路:本题可以采用贪心算法,因为每条船最多只能坐两人,所以在选定其中一人的情况下,再选择第二个人使得两人的体重最接近limit.考虑到人的总数最大是50000,而每个人的体重最大是30 ...

  2. Angular:ViewProviders和Providers的区别

    在Angular中使用依赖注入(DI)的时候,我们一般会使用providers.其实要做同样的事我们还有另外一个选择:viewProviders. viewProviders允许我们定义只对组件的vi ...

  3. AGC040

    AGC040 A 模拟. B 因为顺序无关紧要,所以可以先把区间按右端点排序方便处理. 设第一个区间在\(A\)集合,考虑枚举第一个在\(B\)集合的区间\(i\),这样两个集合的右端点\(\min\ ...

  4. 【2019 Multi-University Training Contest 8】

    01: 02: 03:https://www.cnblogs.com/myx12345/p/11655876.html 04: 05: 06:https://www.cnblogs.com/myx12 ...

  5. 攻防世界 | when_did_you_born

    所以题目要求是输入生日1926 payload: from pwn import * io = remote("111.198.29.45",40803) io.recvline( ...

  6. mybatis获取数据库自增id

    http://blog.csdn.net/dyllove98/article/details/8866357 http://www.iteye.com/problems/86864 insert标签中 ...

  7. elasticsearch安装分词插件

    在常用的中文分词器.拼音分词器.繁简体转换插件.国内用的就多的分别是:elasticsearch-analysis-ikelasticsearch-analysis-pinyinelasticsear ...

  8. spring4.1.8扩展实战之七:控制bean(BeanPostProcessor接口)

    本章是<spring4.1.8扩展实战>的第七篇,我们来尝试在容器初始化的时候对bean实例做设置: 原文地址:https://blog.csdn.net/boling_cavalry/a ...

  9. 部署 H3C CAS E0306

    目录 目录 前文列表 H3C CAS CVK Cloud Virtualization Kernel 虚拟化内核平台 CVMCloud Virtualization Manager 虚拟化管理系统 C ...

  10. Python——GUI可视化

    import sys from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5.QtWidgets import * class ...