当前位置： 首页 > article >正文

html使用JS实现账号密码登录的简单案例

article 2025/6/6 1:59:50

目录

案例需求

思路

错误案例及问题

修改思路

案例提供

所需要的组件

<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 的执行机制是事件驱动 + 单线程的，它遵循如下逻辑：

  1. 用户点击按钮，触发 login() 函数；
  2. 浏览器立即执行 login() 中的所有代码，包括 for 循环；
  3. 循环内的所有迭代都会在一次点击中完成，不会等待用户再次输入；
  4. 因此，即使你希望“每次点击只验证一次”，但循环的存在会导致“单次点击验证多次

 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>

运行结果：

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

相关文章：

html使用JS实现账号密码登录的简单案例

目录 案例需求 思路 错误案例及问题 修改思路 案例提供 所需要的组件 <input>标签&#xff0c;<button>标签&#xff0c;<script>标签 详情使用参考&#xff1a;HTML 教程 | 菜鸟教程 案例需求 编写一个程序&#xff0c;最多允许用户尝试登录 3 次。…...

编程日记 2025/5/31 18:10:59

sorted() 函数和sort()函数的区别

在Python中&#xff0c;sorted() 函数和列表的 sort() 方法都用于排序&#xff0c;但它们之间有一些关键的区别&#xff1a; 返回值&#xff1a; sorted()&#xff1a;返回一个新的列表&#xff0c;包含所有排序后的元素&#xff0c;原始列表不会被修改。sort()&#xff1a;对列…...

编程日记 2025/6/4 22:47:58

Solr搜索：比传统数据库强在哪？

Solr 是一个基于 Apache Lucene 的开源搜索平台&#xff0c;广泛用于全文检索和数据分析。与传统的关系型数据库查询相比&#xff0c;Solr 在某些方面具有明显的优势&#xff0c;特别是在处理大规模文本数据和复杂的搜索需求时。以下是 Solr 相对于传统数据库查询的主要优势&am…...

编程日记 2025/6/4 7:00:49

【数据集】基于ubESTARFM法的100m 地温LST数据集（澳大利亚）

目录 数据概述一、输入数据与处理二、融合算法1. ESTARFM（Enhanced STARFM）2. ubESTARFM（Unbiased ESTARFM）代码实现数据下载参考根据论文《Generating daily 100 m resolution land surface temperature estimates continentally using an unbiased spatiotemporal fusion…...

编程日记 2025/6/2 11:30:31

51c自动驾驶~合集55

我自己的原文哦~ https://blog.51cto.com/whaosoft/13935858 #Challenger 端到端碰撞率暴增&#xff01;清华&吉利,框架&#xff1a;低成本自动生成复杂对抗性驾驶场景~ 自动驾驶系统在对抗性场景&#xff08;Adversarial Scenarios&#xff09;中的可靠性是安全落…...

编程日记 2025/5/31 20:26:07

【前端基础】Promise 详解

文章目录 什么是 Promise&#xff1f;为什么要使用 Promise&#xff1f;创建 Promise消费 Promise (使用 Promise)1. .then(onFulfilled, onRejected)2. .catch(onRejected)3. .finally(onFinally) Promise 链 (Promise Chaining)Promise 的静态方法1. Promise.resolve(value)2…...

编程日记 2025/6/4 13:37:33

高性能管线式HTTP请求

高性能管线式HTTP请求：原理、实现与实践 目录 高性能管线式HTTP请求：原理、实现与实践 1. HTTP管线化的原理与优势 1.1 HTTP管线化的基本概念 关键特性： 1.2 管线化的优势 1.3 管线化的挑战 2. 高性能管线式HTTP请求的实现方案 2.1 技术选型与工具 2.2 Java实现：…...

编程日记 2025/6/1 6:06:37

c/c++的opencv膨胀

使用 OpenCV (C) 进行图像膨胀操作详解 图像膨胀 (Dilation) 是形态学图像处理中的另一种基本操作&#xff0c;与腐蚀操作相对应。它通常用于填充图像中的小孔洞、连接断开的物体部分、以及加粗二值图像中的物体。本文将详细介绍膨胀的原理&#xff0c;并演示如何使用 C 和 Op…...

编程日记 2025/5/29 10:53:53

react native搭建项目

React Native 项目搭建指南 React Native 是一个使用 JavaScript 和 React 构建跨平台移动应用的框架。以下是搭建 React Native 项目的详细步骤&#xff1a; 1. 环境准备 安装 Node.js 下载并安装 Node.js (推荐 LTS 版本) 安装 Java Development Kit (JDK) 对于 Androi…...

编程日记 2025/5/31 2:16:00

