帮我写一个html页面： 页面是左右布局，输入框按钮等靠右边； 页面需要自适应，能够适应pc页面手机页面； 标签名称为文件实验室/账号登录； 两个input框，一个显示输入接收验证码的邮箱在他的右边有一个按钮名称为获取验证码， 第二个input输入框显示输入验证码，他的下方是一个登录按钮； 然后使用ajax技术，将获取到的邮箱账号使用post发送到/admin/等待后端发送验证码，获取验证码的按钮点击后显示60秒后再试期间按钮不能触发； 用户填入验证码后使用post发送到/response/等待后端验证，后端验证通过后跳转到https://www.spacexs.cn，失败则要求重新输入； 字体使用楷体，页面语言是简体中文， 要求点击获取验证码后，按钮文本显示为60秒后再试期间禁用按钮 使用ajax发送请求
时间: 2023-12-06 11:39:54 浏览: 143
好的，以下是一个简单的HTML页面，布局满足您的要求，并且使用了AJAX技术来发送请求：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文件实验室/账号登录</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.container {
display: flex;
flex-direction: row;
height: 100%;
}
.left {
flex: 1;
background-color: #f0f0f0;
}
.right {
flex: 1;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
input[type="email"], input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
box-sizing: border-box;
border: none;
border-bottom: 1px solid #ccc;
font-family: "楷体";
font-size: 16px;
}
input[type="submit"], button {
padding: 10px 20px;
border: none;
background-color: #007bff;
color: #fff;
font-family: "楷体";
font-size: 16px;
cursor: pointer;
}
input[type="submit"]:hover, button:hover {
background-color: #0056b3;
}
input[type="submit"]:disabled, button:disabled {
background-color: #d9d9d9;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right">
<form>
<input type="email" id="email" name="email" placeholder="输入接收验证码的邮箱">
<button id="get-code">获取验证码</button>
<input type="text" id="code" name="code" placeholder="输入验证码">
<input type="submit" id="login" value="登录">
</form>
</div>
</div>
<script>
var getCodeBtn = document.getElementById('get-code');
var countdown = 60;
var timer = null;
function countDown() {
getCodeBtn.disabled = true;
getCodeBtn.innerText = countdown + '秒后再试';
countdown--;
if (countdown < 0) {
clearInterval(timer);
getCodeBtn.disabled = false;
getCodeBtn.innerText = '获取验证码';
}
}
getCodeBtn.onclick = function() {
// 发送AJAX请求获取验证码
var email = document.getElementById('email').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/admin/');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 成功获取验证码，开始倒计时
timer = setInterval(countDown, 1000);
} else {
// 获取验证码失败
alert('获取验证码失败，请重试');
}
}
};
xhr.send('email=' + encodeURIComponent(email));
};
document.getElementById('login').onclick = function() {
// 发送AJAX请求验证验证码并登录
var code = document.getElementById('code').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/response/');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 登录成功，跳转到目标页面
window.location.href = 'https://www.spacexs.cn';
} else {
// 登录失败
alert('验证码错误，请重新输入');
}
}
};
xhr.send('code=' + encodeURIComponent(code));
};
</script>
</body>
</html>
```
您可以将上述代码保存为一个HTML文件，然后在浏览器中打开来查看效果。需要注意的是，因为我们使用了AJAX发送请求，所以在本地预览时可能会出现跨域问题，建议将代码部署到服务器上进行测试。
相关推荐
最新推荐
解决Android软键盘弹出覆盖h5页面输入框问题
在h5页面中，Flex布局可以使页面布局更加灵活和适应性强。但是，Flex布局也可能会对软键盘弹出产生影响。在本例中，Flex布局使输入框位于可视区底部，使得软键盘弹出时无法上移到可视区内。 知识点三：解决软键盘弹...
HTML+CSS实现动态背景登录页面
【HTML+CSS实现动态背景登录页面】\n\n在网页设计中，创建一个吸引人的登录页面至关重要，尤其是当背景能够动态变化时，可以极大地提升用户体验。本篇文章将深入探讨如何利用HTML和CSS技术来实现这样一个功能丰富的...
微信小程序框架的页面布局代码
在本文中，我们将深入探讨微信小程序框架的页面布局代码，这是一个重要的知识点，对于那些想要开发微信小程序的开发者来说尤其有用。微信小程序提供了一个类似Web开发的环境，但它有自己的语法和规则，这使得它在...
django之从html页面表单获取输入的数据实例
首先，我们需要创建一个HTML表单。在`login.html`文件中，我们定义了一个简单的登录表单，包含两个输入字段：用户名（name）和密码（pwd），以及一个提交按钮。表单的`method`属性设置为`post`，表示我们将使用HTTP...
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
本篇文章提供了一个Layer弹出框中子层给父层页面元素赋值的实例，展示了Layer弹出框的基本使用、父层页面和子层页面的数据传递、隐藏输入框的使用、Window对象的使用、Layer弹出框的关闭、Controller方法的使用和...
多传感器数据融合手册：国外原版技术指南
"Handbook of Multisensor Data Fusion" 是一本由CRC Press LLC出版的国外原版书籍，专注于多传感器数据融合领域。这本书包含了26个章节，全面覆盖了数据融合中的关键议题，如数据关联、目标跟踪、识别以及预处理等。
在数据融合领域，多传感器技术是至关重要的，它涉及多个传感器的协同工作，通过整合来自不同来源的数据来提高信息的准确性和完整性。数据融合不仅仅是简单地将不同传感器收集的信息叠加，而是要进行复杂的处理和分析，以消除噪声，解决不确定性，并提供更可靠的决策依据。这本书深入探讨了这个过程，涵盖了从基础理论到实际应用的各个方面。
数据关联是其中的一个关键主题，它涉及到如何将来自不同传感器的测量值对应到同一个实体上，这对于目标跟踪至关重要。目标跟踪则是监控特定物体或事件在时间序列中的位置和状态，需要处理诸如传感器漂移、目标遮挡和多目标混淆等问题。数据融合在这里的作用是提高跟踪的精度和鲁棒性。
识别部分可能涉及模式识别和分类技术，用于确定传感器数据所代表的对象或事件的身份。预处理步骤则通常包括数据清洗、校准、滤波和标准化等，目的是确保输入数据的质量，以便后续的融合算法能有效地处理。
书中的内容来源于权威且备受尊重的源，并引用了相关材料，列出了多种参考文献。尽管作者和出版商已尽力提供可靠的数据和信息，但他们不对所有材料的准确性和使用后果承担责任。此外，书籍版权受到严格保护，未经许可不得复制或传播，若要进行内部或个人使用，需获得CRC Press LLC的书面许可并支付相应的费用。
"Handbook of Multisensor Data Fusion" 是一份全面且深入的参考资料，对于想要了解和研究多传感器数据融合技术的读者来说，具有极高的价值。无论是学术研究还是实际工程应用，都能从中获取丰富的知识和指导。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
【元编程】：Python动态创建和修改函数的运行时魔法
# 1. 元编程的基本概念和重要性
在软件开发中，元编程（Metaprogramming）是指编写可以操作其他程序代码的代码。它允许程序在运行时生成、修改或者执行代码，这意味着你可以创建一个可以编写或者操作其他代码的系统。元编程的概念对于理解程序如何执行以及如何让程序更有效率和可维护至关重要。在这一章中，我们将简要概述元编程的基础知识，包括它的基本定义、历史背景以及在现代软件工程中的
Visual Studio Code中的python如何多行注释
在Visual Studio Code (VSCode) 中，处理 Python 代码的多行注释，你可以按照以下步骤操作：
1. **使用预设快捷键**：
- 转到你要注释的多行文本，按 `Ctrl + Shift + `/ 或 `Cmd + Shift + `/（在Mac上）。这将添加三行开始于 `'''` 的多行字符串注释（三个单引号）。
2. **选择注释风格**：
- 另一种方式是在菜单栏选择 "Edit" -> "Toggle Line Comment", 然后从下拉列表中选择 "Triple Quotes"，这也适用于多行注释。
3. **使用代码片段**：
MyEclipse快捷键大全，提升编程效率
"myeclipse 快捷键"
在编程的世界里，高效的工作离不开快捷键的运用。MyEclipse作为一款强大的Java集成开发环境，拥有众多实用的快捷键，能够极大地提升开发效率。以下是一些常用且重要的MyEclipse快捷键及其功能：
1. Ctrl+Shift+O：自动导入缺失的类，这是非常常用的一个快捷键，可以帮助你快速整理代码中的导入语句。
2. Ctrl+F：全局查找，可以在当前文件或整个项目中查找指定文本。
3. Ctrl+Shift+K：查找下一个匹配项，与Ctrl+K一起使用可以快速在查找结果之间切换。
4. Ctrl+K：查找上一个匹配项，配合Ctrl+Shift+K可以方便地在查找结果间导航。
5. Ctrl+Z：撤销操作，如同“后悔药”，可以撤销最近的一次编辑。
6. Ctrl+C：复制选中的文本或代码，便于快速复制和粘贴。
7. Ctrl+X：剪切选中的文本或代码，与Ctrl+V配合可以实现剪切并粘贴。
8. Ctrl+1：快速修复，当出现错误或警告时，MyEclipse会提供解决方案，按此快捷键可快速应用建议的修复方法。
9. Alt+/：代码完成，自动补全代码，尤其在编写Java代码时非常实用。
10. Ctrl+A：全选当前文件或编辑器的内容。
11. Delete：删除选中的文本或代码，不选择任何内容时，删除光标所在字符。
12. Alt+Shift+?：查看当前方法或类的JavaDoc，了解函数用途和参数说明。
13. Ctrl+Shift+Space：智能提示，提供当前上下文的代码补全建议。
14. F2：跳转到下一个错误或警告，快速定位问题。
15. Alt+Shift+R：重命名，用于修改变量、方法或类名，所有引用都会相应更新。
16. Alt+Shift+L：列出并切换打开的编辑器。
17. Ctrl+Shift+F6：关闭当前编辑器的下一个标签页。
18. Ctrl+Shift+F7：切换到下一个高亮的匹配项。
19. Ctrl+Shift+F8：切换到上一个高亮的匹配项。
20. Ctrl+F6：切换到下一个打开的编辑器。
21. Ctrl+F7：在当前文件中查找下一个匹配项。
22. Ctrl+F8：在当前文件中查找上一个匹配项。
23. Ctrl+W：关闭当前编辑器。
24. Ctrl+F10：运行配置，可以用来启动应用或测试。
25. Alt+-：打开或关闭当前视图。
26. Ctrl+F3：在当前工作空间中搜索所选内容。
27. Ctrl+Shift+T：打开类型，可以快速查找并打开类文件。
28. F4：打开资源，显示所选资源的详细信息。
29. Shift+F2：跳转到上一次的位置，方便在代码间快速切换。
30. Ctrl+Shift+R：打开资源，全局搜索文件。
31. Ctrl+Shift+H：类型层次结构，查看类的继承关系。
32. Ctrl+G：查找行，快速定位到指定行号。
33. Ctrl+Shift+G：在工作空间中查找引用，追踪代码引用。
34. Ctrl+L：跳转到指定行号，方便快速定位。
35. Ctrl+Shift+U：切换大小写，对选中的文本进行大小写转换。
36. Ctrl+H：全局搜索，可以搜索整个工作空间中的代码。
37. Ctrl+G：查找字符，快速找到特定字符。
38. Ctrl+Shift+L：显示快捷键列表，随时查看所有可用的快捷键。
39. Ctrl+Shift+J：插入内联注释，方便快速添加临时注释。
40. Ctrl+Shift+M：引入所需导入的包，自动导入缺少的包。
41. Ctrl+Shift+O：优化导入，删除未使用的导入，并自动排序。
42. Ctrl+Shift+F：格式化代码，按照预设的代码风格进行格式化。
43. Ctrl+/：块注释，选中的代码会被注释掉。
44. Ctrl+\：取消块注释，恢复被注释的代码。
45. Ctrl+Shift+M：快速添加try/catch块，简化异常处理。
46. Ctrl+Shift+F4：关闭所有打开的编辑器。
47. Alt+Enter：显示上下文敏感的帮助或修复建议。
48. Ctrl+N：新建，创建新的文件或项目。
49. Ctrl+B：跳转到定义，快速查看变量或方法的定义。
50. Ctrl+Shift+F：格式化代码，与Ctrl+F不同的是，它会格式化整个文件。
51. Ctrl+/：行注释，对当前行进行注释。
52. Ctrl+Shift+/：块注释，选中的多行代码会被注释掉。
53. F7：在调试模式下，步进进入方法。
54. F6：在调试模式下，步过方法，不会进入方法内部。
55. F5：在调试模式下，强制步进进入方法，即使方法是native或者已经被优化。
56. Ctrl：选中多个选项，如在重构或查找替换时。
通过熟练掌握这些MyEclipse快捷键，你可以更加高效地编写和管理代码，提高编程的生产力。记得经常练习和使用，它们将成为你编程生涯中的得力助手。