以下是一个简单的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发送请求到后端验证验证码，验证通过则跳转到指定页面，验证失败则要求重新输入。
723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
