微信小程序60秒倒计时

大家可以直接使用插件: https://blog.csdn.net/zuoliangzhu/article/details/90140067

微信小程序发送短信验证码后60秒倒计时功能，效果图：

完整代码

index.wxml

<!--index.wxml-->
<view class="container"><view class="section"><text>手机号码:</text><input placeholder="请输入手机号码" type="number" maxlength="11" bindinput="inputPhoneNum" auto-focus /><text wx:if="{{send}}" class="sendMsg" bindtap="sendMsg">发送</text><text wx:if="{{alreadySend}}" class="sendMsg" >{{second+"s"}}</text></view>
</view>

index.wxss

/**index.wxss**/
.userinfo {display: flex;flex-direction: column;align-items: center;
}
.section {
display: flex;
margin: 16rpx;
padding: 16rpx;
border-bottom: 1rpx solid #CFD8DC;
}text {width: 200rpx;
}button {margin: 16rpx;
}.sendMsg {font-size: 12;margin-right: 0;padding: 0;height: inherit;width: 80rpx;
}

index.js

//index.js
//获取应用实例
const app = getApp()Page({data: {send: true,alreadySend: false,second: 60,disabled: true,phoneNum: ''},// 手机号部分inputPhoneNum: function (e) {let phoneNum = e.detail.valuethis.setData({phoneNum: phoneNum})},sendMsg: function () {var phoneNum = this.data.phoneNum;if(phoneNum == ''){wx.showToast({title: '请输入手机号码',icon: 'none',duration: 2000})return ;}//此处省略发送短信验证码功能this.setData({alreadySend: true,send: false})this.timer()},showSendMsg: function () {if (!this.data.alreadySend) {this.setData({send: true})}},hideSendMsg: function () {this.setData({send: false,disabled: true,buttonType: 'default'})},timer: function () {let promise = new Promise((resolve, reject) => {let setTimer = setInterval(() => {this.setData({second: this.data.second - 1})if (this.data.second <= 0) {this.setData({second: 60,alreadySend: false,send: true})resolve(setTimer)}}, 1000)})promise.then((setTimer) => {clearInterval(setTimer)})},
})

完整的短信验证码登录实例参考: https://blog.csdn.net/zuoliangzhu/article/details/81219900

微信小程序60秒倒计时相关推荐

榛子云短信-微信小程序60秒倒计时插件
为了帮助开发者更便捷的使用微信小程序的短信验证码功能,特别是初学者更好的使用,榛子云短信特地开发了60秒倒计时插件,效果: 使用方法 1.引入插件countdown.js var CountDown ...
支付宝小程序60秒倒计时插件
为了帮助开发者更便捷的使用支付宝小程序的短信验证码功能,特别是初学者更好的使用,榛子云短信特地开发了60秒倒计时插件,效果: 使用方法 1.引入插件countdown.js var CountDown ...
微信小程序倒计时，小程序60秒倒计时，小程序倒计时防止重复点击
相信大家再做小程序的时候大部分都会碰到获取验证码功能比如说手机号登陆获取验证码一定时间之内不能重复点击案例下载地址 html部分 <view class="signIn" ...
微信小程序多个倒计时
wechatide://minicode/QUV0k2mG7R2Q 这是微信小程序的一个倒计时代码片段,但在苹果手机里,这个倒计时并不会显示!! 原因是在苹果手机里时间戳的转换问题!! 可兼容苹果安卓 ...
html倒计时代码+微信可用,微信小程序动态显示项目倒计时效果
本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下 1.一般我们说的显示秒杀都是指的单条数据,循环我没做. 效果: 2.wxml代码: 剩余时间:已经截止剩余时间: ...
微信小程序开发之倒计时定时器
微信小程序获取验证码,倒计时60秒!这个在微信中也经常遇到,因此给大家分享出来,逻辑就不过多的解释.这个是自定义的方法,大家在调用的时候,直接绑定在按钮上,直接this.getcode()一下就可以调 ...
微信小程序之订单倒计时实现
倒计时之前在做一个有拼团功能项目的时候遇到过倒计时的问题,由于当时技术不熟在这方面耽搁了好些时间,所以这里整理出来希望能为后来人提供些许启发. 1.实现思路: 求出发起拼团时间与拼团结束时间的时间差 ...
uniapp实现微信小程序音频播放倒计时的功能，类似微信语音条
uniapp实现微信小程序音频播放功能最近需要有个项目需要用到音频播放,第一个想到的是audio标签,但是查阅了uniapp官方文档,发现audio组件已经不维护了. 官网推荐使用uni.creat ...
微信小程序时间格式倒计时
Page({// 倒计时count_down: function (countDown_time){var that = this;var time = countDown_time.split(': ...

微信小程序60秒倒计时

微信小程序60秒倒计时相关推荐

最新文章

热门文章