<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>绑定手机号</title>
<style>
@charset "utf-8";
html,body,div,p,dl,dt,dd,input{padding:0; margin:0; border:0;-webkit-tap-highlight-color:rgba(0,0,0,0);}
img {border: 0;}
:focus {outline:none;}
input{-webkit-appearance:none;font-family: 'Microsoft yahei';}
html,body{width:100%;height:100%;}
body {font-family:'微软雅黑','宋体',Arial, Helvetica, Tahoma;}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.container{
width:100%;
height:100%;
position:relative;
background:url(http://s0.ifengimg.com/2017/03/02/bg_8e580240.jpg) no-repeat center /100% 100%;
}
.ifengLogo{
position: absolute;
left:5%;
top:3%;
width:2.13rem;
}
.secform {
position: absolute;
left:8%;
bottom:0;
width:84%;
height:4.7rem;
}
.secform>.li {
width: 100%;
margin-bottom: .2rem;
}
.secform>.li>input {
float:left;
width: 90%;
padding-left:5%;
padding-right:5%;
height: 0.8rem;
line-height:.8rem;
font-size:.28rem;
background: #fff;
border-radius:.4rem;
color:#333;
}
.secform>.li>.set_yzm {
width: 50%;
float:left;
}
.secform>.li>.btn_yzm {
width: 35%;
height: 0.8rem;
line-height:.8rem;
border-radius:.4rem;
font-size: .28rem;
text-align: center;
text-decoration: none;
color: #fff;
background-color:#dbdbdb;
float:right;
}
.secform>.lisp>.button {
display: block;
width: 100%;
height: 0.8rem;
text-align: center;
line-height: .8rem;
font-size: .32rem;
background: #f5b141;
color: #fff;
border-radius:.4rem;
text-decoration: none;
}
.secform>.lisp>.tips {
width: 100%;
overflow: hidden;
text-align: center;
line-height: .6rem;
font-size: .32rem;
color: #f5b141;
}
</style>
</head>
<body>
<section class="container">
<img class="ifengLogo" src="http://s0.ifengimg.com/2017/03/02/logo_e8e0c2df.png" alt="">
<div class="secform">
<div class="li clearfix">
<input type="text" id="set_name" name="" placeholder="请输入姓名" value="">
</div>
<div class="li clearfix">
<input type="text" id="set_phone" name="" placeholder="请输入手机号" value="">
</div>
<div class="li clearfix">
<input type="text" id="set_yzm" class="set_yzm" name="" placeholder="请输入验证码" value="">
<a href="javascript:;" class="btn_yzm" id="btn_yzm">获取验证码</a>
</div>
<div class="lisp">
<p class="tips"></p>
<a href="" class="button" id="set_btn">报名</a>
</div>
</div>
</section>
<script src="http://s0.ifengimg.com/static/js/jquery-1.7.2.min_c4de8813.js"></script>
<script>
if(isMobile()){
document.documentElement.style.fontSize = document.documentElement.clientWidth/6.4 + 'px';
}
function isMobile(){
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == 'iphone os';
var bIsMidp = sUserAgent.match(/midp/i) == 'midp';
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
var bIsUc = sUserAgent.match(/ucweb/i) == 'ucweb';
var bIsAndroid = sUserAgent.match(/android/i) == 'android';
var bIsCE = sUserAgent.match(/windows ce/i) == 'window ce';
var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
if(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM){
return true;
}else{
return false;
}
}
var phoneNumber={
activId:0,
MsgContainer: $(".secform .tips"),
set_name:$('#set_name'),//姓名
set_nameVal:null,
set_phone:$('#set_phone'),//手机号
set_phoneVal:null,
set_yzm:$('#set_yzm'),//验证码
set_yzmVal:null,
yzmbtn:$('#btn_yzm'),//获取验证码按钮
yzmTimeFlag: false,//true正在倒计时 false不在倒计时，可发送验证码
set_btn:$('#set_btn'),//提交按钮
getYzmUrl:'',//获取短信验证url
set_Url:'',//提交url
jumpHref:'http://www.house.ifeng.com',//跳转href
regArr: {
phone: /^[1][3-8]+\d{9}$/,
password: /^(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{6,20}$/
},
init:function(){
var me=this;
$('input').on('focus',function(){
me.MsgContainer.html('');
});
//获取短信验证码
me.yzmbtn.on('touchstart',function(event){//验证图片验证码，验证通过发送短信验证码
event.preventDefault();
if(!me.yzmTimeFlag){
me.getVerifyCode();
}
});
//提交
me.set_btn.on('touchstart',function(event){
event.preventDefault();
me.setPnSubmit();
});
},
getVerifyCode: function(){
var me = this;
me.MsgContainer.html('');
me.set_phoneVal= $.trim(me.set_phone.val());
if(!me.regArr.phone.test(me.set_phoneVal)){
me.MsgContainer.html("请输入正确的手机号码!");
return;
}
$.ajax({
url:me.getYzmUrl,
dataType:'json',
type:'post',
data: {
"mobile": me.set_phoneVal
},
success: function(json) {
if(json.errno == 0){
me.MsgContainer.html('验证码已发送!');
me.countdown();
}else{
me.MsgContainer.html(json.msg);
}
}
});
},
countdown: function(){
var me = this;
var second = 60;
me.yzmbtn.html(second+"s重新获取");
me.yzmTimeFlag = true;
var timeRemain = setInterval(function(){
second--;
me.yzmbtn.html(second+'s重新获取');
if(second <= 0){
me.yzmTimeFlag = false;
me.yzmbtn.html('获取验证码');
clearInterval(timeRemain);
}
}, 1000);
},
setPnSubmit:function(){
var me=this;
me.MsgContainer.html('');
me.set_nameVal=me.set_name.val();
me.set_phoneVal=me.set_phone.val();
me.set_yzmVal=me.set_yzm.val();
if(me.set_nameVal == ""){
me.MsgContainer.html("请输入姓名!");
return;
}
if(!me.regArr.phone.test(me.set_phoneVal)){
me.MsgContainer.html("请输入正确的手机号码!");
return;
}
if(me.set_yzmVal == ""){
me.MsgContainer.html("请输入短信验证码!");
return;
}
me.set_btn.css({backgroundColor:'#e28f05'});
$.ajax({
url:me.set_Url,
dataType:'json',
type:'post',
data:{
'id':me.activId,
'name':me.set_nameVal,
'mobile':me.set_phoneVal,
'yzm':me.set_yzmVal
},
success:function(json){
if(json.errno==0){
me.successTC();
}else{
me.MsgContainer.html(json.msg);
}
}
});
},
successTC:function(){
var me=this;
var html='<div class="success" style="position:absolute;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5)">'+
'<div style="width:74%;height:3.77rem;position: absolute;left:13%;top:50%;transform:translate3d(0,-50%,0);background:url(http://s0.ifengimg.com/2017/03/02/tcbg_415fa3ae.png) no-repeat center/100% 100%">'+
'<dl style="text-align: center;color:#311f1f;margin-top: 1.4rem;">'+
'<dt style="font-size:.3rem;margin-bottom:.2rem;">恭喜您报名成功！</dt>'+
'<dd style="font-size:.24rem;"><span class="suc-Num">10</span>秒钟后将自动跳转</dd>'+
'</dl>'+
'<a class="suc-Close" style="position: absolute;bottom:0;left:0;display: block;width:100%;height:.7rem;" href="javascript:;"></a>'+
'</div>'+
'</div>';
$('.container').append(html);
var time=setTimeout(secDJS,1000);
function secDJS(){
var num=$('.suc-Num');
num.html(num.html()-1);
if(num.html()>0){
time=setTimeout(secDJS,1000);
}else{
window.location.href=me.jumpHref;
}
}
$('.suc-Close').on('touchstart',function(event){
event.preventDefault();
clearTimeout(time);
$('.success').remove();
});
}
};
$(function(){
var activityid=999;//活动id
phoneNumber.activId=activityid;
phoneNumber.init();
});
</script>
</body>
</html>
