返回博客列表

Jquery 发送验证码倒计时

2022年07月06日 10时45分

一、代码


css代码

  1. //禁止点击
  2. .notclick {
  3. pointer-events: none;
  4. }

html代码

  1. <div>
  2. <input type="text" id="phone" maxlength="11" placeholder="请输入您的手机号码…">
  3. </div>
  4. <div>
  5. <input type="text" id="code" placeholder="验证码">
  6. <div class="wp" >获取验证码</div>
  7. </div>
  8. <div>
  9. <div class="btn">立即注册</div>
  10. </div>

js代码

  1. <script>
  2. $('.wp').click(function () {
  3. var wp = document.getElementsByClassName('wp')[0];
  4. var phone = $('#phone').val();
  5. if (!phone) {
  6. alert('请输入手机号');
  7. return;
  8. }
  9. $.ajax({
  10. url: "/appapi/register/send",
  11. type: "post",
  12. dataType: "json",
  13. data: { mobile: phone, event: "register" },
  14. success: function (data) {
  15. alert(data.msg);
  16. if(data.code == 1){
  17. $('.wp').addClass('notclick');
  18. }
  19. }
  20. });
  21. let time = 10;
  22. const timer = setInterval(() => {
  23. time--;
  24. if (time <= 0) {
  25. wp.innerHTML = "重新获取验证码"
  26. clearInterval(timer);
  27. $('.wp').removeClass('notclick');
  28. } else {
  29. if (time < 10) {
  30. wp.innerHTML = "0" + time + "s后重新获取"
  31. } else {
  32. wp.innerHTML = time + "s后重新获取"
  33. }
  34. }
  35. console.log(time);
  36. }, 1000);
  37. })
  38. $('.btn').click(function () {
  39. var phone = $('#phone').val();
  40. var invite = $('#invite').val();
  41. if (!phone) {
  42. alert('请输入手机号');
  43. return;
  44. }
  45. var code = $('#code').val();
  46. if (!code) {
  47. alert('请输入验证码');
  48. return;
  49. }
  50. $.ajax({
  51. url: "/appapi/register/register_form",
  52. type: "post",
  53. dataType: "json",
  54. data: { mobile: phone, captcha: code, invite: invite },
  55. success: function (data) {
  56. alert(data.msg)
  57. if(data.code==1){
  58. window.location.href = "http://baidu.com"; //下载页面
  59. }
  60. },
  61. fail: function (msg) {
  62. alert(msg);
  63. }
  64. });
  65. })
  66. </script>

作者:君看蕙风来处

链接:https://puuluu.com/b/68

版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议 。 本文为原创文章,版权归 莞尔博客 所有,欢迎分享本文,转载请附上原文作者、出处链接及本声明。

0.059067s