代码拉取完成,页面将自动刷新
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>reg</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<style type="text/css">
.but-pay {
width: 80%;
height: 40px;
background-color: #2B57DA;
color: #FFFFFF;
bottom: 30px;
border-radius: 8px;
text-align: center;
line-height: 40px;
size: 50px;
margin: auto;
font-weight: 600;
margin-top: 30px;
}
.bootom-page {
background: url(img/login-bg.png) no-repeat;
width: 100%;
height: 128px;
background-size: 100%;
position: fixed;
bottom: 0;
}
</style>
<body>
<div class="bui-page bui-box-vertical">
<header>
<!-- 固定顶部区 -->
<div class="bui-bar" style="background-color: #FFFFFF;">
<div class="bui-bar-left">
<a class="bui-btn" onclick="bui.back();"><i class="icon-back" style="color: black;"></i></a>
</div>
<div class="bui-bar-main" style="color: black; font-weight: 700;">
</div>
<div class="bui-bar-right">
</div>
</div>
</header>
<main>
<!-- 固定中间滚动内容区 -->
<div style="width: 100%;text-align: center;">
<img src="img/logo.png" width="80" height="80" style="margin-top: 40px;">
<h2>AstraZeneca</h2>
</div>
<div style="margin-top: 15px;margin-left: 45px;margin-right: 45px;">
<div class="bui-input user-input"
style="border-bottom: 1px solid #eee;height: 50px;text-align: center;">
<h3 style="font-weight: 600;">91</h3> <input id="phonenumber" type="text" class="bui-input"
style="margin-left: 5px;" value="" placeholder="Please enter your account">
</div>
<div class="bui-input user-input"
style="border-bottom: 1px solid #eee;height: 50px;text-align: center;margin-top: 20px;">
<input id="code" type="text" class="bui-input" value="" placeholder="Verification Code"
maxlength="4">
<div class="bui-btn primary-reverse mini ring " id="btnSend">Send code</div>
</div>
<div class="bui-input user-input"
style="border-bottom: 1px solid #eee;height: 50px;text-align: center;margin-top: 20px;">
<input id="passwordInput" type="text" class="bui-input" style="margin-left: 5px;" value=""
placeholder="set your password">
</div>
</div>
<div class="but-pay">
register
</div>
<div class="bootom-page">
</div>
</main>
<footer>
<!-- 固定底部 -->
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/buijs/lib/zepto.js"></script>
<script src="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.js"></script>
<script>
var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/; //手机号正则
var count = 60; //间隔函数,1秒执行
var InterValObj1; //timer变量,控制时间
var curCount1; //当前剩余秒数
bui.ready(function() {
bui.btn({
id: ".bui-page",
handle: ".bui-btn"
}).load();
$("#btnSend").on("click", function(argument) {
sendMessage1()
})
})
function sendMessage1() {
curCount1 = count;
var phone = $.trim($('#phonenumber').val());
if (!phoneReg.test(phone)) {
bui.alert("Please enter a valid mobile phone number");
return false;
}
//设置button效果,开始计时
$("#btnSend").addClass("disabled")
$("#btnSend").text(+curCount1 + "Seconds to get");
InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器,1秒执行一次
//向后台发送处理数据
}
function SetRemainTime1() {
if (curCount1 == 0) {
window.clearInterval(InterValObj1); //停止计时器
$("#btnSend").removeClass("disabled"); //启用按钮
$("#btnSend").text("Resend");
} else {
curCount1--;
$("#btnSend").text(+curCount1 + "Seconds to get");
}
}
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。