WXML代码：

<view class='countDown'>倒计时：<text style='color:red'>{{countDownNum}}</text>
</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)})}
})

微信小程序实现一个简单的倒计时效果相关推荐

android商品数量加减,微信小程序实现一个简单的商品数量加减案例
简介这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~. 核心js方法说明addCount(增加数量) delCount (减少数量) ...
微信小程序实现一个简单的加减法的计算器
首先看一下效果图: 实现的功能及步骤:首先在wxml当中编辑好布局等.俩个input标签用于输入值.一个view用于给计算结果. 首先对于input标签要绑定好一个方法,也就是将输入的数字实时同步.在 ...
微信小程序开发一个简单的摇骰子游戏
页面代码 <view class='top'>{{txt}}</view> <view class='point1'><image src='{{one_im ...
微信小程序实现一个简单的表格
wxml <view class="table"><view class="tr bg-w"><view class=" ...
使用微信小程序做一个简易的下拉框，无动画效果，纯原生写法（下拉列表框）
最近在开发的时候,需要使用下拉的效果,但是之前并没有进行书写过,今天做一个简单的demo,来记录一下微信小程序开发的下拉框效果. 微信小程序和jquery最大的区别就是是否操作dom, 微信小程序无需 ...
微信小程序，一个有局限的类似 React Native 轮子
微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性.(结论是基于微信小程序的示例代码做的解读,可能存在谬误. 文末有好奇心日报小程序的二维码,欢迎围观. 2016年11 ...
微信小程序，一个有局限的类似 React Native 轮子！
微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性.(结论是基于微信小程序的示例代码做的解读,可能存在谬误. 文末有好奇心日报小程序的二维码,欢迎围观. 2016年11 ...
微信小程序实现一个文件管理器
微信小程序实现一个文件管理器虽然标题说是实现一个文件管理器,但我是用来管理预加载小程序可能用的网络资源的,尤其是要是用音效资源时. 小程序的包体即便是分包也是每个分包的资源大小是2m,像音频资源,使 ...
3元购买微信小程序解决方案一个月
3元购买微信小程序解决方案一个月参考文章: (1)3元购买微信小程序解决方案一个月 (2)https://www.cnblogs.com/wqcheng/p/7458808.html 备忘一下.

微信小程序实现一个简单的倒计时效果

WXML代码：

JS代码：

微信小程序实现一个简单的倒计时效果相关推荐

最新文章

热门文章