帮我用html,css,javascript写一个登录页面,登录后是下载页面,并且我需要完整的代码
时间: 2023-09-08 07:05:15 浏览: 61
### 回答1:
好的,下面是使用 HTML,CSS 和 JavaScript 构建登录页面和下载页面的代码。
登录页面 HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label for="username">用户名</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码</label>
<input type="password" id="password" name="password">
<br>
<input type="button" value="登录" onclick="login()">
</form>
<script src="script.js"></script>
</body>
</html>
```
登录页面 CSS 代码:
```
form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 300px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="button"] {
width: 100%;
background-color: #4caf50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="button"]:hover {
background-color: #45a049;
}
```
登录页面 JavaScript 代码:
```
function login() {
// 获取用户名和密码
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 检查用户名和密码是否正确
if (username === 'admin' && password === '123456') {
// 用户名和密码正确,跳转到下载页面
window.location.href = 'download.html';
} else {
// 用
### 回答2:
下面是一个简单的用HTML、CSS和JavaScript编写的登录页面和下载页面的示例代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="login-form">
<h2>登录</h2>
<input type="text" id="username" placeholder="用户名">
<input type="password" id="password" placeholder="密码">
<button onclick="login()">登录</button>
</div>
<div id="download-page" style="display: none;">
<h2>下载页面</h2>
<p>欢迎!您已成功登录。</p>
<a href="download.zip">下载文件</a>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码(style.css):
```css
body {
font-family: Arial, sans-serif;
}
#login-form {
text-align: center;
margin: 100px auto;
}
#login-form h2 {
margin-bottom: 20px;
}
#login-form input {
margin-bottom: 10px;
padding: 5px;
width: 200px;
}
#download-page {
text-align: center;
margin: 100px auto;
}
```
JavaScript代码(script.js):
```javascript
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 在这里可以添加登录验证的逻辑
if (username === "admin" && password === "password") {
document.getElementById("login-form").style.display = "none";
document.getElementById("download-page").style.display = "block";
} else {
alert("用户名或密码错误!");
}
}
```
这个示例中,登录页面中有一个用户名和密码输入框以及一个登录按钮。当用户点击登录按钮时,调用`login()`函数进行登录验证。如果用户名和密码正确(这里以用户名为"admin",密码为"password"为例),则隐藏登录页面,并显示下载页面,下载页面中显示“欢迎!您已成功登录。”文字和一个下载文件的链接。如果用户名或密码错误,则弹出提示框显示错误信息。
相关推荐
![](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)
![](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)
![](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)
![](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)
![](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)