登录界面代码和跳转页代码
时间: 2023-12-07 12:03:24 浏览: 42
以下是一个简单的登录界面和跳转页面的代码示例,使用 HTML,CSS和JavaScript编写:
登录界面:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
input {
margin-bottom: 20px;
padding: 10px;
border-radius: 5px;
border: none;
box-shadow: 0px 0px 5px lightgray;
font-size: 16px;
}
button {
padding: 10px 20px;
border-radius: 5px;
border: none;
background-color: #0077cc;
color: white;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Login Page</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
<button type="submit">Login</button>
</form>
</body>
</html>
```
跳转页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
</head>
<body>
<h1>Welcome, USERNAME!</h1>
<p>You have successfully logged in.</p>
</body>
<script>
// 获取 URL 中的 username 参数
const urlParams = new URLSearchParams(window.location.search);
const username = urlParams.get("username");
// 将 username 作为参数传递给页面标题和欢迎消息
const title = document.querySelector("title");
title.textContent = `Welcome, ${username}!`;
const h1 = document.querySelector("h1");
h1.textContent = `Welcome, ${username}!`;
</script>
</html>
```
在此示例中,登录页面使用表单来收集用户名和密码。当用户单击“登录”按钮时,表单将提交并跳转到欢迎页面。欢迎页面使用 JavaScript 获取 URL 中的用户名参数,并将其用于欢迎消息和页面标题中。