一，HTML方面
<body>
<div class="name">
<input type="text" placeholder="账号" value="">
</div>
<div class="password">
<input type="password" placeholder="密码" value="">
</div>
<div class="submit">
<button><p>登录</p></button>
</div>
</div>
<!– 外联Js脚本 –>
<script src="XXX"></script>
</body>
二.Javascript方面
// 获取账号和密码的值
const zh = document.querySelector('.name input');
const password = document.querySelector('.password input');
const btn = document.querySelector('.submit button');
// 登录事件
btn.addEventListener('click', function() {
// 检测账号和密码是否正确
const correctUsername = 'XXX'; // 正确的账号
const correctPassword = 'XXX'; // 正确的密码
if (zh.value === correctUsername && password.value === correctPassword) {
// 如果账号和密码正确，存储登录状态
localStorage.setItem('isLoggedIn', 'true');
// 跳转到另一个页面
window.location.href = 'XXX'; // 替换为实际的页面路径
} else {
// 如果账号或密码错误，弹出提示
alert('账号或密码错误，请重新输入！');
}
});
三、解释
1.用户输入的字符串会存储在value中
2.const 变量 = document.querySelector('定位')
3.建立事件监听，当鼠标点击button时，执行下列函数，函数中存在设置过的账号和密码，检测用户输入的账号和密码是否等于设置的账号和密码，如果两者相等，则跳转到下一页面；如果两者不相等，则弹出弹窗说明账号和密码错误，请重新输入！