【CSS】九宫格布局

CSS Grid布局&#xff08;推荐&#xff09; 实现代码&#xff1a; <!doctype html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0"…...

编程日记 2025/5/31 1:16:58

Python用Transformer、Prophet、RNN、LSTM、SARIMAX时间序列预测分析用电量、销售、交通事故数据

原文链接&#xff1a; tecdat.cn/?p42219 在数据驱动决策的时代&#xff0c;时间序列预测作为揭示数据时序规律的核心技术&#xff0c;已成为各行业解决预测需求的关键工具。从能源消耗趋势分析到公共安全事件预测&#xff0c;不同领域的数据特征对预测模型的适应性提出了差异…...

编程日记 2025/5/31 20:21:05

java基础(面向对象进阶高级)泛型(API一)

认识泛型 泛型就等于一个标签(比如男厕所和女厕) 泛型类 只能加字符串&#xff1a; 把别人写好的东西&#xff0c;自己封装。 泛型接口 泛型方法、泛型通配符、上下限 怎么解决下面的问题&#xff1f; API object类 toString: equals: objects类 包装类 为什么上面的Integer爆红…...

编程日记 2025/5/31 13:51:23

学习心得（17--18）Flask表单

一. 认识表单&#xff1a;定义表单类 password2中末端的EqualTo&#xff08;password&#xff09;是将密码2与密码1进行验证&#xff0c;看是否相同 二.使用表单&#xff1a; 运行 如果遇到这个报错&#xff0c;就在该页面去添加 下面是举例&#xff1a; 这就是在前端的展示效…...

编程日记 2025/5/31 21:39:16

AI测试和敏捷测试有什么联系与区别？

AI测试与敏捷测试作为软件质量保障领域的两种重要方法&#xff0c;既有紧密联系也存在显著区别。以下是两者的联系与区别分析&#xff1a; 一、联系 共同目标&#xff1a;提升测试效率与质量 敏捷测试强调通过快速迭代、持续反馈和团队协作确保交付价值&#xff0c;而AI测试通…...

编程日记 2025/6/4 21:29:19

微信小程序进阶第2篇__事件类型_冒泡_非冒泡

在小程序中&#xff0c; 事件分为两种类型&#xff1a; 冒泡事件&#xff0c; 当一个组件上的事件被触发后&#xff0c;该事件会向父节点传递非冒泡事件&#xff0c; 当一个组件上的事件被触发后&#xff0c; 该事件不会向父节点传递。 一 冒泡事件 tap&#xff0c; touchst…...

编程日记 2025/5/31 10:10:17

电机控制学习笔记

文章目录 前言一、电机二、编码器三、开环控制和闭环控制总结 前言 学习了解电机控制技术的一些原理和使用的方法。 一、电机 直流有刷电机 操作简单 使用H桥驱动直流有刷电机 直流有刷电机驱动板 电压检测 电流检测以及温度检测 直流无刷电机 使用方波或者正弦波进行换向…...

编程日记 2025/6/2 7:38:38

什么是前端工程化？它有什么意义

前端工程化是指通过工具、流程和规范，将前端开发从手工化、碎片化的模式转变为系统化、自动化和标准化的生产过程。其核心目标是 提升开发效率、保障代码质量、增强项目可维护性，并适应现代复杂 Web 应用的需求。 一、前端工程化的核心内容 1. 模块化开发 代码模块化：使用 …...

编程日记 2025/5/31 16:05:15

企业网站架构部署与优化-Nginx性能调优与深度监控

目录 #1.1Nginx性能调优 1.1.1更改进程数与连接数 1.1.2静态缓存功能设置 1.1.3设置连接超时 1.1.4日志切割 1.1.5配置网页压缩 #2.1nginx的深度监控 2.1.1GoAccess简介 2.1.2nginx vts简介 1.1Nginx性能调优 1.1.1更改进程数与连接数 &#xff08;1&#xff09;进程数 进程数…...

编程日记 2025/6/2 8:44:23

行列式的线性性质（仅限于单一行的加法拆分）

当然可以&#xff0c;以下是经过排版优化后的内容&#xff0c;保持了原始内容不变&#xff0c;仅调整了格式以提升可读性&#xff1a; 行列式的线性性质&#xff08;加法拆分&#xff09; 这个性质说的是&#xff1a;如果行列式的某一行&#xff08;或某一列&#xff09;的所有…...

编程日记 2025/6/2 5:42:19

JAVA基础编程练习题--50道

