帮我写一个html页面: 页面是左右布局,输入框按钮等靠右边; 页面需要自适应,能够适应pc页面手机页面; 标签名称为文件实验室/账号登录; 两个input框,一个显示输入接收验证码的邮箱在他的右边有一个按钮名称为获取验证码, 第二个input输入框显示输入验证码,他的下方是一个登录按钮; 然后使用ajax技术,将获取到的邮箱账号使用post发送到/admin/等待后端发送验证码,获取验证码的按钮点击后显示60秒后再试期间按钮不能触发; 用户填入验证码后使用post发送到/response/等待后端验证,后端验证通过后跳转到https://www.spacexs.cn,失败则要求重新输入; 字体使用楷体,页面语言是简体中文, 要求点击获取验证码后,按钮文本显示为60秒后再试期间禁用按钮 使用ajax发送请求
时间: 2023-12-06 08:39:55 浏览: 29
以下是一个简单的HTML页面,实现了你的要求:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文件实验室/账号登录</title>
<style>
body {
font-family: "楷体", KaiTi, serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 100vh;
box-sizing: border-box;
padding: 1em;
}
.form {
display: flex;
flex-direction: column;
align-items: flex-end;
width: 40%;
max-width: 500px;
}
label {
display: block;
margin-bottom: 0.5em;
}
input {
margin-bottom: 1em;
padding: 0.5em;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
width: 100%;
max-width: 300px;
}
button {
padding: 0.5em 1em;
font-size: 1em;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="container">
<form class="form">
<label for="email">输入接收验证码的邮箱</label>
<input type="email" id="email" name="email" required>
<button type="button" id="get-code">获取验证码</button>
<label for="code">输入验证码</label>
<input type="text" id="code" name="code" required>
<button type="submit" id="login">登录</button>
</form>
</div>
<script>
var getCodeBtn = document.getElementById('get-code');
var countdown = 60;
var countdownTimer;
getCodeBtn.addEventListener('click', function() {
getCodeBtn.disabled = true;
countdownTimer = setInterval(function() {
countdown--;
getCodeBtn.textContent = countdown + '秒后再试';
if (countdown <= 0) {
clearInterval(countdownTimer);
countdown = 60;
getCodeBtn.textContent = '获取验证码';
getCodeBtn.disabled = false;
}
}, 1000);
// 使用ajax发送请求
var xhr = new XMLHttpRequest();
xhr.open('POST', '/admin/');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('email=' + encodeURIComponent(document.getElementById('email').value));
});
document.getElementById('login').addEventListener('click', function(e) {
e.preventDefault();
// 使用ajax发送请求
var xhr = new XMLHttpRequest();
xhr.open('POST', '/response/');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
if (xhr.responseText === 'success') {
window.location.href = 'https://www.spacexs.cn';
} else {
alert('验证码错误,请重新输入!');
}
}
};
xhr.send('code=' + encodeURIComponent(document.getElementById('code').value));
});
</script>
</body>
</html>
```
这个页面使用了Flexbox布局,实现了左右布局,输入框、按钮等靠右边,并且能够自适应PC和手机页面。使用了ajax技术发送请求,实现了获取验证码和登录功能。获取验证码按钮在点击后会进入倒计时状态,60秒后才能再次点击。在登录时,使用ajax发送请求到后端验证验证码,验证通过则跳转到指定页面,验证失败则要求重新输入。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)