首页js实现让用户属于用户名和密码，输入正确才可以进入，用户有三次机会！

js实现让用户属于用户名和密码，输入正确才可以进入，用户有三次机会！

时间: 2024-09-25 10:13:42 浏览: 102

在JavaScript中，你可以创建一个简单的登录表单来实现这个功能。下面是一个基本的例子，使用HTML和JavaScript结合完成： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Login</title> </head> <body> <h2>Login</h2> <form id="loginForm"> <label for="username">Username:</label><br> <input type="text" id="username" name="username" required><br> <label for="password">Password:</label><br> <input type="password" id="password" name="password" required><br> <button type="submit">Login</button> </form> <script> let loginAttempts = 3; document.getElementById('loginForm').addEventListener('submit', function(e) { e.preventDefault(); // 阻止表单默认提交行为 const usernameInput = document.getElementById('username'); const passwordInput = document.getElementById('password'); const correctUsername = 'admin'; // 替换为你设定的正确用户名 const correctPassword = '123456'; // 替换为你设定的正确密码 if (usernameInput.value !== correctUsername || passwordInput.value !== correctPassword) { if (loginAttempts > 0) { alert('Incorrect username or password! You have ' + (loginAttempts - 1) + ' attempts left.'); loginAttempts--; } else { alert('Too many failed attempts. Please try again later.'); } } else { alert('Login successful!'); location.reload(); // 也可以跳转到其他页面 } }); </script> </body> </html> ``` 在这个例子中，用户输入正确的用户名和密码才会显示登录成功提示，错误则会弹出警告，并减少尝试次数。如果尝试达到三次仍不正确，则锁定账户，提示用户稍后再试。

阅读全文