html利用JS实现账号暗码登录的简单案例

万万哇 · 6 天前

目次
案例需求
思路
错误案例及题目
修改思路
案例提供

所须要的组件
<input>标签，<button>标签，<script>标签
详情利用参考：HTML 教程 | 菜鸟教程
案例需求

编写一个程序，最多答应用户实验登录 3 次。
每次提示输入用户名和暗码（假设精确用户名为 `"admin"`，暗码为 `"123456"`），
如果输入错误凌驾 3 次则锁定账户。
思路

利用button按钮实现点击事件获取输入框获取的值举行条件判定是否满足登录要求实现登录功能
错误案例及题目

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
账户名：<input type="text" id="username">
密码：<input type="password" id="password">
<button onclick="login()">登录</button>
<p id="output"></p>
</div>
<script>
// let count = 0;
function login() {
let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
for(let i = 0; i<3;i++){
if(username === 'admin' && password === '123456'){
document.getElementById('output').textContent = '登录成功';
console.log(i)
break;
}else{
document.getElementById('output').textContent = '登录失败，请重新输入（剩余尝试次数：' + (3 - i) + '）';
}
if (i === 2){
document.getElementById('output').textContent = '密码错误已达3次，账户已锁定';
}
}
}
</script>
</body>
</html>

复制代码

应该有人像我一样看到案例需求的第一眼就会这么写，然后开始第一次运行
输入精确的，出现

等到输入错误的值的时间

不对，明明我只提交了一次，错误的话应该是输出重新输入，还剩余一次的的提示啊，为什么会直接进入第三次的锁定，导致想不明白。
为了一探究竟我们须要打印i的值来确定题目地点
于是将代码修改成如下图这样

<script>
// let count = 0;
function login() {
let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
for(let i = 0; i<3;i++){
console.log(i)
if(username === 'admin' && password === '123456'){
document.getElementById('output').textContent = '登录成功';
console.log(i)
break;
}else{
document.getElementById('output').textContent = '登录失败，请重新输入（剩余尝试次数：' + (3 - i) + '）';
console.log(i)
}
if (i === 2){
document.getElementById('output').textContent = '密码错误已达3次，账户已锁定';
}
console.log(i)
}
}
</script>

复制代码

运行提交

会清楚发现打印了多次重复结果。
原因是因为for()的循环体，当条件不满足包含break语句的if判定语句的时间，全部循环体都会实行，就导致了会直接运行到最后的结果，其实会提示重新输入的语句这一提示的，但是由于计算机的计算速度很快，会直接到最后的结果举行直接覆盖
JavaScript 的实行机制是事件驱动 + 单线程的，它遵照如下逻辑：

用户点击按钮，触发 login() 函数；
欣赏器立即实行 login() 中的全部代码，包罗 for 循环；
循环内的全部迭代都会在一次点击中完成，不会等待用户再次输入；
因此，纵然你盼望“每次点击只验证一次”，但循环的存在会导致“单次点击验证多次

JavaScript 中的事件处置惩罚函数（如 onclick）是同步实行的，不会停息等待用户交互；如果想实现“多次实验”，应该依靠外部状态变量（如 attemptCount）而不是循环体；
修改思路

知道了题目地点就给我们提供了修改思路
举行单次提交举行累加次数计算，也就是不利用循环体，举行条件判定
案例代码提供

<script>
let count = 0;
function login() {
let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
if (count >= 3) {
document.getElementById('output').textContent = '账户已锁定，无法继续尝试';
return;
}
if (username === 'admin' && password === '123456') {
document.getElementById('output').textContent = '登录成功';
} else {
count++;
}
if (count === 3) {
document.getElementById('output').textContent = '密码错误已达3次，账户已锁定';
} else {
document.getElementById('output').textContent = '登录失败，请重新输入（剩余尝试次数：' + (3 - count) + '）';
}
}
</script>

复制代码

运行结果：

到这里也就完成了该案例了。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

html利用JS实现账号暗码登录的简单案例

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块