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


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 相关文章推荐
javascript 遍历验证所有文本框的值
Aug 27 Javascript
Jquery 弹出层插件实现代码
Oct 24 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
javascript实现列表切换效果
May 02 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 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
实用函数5
2007/11/08 PHP
使用php来实现网络服务
2009/09/15 PHP
php修改时间格式的代码
2011/05/29 PHP
基于PHP制作验证码
2016/10/12 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
python pip如何手动安装二进制包
2020/09/30 Python
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
社区庆八一活动方案
2014/02/02 职场文书
2015年药店工作总结
2015/04/20 职场文书
教师考核鉴定意见
2015/06/05 职场文书
合作协议书格式范本
2016/03/21 职场文书
安全生产协议书
2016/03/22 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
python基础之类方法和静态方法
2021/10/24 Python
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
golang语言指针操作
2022/04/14 Golang