JavaScript程式碼如下：

// 0 入口函式
$(function(){

	// 1、點選獲取驗證碼，請求介面，發給使用者驗證碼
	$('#getNum').on('click',function(){
		// 2、獲取使用者的手機號
		var phoneNum = $('.Rusername').val();
		// console.log(phoneNum)
		// 2.7 要符合手機號的標準才能向用戶的手機號傳送驗證碼
		var regex = new RegExp($('.Rusername').attr('regex'));
		if(!regex.test($('.Rusername').val())){
			alert("請輸入正確手機號");
		}else{
			// 2.4 呼叫傳送簡訊驗證碼的介面
			check(phoneNum,tpl_val);
			count($(this));
			// 2.4.1 把#code#=431515 進行擷取字元，最終拿到發給使用者的驗證碼
		 	var tpl_value = decodeURIComponent(tpl_val);
		 	// console.log(tpl_value);
		 	chenkNum = tpl_value.slice(7);
		 	console.log(chenkNum); // 這個就是發給使用者的驗證碼
		}
		
	});

	// 2.1 根據介面文件，封裝函式
	function check(mobile,tpl_value){
		$.ajax({
			type:'get',
			// url:'http://v.juhe.cn/sms/send?mobile=手機號碼&tpl_id=簡訊模板ID&tpl_value=%23code%23%3D654654&key=',
			url:'http://v.juhe.cn/sms/send',
			data:{
				mobile:mobile,
				tpl_id:888,
				tpl_value:tpl_value,
				key:'648a729c43b06d59c0362850587bca'
			},
			dataType:"jsonp",
			jsonp:"callback",
			success:function(data){
				console.log(data) // {reason: "操作成功", result: {…}, error_code: 0}
				// 2.5 使用者輸入驗證碼，點選登入
				// 點選登入
				$('.goRegister').on('click',function(){
					console.log(1111)
						// 2.5.1 如果驗證碼傳送成功，對驗證碼進行成功匹配，否則提示使用者錯誤資訊
						if(data.error_code === 0){
							// 2.5.2 如果傳送的驗證碼和使用者輸入的驗證碼一致，就登入成功，否則提示使用者驗證不正確
							if(chenkNum === $('.phone').val()){
								alert("登入成功");
								// 進入到網站中
								window.location = 'https://www.boxuegu.com/';
							}else{
								alert("您輸入的驗證碼有誤，請輸入正確的驗證碼");
							}
						}else{
							// 否則提示使用者錯誤資訊
							alert(data.reason);
						}
				});
				
			}
		})
	}
	// 2.2 封裝生成隨機的6位數的函式
	function mathRan(){
		var num = '';
		for(var i = 0; i < 6; i++){
			num += Math.floor(Math.random() * 10);
		}
		return num;
	}

	var mathNum = mathRan();
	// console.log(mathNum); // 455969

	// 2.3 根據介面文件，對驗證碼進行轉換urlencode形式
	var tpl_val = encodeURIComponent('#code#='+ mathNum);
	// console.log(tpl_val); // %23code%23%3D313395
	
	// 2.6 封裝倒計時函式
	var countNum = 60;
	function count(elm){
		if(countNum == 0){
			elm.attr('disabled',false);
			elm.val('獲取驗證碼');
			countNum = 60;
			return;
		}else{
			elm.attr('disabled',true);
			elm.val('重新發送('+ countNum + 's)');
			countNum--;
		}

		setTimeout(function(){
			count(elm)
		},1000)
	}
	
}); // 入口函式
 

簡訊模板可以去相關資料網站申請，作者這裡用到的是來自聚合資料（https://www.juhe.cn/）的簡訊模板。

HTML程式碼如下：

<div id="loginBox">
    		<div class="login-changeTab">
        		<div class="login-register-box">
            		<div class="login-register clearfix">
                		<div class="register-button" align="center">簡訊驗證碼登入</div>
            		</div>
            		<div class="register-content">
                		<div class="registerUsernameBox">
                    		<input type="tel" class="Rusername"  maxlength="11" placeholder="請輸入手機號" regex="^[1][3,4,5,7,8][0-9]{9}$"/>
                    		<span></span>
                		</div>
                		<div class="registerPassword">
                    		<input type="number" class="phone" maxlength="6" placeholder="請輸機驗證碼"/>
                    		<br />
							<input type="button" id="getNum" value="獲取驗證碼">
                    		<span></span>
                		</div>
                		<div class="goRegister">登入</div>
            		</div>
        		</div>
    		</div>
		</div>
 

CSS程式碼如下;

.register-button{
	background-color: lightskyblue;
	width: 166px;
}
#getNum{
	width: 166px;
}
.goRegister{
	background-color: lightskyblue;
	width: 166px;
	text-align: center;
}
#loginBox{
	float: left;
}