要实现微信小程序中的验证码倒计时功能,可以借助定时器(`setInterval`)来实现计时功能,
并在计时过程中禁用获取验证码的按钮。下面是一个简单的示例代码:
1. 在小程序的页面中,添加一个按钮用于获取验证码:
2. 在页面的 js 文件中,编写计时逻辑:
Page({ data: { countDown: 60, // 初始倒计时秒数 disabled: false // 验证码按钮是否禁用 }, // 点击获取验证码按钮 getCode: function() { const that = this; // 倒计时开始,禁用按钮 that.setData({ disabled: true }); let count = that.data.countDown; const timer = setInterval(function() { if (count > 0) { count -= 1; that.setData({ countDown: count }); } else { // 倒计时结束,启用按钮 clearInterval(timer); that.setData({ countDown: 60, disabled: false }); } }, 1000); } });
在上述示例中,点击获取验证码按钮后,倒计时开始,
按钮将被禁用。使用 `setInterval` 开启定时器,每秒减少倒计时秒数 `count`,并将新的倒计时秒数更新到界面上。
当倒计时结束后,清除定时器,重新启用按钮,恢复初始倒计时秒数。
这样,当用户点击获取验证码按钮后,将启动倒计时,并在倒计时过程中禁用按钮,提供用户友好的验证码倒计时体验。