js短信注册
html
<div class="login-middle"><span class="placeholder1">手機號碼</span><input class="user_phone" type="text" οnfοcus="$('.placeholder1').hide()" οnblur="if($(this).val()!=''){$('.placeholder1').hide()}else{$('.placeholder1').show()}"/><span class="placeholder2">驗證碼</span><input class="user_verify_code" type="text" οnfοcus="$('.placeholder2').hide()" οnblur="if($(this).val()!=''){$('.placeholder2').hide()}else{$('.placeholder2').show()}"/><input type="button" class="user_verify_code_button" value="獲取驗證碼" />?<span class="placeholder3">請設置密碼</span><input class="user_passwrord" type="password" οnfοcus="$('.placeholder3').hide()" οnblur="if($(this).val()!=''){$('.placeholder3').hide()}else{$('.placeholder3').show()}"/>?<button class="register-button">注冊</button> </div>js
// 獲取驗證碼倒計時$(".user_verify_code_button").on('click',function(){var countdown=60; settime(this);function settime(val){ if (countdown == 0){ $(".user_verify_code_button").attr("style","background:#f2572c")val.removeAttribute("disabled"); val.value="獲取驗證碼"; countdown = 60; return;}else{ $(".user_verify_code_button").attr("style","background:#b5b5b5;cursor:not-allowed");val.setAttribute("disabled", true); val.value="重新發送(" + countdown + 's'+")"; countdown--; } setTimeout(function() { settime(val) },1000) } });$(".register-button").click(function () { //注冊var user_phone=$(".user_phone").val();var user_verify_code=$(".user_verify_code").val();$.ajax({type: "POST",url: "/register",contentType: 'application/json; charset=utf-8', // 很重要traditional: true,data:JSON.stringify({"user_phone":user_phone,"user_verify_code":user_verify_code}),success: function(msg){$(".register-button").attr('style',"background:#d43c12");alert("success");},error:function(err) {$(".register-button").attr('style',"background:#d43c12");}});});
總結
- 上一篇: web前端知识体系大全
- 下一篇: 解决placeholder兼容性问题