h5注册代码（获取地址栏数据，判断浏览器类型，ajax请求，）

<!DOCTYPE HTML>
<html>

</header>-->
<section class="content">
<div class="top">
<img src="./img/topimg.png" />

</div>
<div class="bottom">

<div class="row">
<img src="./img/login_uid.png" />
<input placeholder="请输入您的手机号" value="" id="number" />
</div>
<div class="row">
<img src="./img/login_authcode.png" />
<input placeholder="请输入您的短信验证码" value="" id="code" />
<div class="tip" id="yanzma">获取验证码</div>
</div>
<div class="row">
<img src="./img/login_pwd.png" />
<input placeholder="请设置6-20位登录密码" value="" id="passwoder" />
</div>
<div class="row none-border">
<input type="checkbox" class="checkbox" />
<div class="tipss">
<a href="Agreement.html">用户协议</a>
</div>
</div>
<div class="btn" id="save">
注册
</div>
<div class="row1">
<a href="" class="down" id=""><img src="./img/ios.png" class="img1" />下载苹果版</a>
<a href="" class="down" id="downAndroid"><img src="./img/anri.png" class="img1" />下载安卓版</a>

</div>
</div>
</section>

</body>

</html>
<style>
body {
font-size: 62.5%
}

.con {
width: 100%;
max-width: 75rem;
box-sizing: border-box;
margin: 0 auto;
background: #fff;
}

.header img {
width: 0.9rem;
margin-right: 1.6rem;
}

.header {
padding: 1.4rem 1.5rem;
display: flex;
align-items: center;
justify-content: flex-start;
}

.top img {
width: 100%;
}

.text {
font-size: 1.7rem;
}

.tit {
font-size: 1.3rem;
}

.bottom .none-border {
border-bottom: none!important;
margin: 0!important;
padding: 0!important;
}

.row .tip {
font-size: 1.2rem;
width: 8rem;
white-space: nowrap;
background: #ba4651;
color: #fff;
padding: 0.3rem 0.5rem;
border-radius: 1rem;
text-align: center;
}

.tipss a {
color: #007AFF;
text-decoration: none;
}

.row input {
border: none;
padding: 0.3rem;
}

.row {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 1rem auto;
padding: 1rem 0rem;
box-sizing: border-box;
border-bottom: 0.1rem dashed #999;
}

.row1 {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
margin: 1rem auto;
padding: 1rem 0rem;
box-sizing: border-box;
}

.row1 .down {
width: 48%;
display: flex;
align-items: center;
justify-content: flex-start;
background:#ba4651;
text-decoration: none;
color: #fff;
font-size: 1.2rem;
padding: 0.5rem 1rem;
box-sizing: border-box;
border-radius: 0.5rem;
}

.row1 .down img {
width: 18%;margin-right: 0.6rem;
}

.row1 img {
width: 48%;
}

.row1 .img1 {
margin-right: 4%;
}

.row img {
width: 2rem;
margin-right: 0.5rem;
}

.bottom {
width: 100%;
padding: 3rem 5rem 0;
box-sizing: border-box;
}

.btn{
margin-top: 3rem;
background:#ba4651;
text-decoration: none;
color: #fff;
font-size: 1.5rem;
padding: 0.9rem 1rem;
box-sizing: border-box;
border-radius: 0.5rem;
text-align: center;

}

@media only screen and (min-width: 320px) {
html {
font-size: 62.5% !important;
}
}

@media only screen and (min-width: 640px) {
html {
font-size: 125% !important;
}
}

@media only screen and (min-width: 750px) {
html {
font-size: 150% !important;
}
}
</style>
<script>
window.onload = function() {
downAndroid();
}
//截取地址栏数据
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) return unescape(r[2]);
return null;
}
//获取验证码
$("#yanzma").click(function() {
var mobile = $("#number").val();

if(mobile === '' || mobile === undefined || mobile === null) {
alert('填写手机号码')
return
}
var text = $("#yanzma").html();

if(text === '获取验证码') {
var data1 = {
mobile: mobile,
}

$.ajax({
type: "post",
contentType: "application/json;charset=utf-8",
url: url + "/api/user/smscode",
data: JSON.stringify(data1),
success: function(data) {
var data = JSON.parse(data)
if(data.errno === 0) {
alert("发送成功");
var sum = 5
var int = setInterval(function() {
if(sum === 1) {
window.clearTimeout(int);
$("#yanzma").html("获取验证码");
} else {
sum--
$("#yanzma").html(sum);
}
}, 1000)

} else {

alert(data.msg)
}
// window.location.href = "/toMainPage";
},
error: function(XMLHttpResponse, textStatus, errorThrown) {
alert(XMLHttpResponse.statusText);
}
});

//
} else {
alert("已发送信息")
}

})

//保存
$("#save").click(function() {
var checkbox = $("input[type='checkbox']").is(':checked');

if($("#number").val() === '' || $("#number").val() === undefined || $("#number").val() === null) {
alert('填写手机号码')
return
}
if($("#code").val() === '' || $("#code").val() === undefined || $("#code").val() === null) {
alert('请输入您的短信验证码')
return
}
if($("#passwoder").val() === '' || $("#passwoder").val() === undefined || $("#passwoder").val() === null) {
alert('请设置6-20位登录密码')
return
}
if(checkbox === false) {
alert('请认真阅读用户协议，并勾选。')
return
}
var recommendMan = GetQueryString("recommendMan");
var number = $("#number").val();
var passwoder = $("#passwoder").val();
var code = $("#passwoder").val();
var data = {
recommendMan: recommendMan,
password: passwoder,
mobile: number,
smsCode: code,
}
$.ajax({
type: "post",
contentType: "application/json;charset=utf-8",
url: url + "/api/auth/register",
data: JSON.stringify(data),
success: function(data) {
var data = JSON.parse(data)
if(data.errno === 0) {
alert("注册成功")

} else {
alert(data.errmsg)
}
// window.location.href = "/toMainPage";
},
error: function(XMLHttpResponse) {
alert(XMLHttpResponse.statusText);
}
});

});

//下载安卓App
function downAndroid() {
//获取版本信息
$.ajax({
type: "post",
contentType: "application/json;charset=utf-8",
url: url + "/sys/app/getAppVersion",
// data: JSON.stringify(data1),
success: function(data) {

if(data.code === 0) {
var AndroidAppUrl = url + "/sys/app/downloadApk/" + data.app.fileName;

$('#downAndroid').attr("href", AndroidAppUrl);

} else {

alert(data.msg)
}
// window.location.href = "/toMainPage";
},
error: function(XMLHttpResponse, textStatus, errorThrown) {
alert(XMLHttpResponse.statusText);
}
});

}
$("#downAndroid").click(function() {
if(browser.versions.mobile) { //判断是否是移动设备打开。browser代码在下面
var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
if(ua.match(/MicroMessenger/i) == "micromessenger") {
alert('微信浏览器无法下载，请使用其他浏览器打开')
}
}

});
var browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return { //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
</script>

posted @ 2019-07-02 15:16 皓ma 阅读(767) 评论(0) 编辑收藏举报

刷新页面返回顶部

皓ma

h5注册代码（获取地址栏数据，判断浏览器类型，ajax请求，）

公告