轻源码

  • QingYuanMa.com
  • 全球最大的互联网技术和资源下载平台
搜索
一起源码网 门户 微信小程序 查看主题

微信小程序小工具之下发短信验证码倒计时

发布者: xiaomen2 | 发布时间: 2018-7-15 03:13| 查看数: 3088| 评论数: 1|帖子模式

目标: 
按钮倒计时 
步骤: 
用户点击按钮,提示下发短信,按钮进行倒计时 
代码: 
wxml

  1. <view>
  2. <input type="number" name="linkTel" bindblur="blurTel" value="{{agentTel}}" placeholder="*手机号码" maxlength="11" />
  3. </view>
  4. <button bindtap="setVerify">{{VerifyCode}}</button>

js

  1. blurTel: function (e) {
  2. var linkTel = e.detail.value.replace(/\s/g, "");
  3. this.setData({
  4. linkTel: linkTel
  5. })
  6. },
  7. setVerify: function (e) {//发送验证码
  8. var linkTel = this.data.linkTel;
  9. var _Url = "申请下发短信的地址";
  10. var total_micro_second = 60 * 1000;
  11. //验证码倒计时
  12. count_down(this, total_micro_second);
  13. wx.request({
  14. url: _Url,
  15. method: 'POST',
  16. headers: {
  17. 'Content-Type': 'application/json'
  18. },
  19. data: [{
  20. agentLinktel: linkTel
  21. }],
  22. success: function (res) {
  23. if (res.data.code == "00") {
  24. wx.showModal({
  25. title: '提示',
  26. content: '发送验证码成功!',
  27. showCancel: false
  28. })
  29. }
  30. },
  31. fail: function (res) {
  32. console.log("error res=")
  33. console.log(res.data)
  34. }
  35. });
  36. }
  37. //下面的代码在page({})外面
  38. /* 毫秒级倒计时 */
  39. function count_down(that, total_micro_second) {
  40. if (total_micro_second <= 0) {
  41. that.setData({
  42. VerifyCode: "重新发送"
  43. });
  44. // timeout则跳出递归
  45. return;
  46. }
  47. // 渲染倒计时时钟
  48. that.setData({
  49. VerifyCode: date_format(total_micro_second) + " 秒"
  50. });
  51. setTimeout(function () {
  52. // 放在最后--
  53. total_micro_second -= 10;
  54. count_down(that, total_micro_second);
  55. }, 10)
  56. }
  57. // 时间格式化输出,如03:25:19 86。每10ms都会调用一次
  58. function date_format(micro_second) {
  59. // 秒数
  60. var second = Math.floor(micro_second / 1000);
  61. // 小时位
  62. var hr = Math.floor(second / 3600);
  63. // 分钟位
  64. var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
  65. // 秒位
  66. var sec = fill_zero_prefix((second - hr * 3600 - min * 60));// equal to => var sec = second % 60;
  67. // 毫秒位,保留2位
  68. var micro_sec = fill_zero_prefix(Math.floor((micro_second % 1000) / 10));
  69. return sec;
  70. }
  71. // 位数不足补零
  72. function fill_zero_prefix(num) {
  73. return num < 10 ? "0" + num : num
  74. }

最新评论

szxlzx 发表于 2022-7-6 11:40
软件源码交易平台

浏览过的版块

轻源码让程序更轻更快

QingYuanMa.com

工作时间 周一至周六 8:00-17:30

侵权处理

客服QQ点击咨询

关注抖音号

定期抽VIP

Copyright © 2016-2021 https://www.171739.xyz/ 滇ICP备13200218号

快速回复 返回顶部 返回列表