<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>發送驗證碼倒計時 </title>
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 500px;
margin: 100px auto;
border: 1px solid #eee;
text-align: center;
}
input {
height: 38px;
line-height: 38px;
}
.sendPhoneCodeWait{
margin-top: 100px;
display: inline-block;
width: 150px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: rgb(30, 102, 209);
color: #fff;
border: none;
}
</style>
</head>
<body>
<div>
<input type="text" id="phone" placeholder="手機號">
<input class="sendPhoneCodeWait" id="sendcode" type="button" value="https://bbs.csdn.net/topics/獲取手機驗證碼">
</div>
</body>
<script src="https://bbs.csdn.net/topics/jquery.min.js"></script>
<script>
$(function(){
//點擊發送驗證碼
$("#sendcode").click(function () {
var sendcode1=$("#phone").val();
console.log(sendcode1)
var Strcellphonedata=https://bbs.csdn.net/topics/{"phone":sendcode1}
if (( /^[1][3,4,5,7,8][0-9]{9}$/.test(sendcode1))){
invokeSettime("sendcode");
// ajax
return
}if (!( /^[1][3,4,5,7,8][0-9]{9}$/.test(sendcode1))){
alert("手機號碼有誤");
}
});
// 發送手機驗證碼
function invokeSettime(obj){
var _obj = $("#"+obj);
var countdown=60;
settime(obj);
function settime(obj) {
if (countdown == 0) {
_obj.attr("disabled",false);
_obj.val("獲取驗證碼");
countdown = 60;
// $("#"+obj).css({"background-color":"green","border":"1px solid green"});
_obj.removeClass("sendPhoneCodeWait").addClass("sendPhoneCode");
return;
} else {
_obj.removeClass("sendPhoneCode").addClass("sendPhoneCodeWait");
_obj.attr("disabled",true);
_obj.val("(" + countdown + ")s后重新發送");
countdown--;
$(".sendPhoneCodeWait").css("background","#e8e8e8");
}
if(countdown==0){
$(".sendPhoneCodeWait").css("background","#2d8bff");
}else {
}
setTimeout(function() {
settime(obj) }
,1000)
}
}
});
</script>
</html>
uj5u.com熱心網友回復：
so 你這個是科普 不是問題是吧uj5u.com熱心網友回復：
剛入坑 不太懂 發錯帖子了uj5u.com熱心網友回復：
判斷手機號碼是否正確 if else 不就行了 還兩次正則uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/25402.html
標籤：JavaScript