                        課程
                    
                        /后端開發
                        
                            /Java
                        
                        /Java高并發秒殺API之web層

彈出框在填寫手機號碼之后不消失？

/**
?*?模塊化，Seckill.js
?*/
var?seckill={
	//?封裝秒殺相關ajax的url
	URL:{
			
	},
	
	validatePhone?:?function(phone){
		if(phone?&&?phone.length?==?11?&&?!isNaN(phone)){
			return?true;
		}?else?{
			return?false;
		}
	},
	//?詳情頁秒殺邏輯
	detail:{
		//詳情頁初始化
		init?:?function(params){
			//手機驗證和登陸，計時交互
			//規劃我們的交互流程
			//在cookie中查找手機號
			var?userPhone?=?$.cookie('userPhone');
			var?strtTime?=?params['startTime'];
			var?endTime?=?params['endTime'];
			var?seckillId?=?params['seckillId'];
			alert('怎么沒有顯示');
			alert(userPhone);
						
				//驗證手機號
				if(!seckill.validatePhone(userPhone)){
					//綁定phone
					//控制輸出				
					var?killPhoneModal?=?$('#killPhoneModal')
					killPhoneModal.modal({
						show:true,//顯示彈出層
						//禁止位置關閉，使得彈出的對話框不會因為點擊其他位置而關閉
						backdrop:'static',
						//關閉鍵盤事件，比如用戶使用esc關閉對話框
						keyboard:false
					});				
				//綁定按鈕
				$('#killPhoneBtn').click(function(){
					var?inputPhone?=?$('#killPhoneKey').val();
					
					if(seckill.validatePhone(inputPhone)){
						alert('shifou');
						console.log('inputPhone====='?+?inputPhone);//TODO
						//驗證成功寫入cookie
						$.cookie('userPhone',?inputPhone,?{expires:?7,?path:?'/seckill'});
						//刷新頁面
						window.location.reload();
						alert('刷新頁面完成？');
					}else?{
						$('#killPhoneMessage').hide().html('<label?class="label?label-danger">手機號錯誤</label>').show(300);
					}
				});
			}
		}
		//驗證通過	
	}
}

上面為seckill.js代碼

<%@?page?language="java"?contentType="text/html;?charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include?file="../common/tag.jsp"%>
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@include?file="../common/common.jsp"%>
<!--?jQuery?(necessary?for?Bootstrap's?JavaScript?plugins)?-->
<script?src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!--?最新的?Bootstrap?核心?JavaScript?文件?-->
<script
src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<!--?jquery?countdown?插件，用來顯示時間?-->
<script?src="https://cdn.bootcss.com/jquery.countdown/2.2.0/jquery.countdown.js"></script>
<!--?<script?src="https://cdn.bootcss.com/jquery-countdown/2.0.2/jquery.countdown-ar.js"></script>?-->
<!--?jquery?cookie?插件?-->
<script?src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script?type="text/javascript"?src="${pageContext.request.contextPath}/js/seckill.js"></script>
<script?type="text/javascript">
????$(function(){
????????//使用el表達式傳入參數
????????seckill.detail.init({
????????????seckillId?:?${seckill.seckillId},
????????????startTime?:?${seckill.startTime.time},//轉換成毫秒
????????????endTime?:?${seckill.endTime.time}
????????});

????});

</script>
</head>
<body>

<div>
<div?class="panel?panel-default?text-center">
<div>
<h1>${seckill.name}</h1>
</div>
<div>
<h2>
<!--?顯示time圖標?-->
<span?class="glyphicon?glyphicon-time"></span>
<!--?展示倒計時?-->
<span?id="seckill-box"></span>
</h2>
</div>
</div>
</div>

<!--?彈出登陸層，輸入電話?-->
<div?class="modal?fade"><!--?fade?為隱藏，js中需要顯示使用show函數?-->
<div>
<div>
<div>
<h3?class="modal-title?text-center">
<span?class="glyphicon?glyphicon-phone"></span>秒殺電話
</h3>
</div>
<div>
<div>
<div?class="col-xs-8?col-xs-offset-3">
<input?type="text"?name="killPhone"?id="killPhoneKey"
placeholder="填寫手機號"?/>
</div>
</div>
</div>

<div>
<!--?驗證信息?-->
<span?id="killPhoneMessage"></span>
<button?type="button"?id="killPhoneBtn"?class="btn?btn-success">
<span?class="glyphicon?glyphicon-phone"></span>?Submit
</button>
</div>
</div>
</div>
</div>
</body>
</html>

上面為detail.jsp頁面代碼。。不清楚哪里錯了，還請各位幫忙看下