<meta charset="UTF-8">
<meta name="viewport" content="width=device - width, initial - scale=1.0" & gt;
<style>
* {
margin: 0;
padding: 0;
}
Div {
Width: 500 px;
Height: 500 px;
Margin: 100 px auto;
border: 1px solid #eee;
text-align: center;
}
Input {
Height: 38 px;
The line - height: 38 px;
}
. SendPhoneCodeWait {
Margin - top: 100 px;
display: inline-block;
width: 150px;
height: 40px;
The line - height: 40 px;
text-align: center;
Background - color: RGB (30, 102, 209);
Color: # FFF.
border: none;
}
</style>
<body>
<script SRC="https://bbs.csdn.net/topics/jquery.min.js" & gt; </script>
<script>
$(function () {
//click on send verification code
$(" # sendcode "). Click (function () {
Var sendcode1=$(" # phone "). Val ();
The console. The log (sendcode1)
Var Strcellphonedata=https://bbs.csdn.net/topics/{" phone ": sendcode1}
If ((/^ [1] [3,4,5,7,8] [0-9] {9} $/. The test (sendcode1))) {
Sendcode invokeSettime (" ");
//ajax
Return
} the if (! ,4,5,7,8 (/^ [1] [3] [0-9] {9} $/. The test (sendcode1))) {
Alert (" cell phone number is wrong ");
}
});
//sending mobile phone verification code
The function invokeSettime (obj) {
Var _obj=$(" # "+ obj);
Var countdown=60;
Settime (obj);
The function settime (obj) {
If (countdown==0) {
_obj. Attr (" disabled ", false);
_obj. Val (" get verification code ");
countdown=60;
//$(" # "+ obj). CSS ({" background - color" : "green", "border" : "1 px solid green"});
_obj. RemoveClass (" sendPhoneCodeWait "). The addClass (" sendPhoneCode ");
return;
} else {
_obj. RemoveClass (" sendPhoneCode "). The addClass (" sendPhoneCodeWait ");
_obj. Attr (" disabled ", true);
_obj. Val (" (" + countdown +) "s resend after");
Countdown -;
$(". SendPhoneCodeWait "). The CSS (" background ", "# e8e8e8");
}
If (countdown==0) {
$(". SendPhoneCodeWait "). The CSS (" background ", "# 2 d8bff");
} else {
}
SetTimeout (function () {
Settime (obj)}
, 1000)
}
}
});
</script>