报名流程

最新推荐文章于 2025-09-13 21:59:18 发布
转载最新推荐文章于 2025-09-13 21:59:18 发布 · 125 阅读
0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/mbyund/p/6909195.html
文章标签：
#json #javascript #移动开发 #ViewUI
<!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>
转载于:https://www.cnblogs.com/mbyund/p/6909195.html