1 <style> 3 body{ 4 background-color:#fff; 5 } 6 .auth-tab-wrapper{ 7 height:70px; 8 } 9 #sms-tab,#boarding-tab{ 10 float:left; 11 height:60px; 12 padding-top:10px; 13 width:50%; 14 background-color:#fff; 15 text-align:center; 16 font-family:'微软雅黑'; 17 } 18 #boarding-tab{ 19 background-color:#5fd7f6; 20 } 21 .phoneBox{ 22 margin:10px 0 0 10%; 23 height:40px; 24 width:80%; 25 } 26 #phoneNumID{ 27 height:40px; 28 width:60%; 29 } 30 .sms-btn{ 31 height:40px; 32 width:35%; 33 } 34 #passwordID{ 35 margin:10px 10% 0 10%; 36 height:40px; 37 width:80%; 38 } 39 .sms-sub{ 40 margin:10px 10% 0 10%; 41 width:80%; 42 height:40px; 43 } 44 .auth-content-wrapper{ 45 padding-top:10px; 46 } 47 48 #boarding-content{ 49 display:none; 50 } 51 table,tr,td{ 52 border:0; 53 } 54 #boarding-content table{ 55 width:90%; 56 margin:0 auto; 57 font-family:'微软雅黑'; 58 font-size:12px; 59 } 60 #boarding-content input[type=text]{ 61 margin:3px 0; 62 height:40px; 63 width:100%; 64 } 65 #boarding-content input[type=button]{ 66 margin-top:3px; 67 height:40px; 68 width:100%; 69 } 70 #second-page{ 71 display:none; 72 } 73 74 75 </style> 76 77 78 <div id="first-page"> 79 80 <!--滚动图片需要按照下面的html代码构建--> 81 <div id="html-slider" class="swipe"> 82 <div class="swipe-wrap"> 83 <div><img class='swipe-img' src="http://172.24.128.187/ngProxy//images/uqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150602/1433226800258.jpg" /></div> 84 <div><img class='swipe-img' src="http://172.24.128.187/ngProxy//images/uqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150602/1433226803744.jpg" /></div> 85 <div><img class='swipe-img' src="http://172.24.128.187/ngProxy//images/uqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150602/1433226825527.jpg" /></div> 86 </div> 87 </div> 88 89 90 <div class="auth-box"> 91 <div class="auth-tab-wrapper"> 92 <div id="sms-tab" onclick="showAuthContent('sms')">短信认证<br/>SMS Auth</div> 93 <div id="boarding-tab" onclick="showAuthContent('boarding')">登机牌认证<br/>Bording Pass Auth</div> 94 </div> 95 <div class="auth-content-wrapper"> 96 <div id="sms-content"> 97 <div class='phoneBox'> 98 <input id="phoneNumID" type="text" placeholder='请输入手机号' /> 99 <input class="sms-btn" type="button" onclick="sendMessage()" value="获取验证码" /> 100 </div> 101 <input id="passwordID" type="password" placeholder='请输入验证码'/><br/> 102 <input class="sms-sub" type="button" onclick="authOnline(1)" value="认证上网" /> 103 </div> 104 <div id="boarding-content"> 105 <table> 106 <tr><td>证件号/POSSPORT:</td> 107 <td><input type="text"id="boarding-certificateNo" /></td></tr> 108 <tr><td>航班号/FLIGHT:</td> 109 <td> <input type="text" id="boarding-flyNo"/></td></tr> 110 <tr><td> 座位号/SEAT:</td> 111 <td><input type="text" id="boarding-userName"/></td></tr> 112 <tr><td colspan='2'> 113 <input type="button" value="登机牌认证/Bording Pass Auth" onclick="authOnline(7)"/></td></tr> 114 </table> 115 116 </div> 117 </div> 118 </div> 119 </div> 120 121 <div id="second-page"> 122 <img src="http://172.24.128.187/ngProxy//imagesuqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150519/1432029502296.jpg" width="100%"/> 123 124 </div> 125 126 127 <script> 128 129 function showAuthContent(type){ 130 if('sms'==type){ 131 $('#sms-tab').css('background-color','#fff'); 132 $('#boarding-tab').css('background-color','#5fd7f6'); 133 $('#sms-content').show(); 134 $('#boarding-content').hide(); 135 }else if('boarding'==type){ 136 $('#sms-tab').css('background-color','#5fd7f6'); 137 $('#boarding-tab').css('background-color','#fff'); 138 $('#sms-content').hide(); 139 $('#boarding-content').show(); 140 } 141 } 142 143 144 function sendMessage(){ 145 var result = sendSMS("#phoneNumID"); 146 if(result=='succ'){ 147 alert("短信发送成功!"); 148 }else if(result=='fail'){ 149 alert("短信发送失败!"); 150 } 151 } 152 153 //认证上网函数 154 function authOnline(type){ 155 var result; 156 if(1==type){ 157 //短信认证 158 result = authenticate(1, '#phoneNumID', '#passwordID'); 159 }else if(7==type){ 160 //登机牌认证 161 result = authenticate(7,'#boarding-userName','#boarding-certificateNo','#boarding-flyNo'); 162 }else{ 163 //这个判断分支必须存在,不能删除 164 result = authenticate(); 165 } 166 if(result == 'succ'){ 167 //这里可以编写任意认证上网成功的页面效果,例如: 168 $('#first-page').hide(); 169 $('#second-page').show(); 170 }else if(result == 'fail'){ 171 //这里可以编写任意认证上网失败的页面效果,例如: 172 alert("用户名和密码错误"); 173 } 174 } 175 176 </script>