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

<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. BZOJ 3729 GTY的游戏

    伪ETT? 貌似就是Splay维护dfn = = 我们首先观察这个博弈 这个博弈直接%(l+1)应该还是很显然的 因为先手怎么操作后手一定能保证操作总数取到(l+1) 于是就变成阶梯Nim了 因为对于 ...

  2. js reduce用法

    let books = [ 0, {bookName:"python",price:10,count:1}, {bookName:"Ruby",count:2, ...

  3. 用C语言编程乘法口诀表

    首先是全部,代码如下: #include<stdio.h> void main() { int i,j; ;i<=;i++) { ;j<=;j++) printf(" ...

  4. Linux学习-基于CentOS7的ProxySQL实现读写分离

    一.实验环境 主机:3台,一台ProxySQL(192.168.214.37),两台主从复制,master(192.168.214.17),slave(192.168.214.27) 系统:CentO ...

  5. Ckeditor IE下粘贴word中图片问题

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  6. 【HDOJ6687】Rikka with Stable Marriage(Trie树,贪心)

    题意:给定两个长均为n的序列a和b,要求两两配对,a[i]和b[j]配对的值为a[i]^b[j],求配对后的值之和的最大值 n<=1e5,a[i],b[i]<=1e9 思路:和字典序最大的 ...

  7. jQuery入门教程-文档操作方法

    一.append()和appendTo() 1.1 append()方法 <body> <p>好好学习</p> <button>append() 方法& ...

  8. 区间查询异或最大值——cf1100F,hdu6579(线性基)

    hdu6579 题意初始时有n个数,现在有q次操作: 查询[l,r]内选择一些数使得异或和最大:在末尾加入一个数.题目强制在线. 思路对于i我们记录[1,i]每个基底最靠近i的位置和这个位置的值,然后 ...

  9. ctcss

    CTCSS解码器基于非常窄的带通滤波器,其通过所需的CTCSS音调.滤波器的输出经过放大和整流,只要存在所需的音调,就会产生直流电压.直流电压用于打开,启用或取消静音接收器的扬声器音频级.当音调存在时 ...

  10. vs2017或vs2019添加引用时报错

    我先安装的是vs2019,进入VS命令提示符里后一直说:gacutil 不是有效的命令,一直没能解决,然后直接装了vs2017后,该命令可以使用了, 还是用VS2017吧,2019的版本感觉还有点问题 ...