目标: 按钮倒计时 步骤: 用户点击按钮,提示下发短信,按钮进行倒计时 代码: wxml <view><input type="number" name="linkTel" bindblur="blurTel" value="{{agentTel}}" placeholder="*手机号码" maxlength="11" /></view><button bindtap="setVerify">{{VerifyCode}}</button>
js blurTel: function (e) { var linkTel = e.detail.value.replace(/\s/g, ""); this.setData({ linkTel: linkTel }) },setVerify: function (e) {//发送验证码 var linkTel = this.data.linkTel; var _Url = "申请下发短信的地址"; var total_micro_second = 60 * 1000; //验证码倒计时 count_down(this, total_micro_second); wx.request({ url: _Url, method: 'POST', headers: { 'Content-Type': 'application/json' }, data: [{ agentLinktel: linkTel }], success: function (res) { if (res.data.code == "00") { wx.showModal({ title: '提示', content: '发送验证码成功!', showCancel: false }) } }, fail: function (res) { console.log("error res=") console.log(res.data) } }); }//下面的代码在page({})外面/* 毫秒级倒计时 */function count_down(that, total_micro_second) { if (total_micro_second <= 0) { that.setData({ VerifyCode: "重新发送" }); // timeout则跳出递归 return; } // 渲染倒计时时钟 that.setData({ VerifyCode: date_format(total_micro_second) + " 秒" }); setTimeout(function () { // 放在最后-- total_micro_second -= 10; count_down(that, total_micro_second); }, 10)}// 时间格式化输出,如03:25:19 86。每10ms都会调用一次function date_format(micro_second) { // 秒数 var second = Math.floor(micro_second / 1000); // 小时位 var hr = Math.floor(second / 3600); // 分钟位 var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60)); // 秒位 var sec = fill_zero_prefix((second - hr * 3600 - min * 60));// equal to => var sec = second % 60; // 毫秒位,保留2位 var micro_sec = fill_zero_prefix(Math.floor((micro_second % 1000) / 10)); return sec;}// 位数不足补零function fill_zero_prefix(num) { return num < 10 ? "0" + num : num}
|