login.html 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8">-->
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7. <link rel="stylesheet" href="style/style.css" />
  8. <title></title>
  9. </head>
  10. <body>
  11. <div class="box loginbox">
  12. <div class="loginhead">
  13. <!--<img src="images/img_04.png">-->
  14. 注册
  15. </div>
  16. <div class="loginboxfrom">
  17. <div class="div1 nubdiv1">
  18. <label class="left">+86</label>
  19. <input type="number" placeholder="输入手机号" class="left number" />
  20. </div>
  21. <div class="div1 code">
  22. <input type="text" placeholder="输入验证码" class="left codevluer" />
  23. <input type="button" class="right" value="发送验证码" onclick="sendCode(this)" />
  24. </div>
  25. <div class="div1">
  26. <input type="password" placeholder="输入登录密码" class="poswd1" />
  27. </div>
  28. <div class="div1">
  29. <input type="password" placeholder="再次输入密码" class="poswd2" />
  30. </div>
  31. <div class="div1">
  32. <label>邀请码 <span id="code"></span></label>
  33. </div>
  34. <div class="div1">
  35. <input type="password" placeholder="输入二级密码" class="towposd1" />
  36. </div>
  37. <div class="div1">
  38. <input type="password" placeholder="再次输入二级密码" class="towposd2" />
  39. </div>
  40. <div class="loginbtn" >注册</div>
  41. </div>
  42. <div class="tip" id="data" style="display: none;"><span id="tips">不能少于纪伟</span></div>
  43. </div>
  44. </body>
  45. <script type="text/javascript" src="js/fontsize.js" ></script>
  46. <script type="text/javascript" src="js/jquery.js" ></script>
  47. <script>
  48. //获取urL参数
  49. function getQueryVariable(variable)
  50. {
  51. var query = window.location.search.substring(1);
  52. var vars = query.split("&");
  53. for (var i=0;i<vars.length;i++) {
  54. var pair = vars[i].split("=");
  55. if(pair[0] == variable){return pair[1];}
  56. }
  57. return(false);
  58. }
  59. console.log(getQueryVariable("invite_code"))
  60. var invite_code = getQueryVariable("invite_code")
  61. var oDiv = document.getElementById("code");
  62. oDiv.innerHTML = invite_code;
  63. //
  64. $('.loginbtn').on('click',function(){
  65. var number = $('.number').val().length == 11;
  66. var codevluer = $('.codevluer').val().length == '' ;
  67. var poswd = $('.poswd1').val() == $('.poswd2').val() ;
  68. var towposd = $('.towposd1').val() == $('.towposd2').val() ;
  69. //这里应该嵌套使if的,但是不是实际开发,这么写便于代码观看
  70. console.log($('.number').val().length)
  71. if(!number){
  72. var tiptext = "手机号错误"
  73. var tip = document.getElementById("tips");
  74. tip.innerHTML = tiptext;
  75. document.getElementById("data").style.display="block";
  76. setTimeout(function hidden() {
  77. document.getElementById("data").style.display="none";
  78. },1000);
  79. }
  80. if(codevluer){
  81. var tiptext = "验证码"
  82. var tip = document.getElementById("tips");
  83. tip.innerHTML = tiptext;
  84. document.getElementById("data").style.display="block";
  85. setTimeout(function hidden() {
  86. document.getElementById("data").style.display="none";
  87. },1000);
  88. }
  89. if(!poswd){
  90. var tiptext = "两次输入密码不一致"
  91. var tip = document.getElementById("tips");
  92. tip.innerHTML = tiptext;
  93. document.getElementById("data").style.display="block";
  94. setTimeout(function hidden() {
  95. document.getElementById("data").style.display="none";
  96. },1000);
  97. }
  98. if(!towposd){
  99. var tiptext = "二级密码不一致"
  100. var tip = document.getElementById("tips");
  101. tip.innerHTML = tiptext;
  102. document.getElementById("data").style.display="block";
  103. setTimeout(function hidden() {
  104. document.getElementById("data").style.display="none";
  105. },1000);
  106. }
  107. $.ajax({
  108. type:"post",
  109. url:"https://sc.xxuns.com/api/Login/Register",
  110. async : true,
  111. jsonpCallback:"callback_success",
  112. data:{
  113. phone: $('.number').val(), // 手机号
  114. ver_code: $('.codevluer').val(), // 验证码
  115. password: $('.poswd1').val(), // 密码
  116. confirm_password: $('.poswd2').val(), // 确认密码
  117. second_password: $('.towposd1').val(), // 二级密码
  118. confirm_second_password: $('.towposd2').val(), // 二级确认密码
  119. invite_code: invite_code, // 邀请码
  120. },
  121. success : function(data) {
  122. console.log(data)
  123. var tiptext = data.msg
  124. var tip = document.getElementById("tips");
  125. tip.innerHTML = tiptext;
  126. document.getElementById("data").style.display="block";
  127. setTimeout(function hidden() {
  128. document.getElementById("data").style.display="none";
  129. },1000);
  130. if(data.code == 1){
  131. window.location = 'index.html';
  132. }
  133. },
  134. error : function() {
  135. // alert('fail');
  136. }
  137. })
  138. })
  139. //获取接口
  140. //倒计时
  141. var clock = '';
  142. var nums = 60;
  143. var btn;
  144. function sendCode(thisBtn) {
  145. var number = $('.number').val().length == 11;
  146. if(!number){
  147. var tiptext = "手机号错误"
  148. var tip = document.getElementById("tips");
  149. tip.innerHTML = tiptext;
  150. document.getElementById("data").style.display="block";
  151. setTimeout(function hidden() {
  152. document.getElementById("data").style.display="none";
  153. },1000);
  154. }else(
  155. $.ajax({
  156. type:"post",
  157. url:"https://sc.xxuns.com/api/Sms/send",
  158. async : true,
  159. jsonpCallback:"callback_success",
  160. data:{
  161. phone: $('.number').val(), // 手机号
  162. event:"register"
  163. },
  164. success : function(data) {
  165. console.log(data)
  166. console.log(data)
  167. var tiptext = data.msg
  168. var tip = document.getElementById("tips");
  169. tip.innerHTML = tiptext;
  170. document.getElementById("data").style.display="block";
  171. setTimeout(function hidden() {
  172. document.getElementById("data").style.display="none";
  173. },1000);
  174. btn = thisBtn;
  175. btn.disabled = true; //将按钮置为不可点击
  176. btn.value = nums+'s后重新获取';
  177. clock = setInterval(doLoop, 1000); //一秒执行一次
  178. function doLoop(){
  179. nums--;
  180. if(nums > 0){
  181. btn.value = nums+'s后重新获取';
  182. }else{
  183. clearInterval(clock); //清除js定时器
  184. btn.disabled = false;
  185. btn.value = '发送验证码';
  186. nums = 60; //重置时间
  187. }
  188. }
  189. },
  190. error : function() {
  191. }
  192. })
  193. )
  194. }
  195. </script>
  196. </html>