微信小程序（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);}})

转载于:https://www.cnblogs.com/juewuzhe/p/8243512.html

微信小程序（12）--倒计时相关推荐

黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序动态倒计时
微信小程序之倒计时插件 wxTimer 1.在全局app.js引入下载: wxTimer 然后把wxTimer文件放在js中 for (let i = 0; i < addEvaluate.l ...
python控制相机自动拍照_微信小程序实现倒计时调用相机自动拍照功能
这篇文章主要为大家详细介绍了微信小程序实现倒计时调用相机自动拍照功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序定时拍照的具体代码,供大家参考,具体内容如下在某 ...
微信小程序设置倒计时效果
效果微信小程序设置倒计时步骤 1.设置一个定时器,然后将时间设为一秒 2.在这个函数里将当前时间距终止的时间,的时间戳的差值减一 3.计算剩余的时间,还剩的时分秒等 4.将计算的时间保存到data中 ...
微信小程序自定义倒计时组件及注意事项
倒计时功能实现:微信小程序实现倒计时功能(超简单)_洛潆的博客-CSDN博客_微信小程序倒计时功能由于要在多个页面使用倒计时功能,在每个页面都重新写一遍就会很麻烦,所以可以把它封装为自定义组件,最终 ...
微信小程序---验证码倒计时
实现效果微信小程序如何实现获取验证码后倒计时效果? 完整代码 wxml <view class="password"><view class="hea ...
微信小程序动画-倒计时缩放
刚接触小程序,项目需要做个动画的倒计时,本来css3的animation用着挺好,但考虑到,微信提供了这个东东,那在这里就尝试用一用微信小程序的wx.animation,我理解的小程序动画就是用js来 ...
原生微信小程序圆形倒计时svg组件
#写在最前# 微信小程序不支持svg标签,需要把svg转成base64用background属性展示,缺点是执行倒计的时候,圆形轨道无法做动画,只能很生硬的展示每一帧:优点时非常清晰,不会有锯齿. # ...
每日三思:优化微信小程序中倒计时占内存较大(19-0612-1917)
小程序的倒计时存在暂用手机内存较大的问题,尤其是在列表中,如果每一项都有倒计时的话,一进页面就会卡死解决思路每次启用倒计时的时候,先清除倒计时,再启用(也就是一条腿走路,内存中只有当前的倒计时); ...
微信小程序 | 12.生命周期、globalData全局数据
文章目录 1.小程序的生命周期 2.全局数据globalData 3.globalData的应用 3.1.搭配app.js的onLaunch()存储openid 3.2.轮询globalData 3. ...

微信小程序（12）--倒计时

微信小程序（12）--倒计时相关推荐

最新文章

热门文章