web前端开发 登录用户名和密码成功之后跳转网页 并且还包含自动登录的相关代码
时间: 2023-09-08 14:12:23 浏览: 34
好的,针对您的问题,我可以给出以下示例代码:
HTML部分:
```html
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录" onclick="return login();">
</form>
```
JavaScript部分:
```javascript
function login() {
// 获取用户名和密码
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 发送登录请求
// 注意:以下为示例代码,实际应用中请使用 AJAX 等方式发送请求
if (username === "admin" && password === "123456") {
// 登录成功,设置自动登录
setCookie("username", username, 7); // 设置有效期为7天
setCookie("password", password, 7);
// 跳转到首页
window.location.href = "index.html";
return true;
} else {
alert("用户名或密码错误!");
return false;
}
}
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
```
以上代码实现了以下功能:
- 用户输入用户名和密码后点击登录按钮,会发送登录请求;
- 如果用户名和密码正确,则设置自动登录(使用 cookie 实现),并跳转到首页;
- 如果用户名或密码错误,则弹出提示框,不跳转。
注意:以上代码仅为示例代码,实际应用中需要根据具体情况进行修改和完善。