小程序实现一分钟倒计时

需求：点击获取按钮进入60秒倒计时,倒计时结束前按钮禁用；倒计时结束后按钮的内容文字恢复正常，按钮状态恢复正常。

wxml部分代码如下：

<button class="sendBtn" disabled='{{disabled}}' bindtap="getCountDown">{{sendMessage}}</button>

js部分代码如下：

data: {sendMessage: "重新发送",//按钮的默认文字内容countTime: 60,//倒计时disabled:""//按钮是否禁用},//倒计时getCountDown: function(that){ //获取倒计时的变量var time = parseInt(this.data.countTime);const countDown = setInterval(() => {if(time==0){this.setData({sendMessage: "重新发送",disabled:""})//清除定时器clearInterval(countDown);}else{time--;this.setData({sendMessage: time + "s",disabled:"disabled"})}}, 1000)}

最终效果如图:

小程序实现一分钟倒计时相关推荐

微信小程序之15分钟倒计时（附带天数和时钟的实现方法在文章中）
这是制作的订单支付前倒计时,如果客户在规定时间内没能支付,则系统自动删除,这样就以便有些商品冗余,当然了,这里只有分钟和秒钟,天数和时钟我写在了最底下,最后代码的显示第七行,可以看一下,然后带入到相 ...
微信小程序中使用圆形倒计时实例
需求概要小程序中使用圆形倒计时,效果图: 思路使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval 让彩色圆环逐步绘制. 解决方案第一步先写结构一个盒子包裹2个c ...
解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <view style="backg ...
微信小程序开发uni-app-8分钟上手开发
本篇文章uni-app微信小程序开发-8分钟上手开发 -首先到微信小程序官网登录/注册微信小程序微信小程序官网 uni-app + 微信小程序注册微信小程序这里要注意: 激活邮箱之后,选择主体类 ...
微信小程序傻瓜制作_零基础，傻瓜式制作微信小程序，3分钟完成不是问题！...
做小程序还必须要养一个设计人员吗?NO!必须要有小程序开发人员吗?NO! 微墨小程序DIY装修功能,帮你灭掉设计师.甩开程序员,商城自己说了算,布局想换就换,风格说变立刻变! 微墨小程序是" ...
微信小程序用定时器实现倒计时效果
平常在微信小程序开发的时候,因项目的需求,倒计时必不可少,下面主要讲解定时器在微信小程序中的使用. 这里要先声明一点的就是,该篇主要实现倒计时功能,而且实现是时长较短的倒计时,其他的优化什么的不作主要 ...
做一个九宫格诗词答题小程序（二）倒计时功能实现
为了增加答题的趣味,设置了答题时间.采用倒计时,时间设置为9秒.时间一到0,结束答题.点击核对答案原文按钮可以判别答案是否正确,并显示判别结果.正确答案和原文.如回答正确,答对题数增加1个. 为了适用 ...
基于vue的微信小程序开发5分钟上手教程（官方文档转）
使用手册 mpvue 继承自 Vue.js,其技术规范和语法特点与 Vue.js 保持一致. 注:其实就是官方文档,只是习惯看博文学习才直接copy过来的,详见官方文档本文档适用于有一定 Vue.j ...
【微信小程序】5分钟实现微信小程序海报
5分钟实现微信小程序海报页备受青睐不用安装.微信小程序是一种不需要安装即可使用的应用跨平台性.一份代码即可多个平台使用推广容易.用户扫一扫或搜一下即可打开应用推荐使用随着业务需求的不多发展 ...

小程序实现一分钟倒计时

小程序实现一分钟倒计时相关推荐

最新文章

热门文章

小程序 实现一分钟倒计时

小程序 实现一分钟倒计时相关推荐

最新文章

热门文章

小程序实现一分钟倒计时

小程序实现一分钟倒计时相关推荐