小程序如何写个10秒倒计时然后弹出提示框

发布网友发布时间：2022-04-20 21:07

共3个回答

懂视网时间：2022-05-15 02:52

这篇文章主要为大家详细介绍了微信小程序实现验证码获取倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现获取验证码倒计时效果的具体代码，供大家参考，具体内容如下

wxml

<button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode">
{{time}}
</button>

var interval = null //倒计时函数
Page({
 data: {
 date:'请选择日期',
 fun_id:2,
 time: '获取验证码', //倒计时 
 currentTime:61
 }, 
 getCode: function (options){
 var that = this;
 var currentTime = that.data.currentTime
 interval = setInterval(function () {
 currentTime--;
 that.setData({
 time: currentTime+'秒'
 })
 if (currentTime <= 0) {
 clearInterval(interval)
 that.setData({
 time: '重新发送',
 currentTime:61,
 disabled: false 
 })
 }
 }, 100) 
 },
 getVerificationCode(){
 this.getCode();
 var that = this
 that.setData({
 disabled:true
 })
 },

})

上面是我整理给大家的，希望今后会对大家有帮助。

webpack 4.0.0-beta.0版本新特性（详细教程）

在vue2.0组件中如何实现传值、通信

在vue.js中实现分页中单击页码更换页面内容

热心网友时间：2022-05-15 00:00

1、首先打开小程序开发工具新建一个小程序。

2、接着编写wxml中的倒计时页面样式，如下图所示。

3、然后定义倒计时需要用到的变量，如下图所示，其中结束时间大多数都是从后台获取的。

4、接着编写倒计时函数，如下图所示，这里主要用到了定时器的功能，如下图所示。

5、接下来在需要调用的地方调用倒计时函数即可，一般都是在结束时间获得以后调用。

6、最后就可以看到页面中出现了倒计时效果了，如下图所示。

热心网友时间：2022-05-15 01:18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> <script type="text/javascript"> var countdown=10;
function settime(val) {
if (countdown == 0) {
val.removeAttribute("disabled");
val.value="免费获取验证码";
countdown = 10;
} else {
val.setAttribute("disabled", true);
val.value="重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(val)
},1000)
}
</script> </body> </html>

全部栏目

小程序如何写个10秒倒计时然后弹出提示框