一&#xff1a;循环结构 1.1 for循环 水鲜花数 &#xff08;1&#xff09;题目 &#xff08;2&#xff09;难点 如何获取三位数的个位数 如何计算一个数的立方 判断两数值是否相等 &#xff08;3&#xff09;代码 最大公约数 &#xff08;1&#xff09;题目 &#xff08;2&…...

编程日记 2025/6/5 2:15:30

leetcode 93. Restore IP Addresses

题目描述 93. Restore IP Addresses 代码 回溯法 class Solution {vector<string> res; public:vector<string> restoreIpAddresses(string s) {string IP;int part 0;backtracking(s,0,IP,part);return res;}void backtracking(const string &s,int start…...

编程日记 2025/6/4 7:26:19

【东枫科技】基于Docker，Nodejs，GitSite构建一个KB站点

Docker 安装桌面版本&#xff0c;安装Node镜像 运行node镜像 需求 和外部的某个文件夹地址可以绑定端口可以绑定&#xff0c;方便server的访问 docker run -itd --name node-test -v C:/Users/fs/Documents/GitHub:/home/node -p 3000:3000 node进入终端 docker exec -it …...

编程日记 2025/6/2 17:42:40

pytest+allure+allure-pytest 报告输出遇到的问题汇总

文章目录 前言问题一&#xff1a;module allure has no attribute severity_level问题二&#xff1a;ERROR:file or directory not found: ‐vs问题三&#xff1a;生成的 html 报告是空的&#xff0c;明明有测试用例执行完成&#xff0c;但报告没有显示数据 前言 pytestallure…...

编程日记 2025/6/3 18:34:44

Python基础语法(十四)：Python常用内置模块及功能

Python标准库提供了丰富的内置模块&#xff0c;无需额外安装即可使用。以下是按功能分类的常用内置模块及其核心功能&#xff1a; 一、文件与操作系统交互 1. os 模块 功能&#xff1a;操作系统接口常用方法&#xff1a;os.getcwd() # 获取当前工作目录 os.listdir() …...

编程日记 2025/6/3 4:32:57

【Opencv+Yolo】_Day1图像基本处理

目录 一、计算机中的视觉&#xff1a; 二、Opencv基本操作&#xff1a; 图片基础处理&#xff1a; 视频基本处理&#xff1a; 图像截取&#xff08;截取&#xff0c;合并&#xff0c;只保留一个元素&#xff09; 图像填充 数值计算 图像融合 阈值判断 图像平滑 图像腐…...

编程日记 2025/6/4 10:19:04

MySQL各种日志类型介绍

概述 MySQL 提供了多种日志类型&#xff0c;用于记录数据库的运行状态、操作历史和错误信息等&#xff0c;这些日志对于故障排查、性能优化、安全审计和数据恢复等具有重要作用。以下是 MySQL 中常见的日志类型及其详细介绍资料已经分类整理好&#xff1a;https://pan.quark.c…...

编程日记 2025/5/30 15:47:48

15.2【基础项目】使用 TypeScript 实现密码显示与隐藏功能

在现代 Web 应用中&#xff0c;允许用户切换密码的可见性不仅提升了用户体验&#xff0c;也让表单填写更便捷。使用 TypeScript 来实现这个功能&#xff0c;不仅具备强类型检查优势&#xff0c;还能提升代码的可维护性。 ✨ 我们要实现的功能 在这篇文章中&#xff0c;我们将…...

编程日记 2025/5/31 12:18:08

Django压缩包形式下载文件

通过web将minio上的文件以压缩包-文件夹-文件的形式下载到本地 import os from bx_mes import settings from io import BytesIO import zipfile from django.http import StreamingHttpResponse class FileRemote(GenericAPIView):def post(self,request):# 压缩包名folder_n…...

编程日记 2025/6/2 6:52:37

晚期NSCLC临床试验终点与分析策略

1. 案例背景 1.1 研究设计 1.1.1 适应症与分组 晚期非小细胞肺癌一线治疗，干预组为新型免疫检查点抑制剂联合化疗，对照组为化疗单药，随机双盲安慰剂对照III期试验。 1.1.2 目标框架 基于FDA或ICH指南，终点定义和分析策略影响试验科学性及监管审评。 2. 终点定义 2.1 主要…...

编程日记 2025/5/31 2:17:00

从比分滚动到数据革命：体育数据如何重构我们的观赛体验？

当凌晨三点的欧冠决赛与闹钟冲突时&#xff0c;当世界杯小组赛因时差难以全程跟进时&#xff0c;当代体育迷早已不再依赖电视直播 —— 打开手机里的比分网&#xff0c;实时跳动的体育大数据正构建着全新的观赛宇宙。这些曾经被视为 "辅助工具" 的平台&#xff0c;如…...

编程日记 2025/6/2 7:50:13