详解微信小程序用定时器实现倒计时效果


Posted in Javascript onApril 30, 2019

平常在微信小程序开发的时候,因项目的需求,倒计时必不可少,下面主要讲解定时器在微信小程序中的使用。

这里要先声明一点的就是,该篇主要实现倒计时功能,而且实现是时长较短的倒计时,其他的优化什么的不作主要考虑。

如果实现简单的60s倒计时效果,我们可直接使用setInterval即可,但是在微信小程序中,我们需要用微信小程序的语法,这时就会遇到一个难题,那就是怎么关闭定时器的问题,下面给出实例。

WXML代码

<view class='countDown'>倒计时:<text style='color:red'>{{countDownNum}}</text>s</view>

JS代码:

Page({
 /**
  * 页面的初始数据
  */
 data: {
  timer: '',//定时器名字
  countDownNum: '60'//倒计时初始值
 },
 
 onShow: function(){
  //什么时候触发倒计时,就在什么地方调用这个函数
  this.countDown();
 },
 
 countDown: function () {
  let that = this;
  let countDownNum = that.data.countDownNum;//获取倒计时初始值
  //如果将定时器设置在外面,那么用户就看不到countDownNum的数值动态变化,所以要把定时器存进data里面
  that.setData({
   timer: setInterval(function () {//这里把setInterval赋值给变量名为timer的变量
    //每隔一秒countDownNum就减一,实现同步
    countDownNum--;
    //然后把countDownNum存进data,好让用户知道时间在倒计着
    that.setData({
     countDownNum: countDownNum
    })
    //在倒计时还未到0时,这中间可以做其他的事情,按项目需求来
    if (countDownNum == 0) {
     //这里特别要注意,计时器是始终一直在走的,如果你的时间为0,那么就要关掉定时器!不然相当耗性能
     //因为timer是存在data里面的,所以在关掉时,也要在data里取出后再关闭
     clearInterval(that.data.timer);
     //关闭定时器之后,可作其他处理codes go here
    }
   }, 1000)
  })
 }
})

好了,这就是简单的倒计时实现过程,大家可复制代码到微信开发者工具去验证效果。

以上所述是小编给大家介绍的微信小程序用定时器实现倒计时效果详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
js中实现继承的五种方法
Jan 25 Javascript
Vue如何实现组件间通信
May 15 Vue.js
TypeScript开发Node.js程序的方法
Apr 30 #Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 #Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 #Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 #Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 #Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 #Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 #Javascript
You might like
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
php zip文件解压类代码
2009/12/02 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
python读取excel表格生成erlang数据
2017/08/26 Python
python编写Logistic逻辑回归
2020/12/30 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
商务日语毕业生自荐信
2013/11/23 职场文书
计算机操作自荐信
2013/12/07 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
财务审计整改报告
2014/11/06 职场文书
三潭印月的导游词
2015/02/12 职场文书
通知格式
2015/04/27 职场文书
工程质量保证书
2015/05/09 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis