2021-05-09
作者：互联网
手机端 手机登录 倒计时 原生js
原生js
看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>log-in</title>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<style>
/*重置样式*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub
, sup, tt, var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header,
hgroup, menu, nav, output, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0
}
body {
font-family: "微软雅黑";
background: #f4f4f4;
width: 100%;
margin: 0 auto;
height: 100vh
}
/*content*/
.content {
width: 100%;
margin: 0 auto;
height: 100%;
text-align: center;
}
.content-logo {
width: 80px;
height: 80px;
}
.content-title {
margin: 10px 0 25px 0;
font-size: 2em;
color: #747474;
font-weight: normal;
}
.header-line{
font-size: 2em;
font-weight: 555;
text-align: left;
padding-left: 50px;
margin: 160px 0 0 0;
padding-bottom: 30px;
}
.content-form {
width: 100%;
border: 1px solid #dedede;
text-align: center;
height: 100%;
background: #fff;
}
.content-form form div {
margin-bottom: 19px;
}
.content-form form .user,
.content-form form .password {
width: 77%;
padding: 10px;
font-size: 1.2em;
border: 0;
border-bottom: 2px solid #cccbcb;
letter-spacing: 1px;
height: 40px;
line-height: 40px;
}
.content-form form input:focus {
outline: none;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0 0 5px #fff;
}
.content-form-signup {
width: 84%;
margin: 0 auto;
margin-top: 30px;
height: 60px;
line-height: 60px;
border: 1px solid #cccbcb;
border-radius: 30px;
font-size: 1.2em;
font-weight: bold;
letter-spacing: 10px;
color: rgb(53, 53, 53);
background: #ffd901;
cursor: pointer;
}
.content-form-signup:hover {
background: #dfbe06;
}
.content-form-signup:focus {
outline: none;
border: 1px solid #d0b30c;
}
.userp, .passwordP{
font-size: 20px;
text-align: left;
padding-left: 50px;
font-weight: 555;
}
/*输入框无内容便提示*/
#remind_1,
#remind_2 {
width: 76%;
margin: 0 auto ;
text-align: left;
font-size: .4em;
color: #f00;
padding: 0 0 20px 0;
height: 20px;
}
#change_margin_2{
position: relative;
}
.spanclass{
border-radius: 20px;
height: 36px;
line-height: 36px;
width: 80px;
text-align: center;
display: inline-block;
position: absolute;
right: 40px;
font-size: 16px;
border: 2px solid #333;
top: 33px;
color:rgb(66, 66, 66);
}
.disable{
pointer-events:none;
border: 2px solid rgb(160, 160, 160);
color:rgb(150, 150, 150);
}
</style>
</head>
<body>
<div class="content">
<div class="content-form">
<form method="post" action="" onsubmit="return submitTest()">
<header>
<div class="header-line">欢迎来到登录页面</div>
</header>
<div id="change_margin_1">
<p class="userp">账号</p>
<input class="user" maxlength="11" type="text" name="user" placeholder="请输入电话" onblur="oBlur_1()" onfocus="oFocus_1()">
</div>
<!-- input的value为空时弹出提醒 -->
<p id="remind_1"></p>
<div id="change_margin_2">
<p class="passwordP">验证码</p>
<input class="password" maxlength="4" placeholder="请输入验证码" onblur="oBlur_2()" onfocus="oFocus_2()">
<span class="spanclass" id="getCode" onclick="getCode()" >验证码</span>
</div>
<!-- input的value为空时弹出提醒 -->
<p id="remind_2"></p>
<div id="change_margin_3">
<input class="content-form-signup" type="submit" value="登录">
</div>
</form>
</div>
</div>
<script>
// 全局变量a和b，分别获取用户框和验证码框的value值
//用户框失去焦点后验证value值
function oBlur_1() {
var phone = document.getElementsByTagName("input")[0].value;
var phoneStyle = document.getElementsByTagName("input")[0];
if (!phone ) { //用户框value值为空
document.getElementById("remind_1").innerHTML = "请输入电话！";
phoneStyle.style.borderBottomColor = "#f00";
} else if (!(/^1[3456789]{1}\d{9}$/.test(phone))) {
document.getElementById("remind_1").innerHTML = "电话号码错误";
phoneStyle.style.borderBottomColor = "#f00";
} else { //用户框value值不为空
document.getElementById("remind_1").innerHTML = "";
phoneStyle.style.borderBottomColor = "#cccbcb";
}
}
//验证码框失去焦点后验证value值
function oBlur_2() {
var getCode = document.getElementsByTagName("input")[1].value;
var getCodeStyle = document.getElementsByTagName("input")[1];
if (!getCode) { //验证码框value值为空
document.getElementById("remind_2").innerHTML = "请输入验证码！";
getCodeStyle.style.borderBottomColor = "#f00";
} else { //验证码框value值不为空
document.getElementById("remind_2").innerHTML = "";
getCodeStyle.style.borderBottomColor = "#cccbcb";
}
}
//用户框获得焦点的隐藏提醒
function oFocus_1() {
document.getElementById("remind_1").innerHTML = "";
}
//验证码框获得焦点的隐藏提醒
function oFocus_2() {
document.getElementById("remind_2").innerHTML = "";
}
// 获取验证码
function getCode(){
var flag = true;
var phone = document.getElementsByTagName("input")[0].value;
var phoneStyle = document.getElementsByTagName("input")[0];
var getCode = document.getElementById('getCode');
if (!phone ) { //用户框value值为空
document.getElementById("remind_1").innerHTML = "请输入电话！";
phoneStyle.style.borderBottomColor = "#f00";
} else if (!(/^1[3456789]{1}\d{9}$/.test(phone))) {
document.getElementById("remind_1").innerHTML = "电话号码错误";
phoneStyle.style.borderBottomColor = "#f00";
} else {
// ajax({
// url:"t.php",
// method:"get",
// param:"a=1&b=2",
// isAsync:true,
// func:function(){
// // 返回成功 开启定时器
// var time = 60;
// getCode.classList.add('disable');
// if (flag) {
// flag = false;
// var timer = setInterval(() => {
// time--;
// getCode.innerText = time + ' 秒';
// if (time === 0) {
// clearInterval(timer);
// getCode.innerText = '重新获取';
// getCode.classList.remove('disable');
// flag = true;
// }
// }, 1000)
// }
// }
// });
var time = 60;
getCode.classList.add('disable');
if (flag) {
flag = false;
var timer = setInterval(() => {
time--;
getCode.innerText = time + ' 秒';
if (time === 0) {
clearInterval(timer);
getCode.innerText = '重新获取';
getCode.classList.remove('disable');
flag = true;
}
}, 1000)
}
}
}
//若输入框为空，阻止表单的提交
function submitTest() {
var phone = document.getElementsByTagName("input")[0].value;
var phoneStyle = document.getElementsByTagName("input")[0];
var getCode = document.getElementsByTagName("input")[1].value;
var getCodeStyle = document.getElementsByTagName("input")[1];
if (!phone && !getCode) { //用户框value值和验证码框value值都为空
document.getElementById("remind_1").innerHTML = "请输入电话！";
document.getElementById("remind_2").innerHTML = "请输入验证码！";
phoneStyle.style.borderBottomColor = "#f00";
getCodeStyle.style.borderBottomColor = "#f00";
return false; //只有返回true表单才会提交
} else if (!phone) { //用户框value值为空
document.getElementById("remind_1").innerHTML = "请输入电话！";
phoneStyle.style.borderBottomColor = "#f00";
return false;
} else if (!getCode) { //验证码框value值为空
document.getElementById("remind_2").innerHTML = "请输入验证码！";
getCodeStyle.style.borderBottomColor = "#f00";
return false;
} else {
// 提交
var paramObj = { phone : phone, code : getcode };
ajax({
url:"t.php",
method:"post",
param: paramObj,
isAsync:true,
func:function(){
// 提交 成功
}
});
}
}
/*
ajax({
url:"t.php",
method:"get",
param:"a=1&b=2",
isAsync:true,
func:function(){
}
});
*/
//参数是对象
function ajax(obj){
//1、创建对象
let xhr = new XMLHttpRequest();
let urlAndParam = obj.url;
if(obj.method.toLowerCase()=="get" && obj.param!=""){
urlAndParam +="?"+obj.param;
}
//2、
xhr.open(obj.method,urlAndParam,obj.isAsync);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
obj.func(xhr.responseText);
}
}
if(obj.method.toLowerCase()=="post"){
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(obj.param);
}else{
xhr.send();
}
}
</script>
</body>
</html>
标签：getCode,form,05,09,value,remind,2021,var,document 来源： https://blog.csdn.net/weixin_43118088/article/details/116571503