<!DOCTYPE html> <html> <head> <title>登录界面</title> <meta charset="utf-8" /> <title></title> </head> <style> input[type="text"], input[type="password"] { display: block; width: 5%; padding: 10px; margin-bottom: 20px; border-radius: 5px; border: 1px solid #ccc; font-size: 1.2em; } body{ background: url(image/java.jpg) top left; width: 10240px; height: 5120px; background-attachment: fixed; background-repeat: no-repeat; background-size: 100%; } 00 input[type="submit"] { background-color: Transparent; color: #abc1ee; padding: 10px 20px; border-radius: 5px; border: none; font-size: 1.2em; cursor: pointer; } a { text-decoration-line: none; color: #abc1ee; } </style> <body> <div id="div-title"> <h3>Welcome to Login</h3> </div> <div class="container"> <div class="header">Login</div> <div class="form-wrapper"> <input type="text" name="username" placeholder="username" id="username"> <input type="password" name="password" placeholder="password" id="password"> <input type="submit" value="Login" onclick="validate()"> </div> <div class="msg"> Don't have account? <a href="#">Sign up</a> </div> </div> <script> // 定义全局变量 var usernameInput = document.getElementById("username"); var passwordInput = document.getElementById("password"); var errorCount = 0; function validate() { // 定义局部变量 var username = usernameInput.value; var password = passwordInput.value; // switch...case语句 switch (username) { case "": alert("用户名不能为空"); errorCount++; break; case "admin": if (password === "admin") { alert("登录成功"); } else { alert("密码错误"); errorCount++; } break; default: alert("用户名不存在"); errorCount++; break; } // for...in语句 for (var i in username) { if (username[i] === " ") { alert("用户名不能包含空格"); errorCount++; break; } } // if语句 if (password === "") { alert("密码不能为空"); errorCount++; } // 调用函数 displayError(); if (errorCount >= 3) { alert("错误次数过多,请稍后再试"); window.location.reload(); } } function displayError() { // 获取元素 var container = document.querySelector(".container"); // 创建元素节点 var errorDiv = document.createElement("div"); errorDiv.innerHTML = "输入有误,请重新输入"; errorDiv.style.color = "red"; // 对子节点的操作 container.appendChild(errorDiv); setTimeout(function() { container.removeChild(errorDiv); }, 3000); } </script> </body> </html>优化这个界面
时间: 2024-04-27 21:23:50 浏览: 7
首先,这个界面的背景图像非常大,会使页面加载速度变慢,建议将其压缩或者换成分辨率较小的图片,另外,可以使用CSS的background-size属性来控制背景图像的大小。
其次,输入框的宽度设置为5%很小,建议将其调整为适当的宽度,使得用户可以更方便地输入。另外,可以为输入框添加一些提示文本,让用户更清楚地知道需要输入的内容。
再次,登录按钮的样式不太美观,可以将其调整为更漂亮的样式,比如改变颜色、添加阴影等等。
最后,错误提示信息可以优化,可以将其显示在输入框下方,而不是弹出一个alert框。同时,可以将错误信息的颜色改为红色,以便用户更容易注意到。
相关问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 绿叶学习网; </body> </html>哪里错了
根据你提供的代码,我发现以下几个问题:
1. 缺少`<!DOCTYPE html>`声明,这个声明告诉浏览器使用哪个HTML版本来解析页面。
2. 缺少`<title>`标签,这个标签用于定义网页的标题,显示在浏览器的标题栏或标签页上。
3. 缺少`<body>`标签内的内容,这个标签用于定义网页的主体内容,可以在其中添加文本、图片、链接等元素。
修正后的代码如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绿叶学习网</title>
</head>
<body>
绿叶学习网
</body>
</html>
```
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Not found</title> </head> <body> <h1>Not found</h1> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Not found</title> </head> <body> <h1>Not found</h1> </body> </html>是一个HTML页面模板,它是一个简单的404页面,用于显示“Not found”错误信息。在这个模板中,<!DOCTYPE html>定义了文档类型,<html>标签定义了HTML文档的根元素,<head>标签定义了文档的头部部分,<meta charset="UTF-8">指定了文档的字符编码为UTF-8,<title>标签定义了文档的标题,<body>标签定义了文档的主体部分,<h1>标签定义了一个一级标题。