window.location.href传输变量
时间: 2023-07-05 19:35:01 浏览: 132
可以使用URL参数来传递变量,例如:
```
window.location.href = "https://example.com/page.html?variable1=value1&variable2=value2";
```
在上面的例子中,我们将变量1和变量2分别设置为value1和value2,并将它们作为URL参数传递给页面page.html。在页面中,可以使用JavaScript来获取这些变量的值,例如:
```
const urlParams = new URLSearchParams(window.location.search);
const variable1 = urlParams.get('variable1');
const variable2 = urlParams.get('variable2');
console.log(variable1); // 输出 "value1"
console.log(variable2); // 输出 "value2"
```
在这里,我们使用了URLSearchParams对象来解析URL参数,并使用get()方法获取每个变量的值。
相关问题
<!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>优化这个界面
1. 缩小背景图片的尺寸,或者使用压缩后的图片,避免页面加载过慢;
2. 调整输入框和按钮的大小和位置,使其更美观和易用;
3. 增加表单验证,例如检查密码强度、检查用户名是否已存在等;
4. 增加记住密码功能,方便用户下次登录;
5. 添加“忘记密码”链接,方便用户找回密码;
6. 使用 HTTPS 协议加密传输,保护用户数据安全;
7. 优化代码,避免使用全局变量和过于复杂的逻辑,提高代码可读性和可维护性。
阅读全文