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

while do..while验证用户名和密码-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业)

news 2026/5/13 2:57:55

【案例2-8】while do..while验证用户名和密码

一、案例描述

  1. 考核知识点

while、do…while循环语句

  1. 练习目标
  • 掌握while语句。
  • do…while循环语句。
  1. 需求分析

在网站上登录时会用到表单，让用户属于用户名和密码，输入正确才可以进入，本案例将采用while do..while两种循环方式来进行用户名和密码的验证。

  1. 案例分析
  1. 打开页面时，效果如图2-11所示。

  1. 输入用户名展示

  1. 输入密码效果展示

如果输入的信息正确，则弹出如图2-13所示提示。

  1. 提示登录成功

如果输入的信息不正确，则弹出如图2-14所示提示。

  1. 提示登录失败

  1. 具体实现步骤如下：
  1. 用户输入用户名。
  2. 用户输入密码。
  3. 输入的内容，如果符合语句中的条件则提示“登录成功”，不符合时提示“用户名或者密码有误”，让你一直输入用户名和密码，直到输入正确为止。

二、案例实现

1、while循环方式实现

根据上面的分析，可以通过简单的JavaScript代码来实现这一效果，具体代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>验证用户名和密码</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         // 输入用户名和密码，如果正确，给出弹出框提示"登录成功"，如果不对，一直输入:while
  10.         /* 第一种方式 while*/
  11.         var userName = prompt("请输入用户名");
  12.         var passWord = prompt("请输入密码");
  13.         while( userName!="admin" || passWord!="123456" ){
  14.            alert("用户名或者密码有误");
  15.            userName = prompt("请输入用户名");
  16.            passWord = prompt("请输入密码");
  17.         }
  18.         alert("登录成功");
  19.     </script>
  20. </body>
  21. </html>

2、do…while循环方式实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>验证用户名和密码</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         // 输入用户名和密码，如果正确，给出弹出框提示"登录成功"，如果不对，一直输入
  10.         /* 第二种方式 do...while
  11.         do {
  12.             // alert("用户名或者密码有误");
  13.             var userName = prompt("请输入用户名");
  14.             var passWord = prompt("请输入密码");
  15.         }while(userName!="admin"||passWord!="123456")
  16.         alert("登录成功");*/
  17.     </script>
  18. </body>
  19. </html>

相关文章：

while do..while验证用户名和密码-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业)

【案例2-8】while do..while验证用户名和密码 一、案例描述 考核知识点 while、do…while循环语句 练习目标 掌握while语句。do…while循环语句。 需求分析 在网站上登录时会用到表单&#xff0c;让用户属于用户名和密码&#xff0c;输入正确才可以进入&#xff0c;本案例将…...

编程日记 2023/3/31 2:25:48

tmux常用操作指令

创建会话tmux new -s 会话名 恢复会话tmux at -t 会话名 tmux attach -t 会话名 杀死会话tmux kill-session -t 编号 tmux kill-session -t 会话名 查询会话tmux ls tmux list-session 划分窗格划分上下两个窗格&#xff1a; tmux split-window 划分左右两个窗格&#xff1a;…...

编程日记 2023/4/15 17:29:04

【Linux】线程安全

线程安全&#xff1a;在多线程运行的时候&#xff0c;不论线程的调度顺序怎样&#xff0c;最终的结果都是 一样的、正确的&#xff0c;这个线程就是安全的。 保证线程安全的要求&#xff1a; 1. 对线程同步&#xff0c;保证同一时刻只有一个线程访问临界资源。 2.在多线程中使用…...

编程日记 2023/4/19 15:29:18

Redis-mysql 缓存实战

本文基于Springboot&#xff0c;mybatis plus&#xff0c;mysql&#xff0c;redis&#xff0c; Jedis模拟redis缓存实现 目录 1. 添加所需maven依赖 2. 设置数据库及数据表 3. 构建实体类 4. 构建工具类实现 redis 数据库连接池&#xff0c;redis 的读取&#xff0c;写入功…...

编程日记 2023/4/11 6:49:01

蓝桥杯：通电

蓝桥杯&#xff1a; 通电https://www.lanqiao.cn/problems/162/learning/ 目录 题目描述 输入描述 输出描述 输入输出样例 输入 输出 题目分析(最小生成树)&#xff1a; AC代码(Java) 题目描述 2015 年&#xff0c;全中国实现了户户通电。作为一名电力建设者&#xff0…...

编程日记 2023/4/15 17:31:01

一文搞懂 Kubernetes 的 Limits 和 Requests

当在Kubernetes中使用容器时&#xff0c;重要的是要知道所涉及的资源是什么以及如何需要它们。有些进程比其他进程需要更多的CPU或内存。有些是关键的&#xff0c;不应该被饿死。知道了这一点&#xff0c;我们应该正确配置我们的容器和Pod&#xff0c;以获得两者的最佳效果。在…...

编程日记 2023/4/15 17:32:14

【C++】手撕红黑树

文章目录前言一、红黑树的概念二、红黑树的节点结构三、红黑树的插入四、红黑树的调整1、叔叔存在且为红2、叔叔不存在或存在且为黑3、插入完整代码4、总结五、红黑树的验证六、红黑树的删除七、红黑树与 AVL 树的比较八、红黑树的代码实现前言 在网络上流传着这样一张图片&am…...

编程日记 2023/4/18 19:55:30

Java中的CAS实现原理

文章目录一、什么是CAS&#xff1f;二、JAVA中如何实现CAS操作三、CAS在JUC中的运用四、ABA问题一、什么是CAS&#xff1f; 在计算机科学中&#xff0c;比较和交换&#xff08;Conmpare And Swap&#xff09;是用于实现多线程同步的原子指令。 它将内存位置的内容与给定值进行…...

编程日记 2023/4/18 19:56:09

什么是华为云对象存储OBS？它有什么优势？

华为对象存储OBS&#xff08;Object Storage Service&#xff09;是一种高可用、高可靠、高性能的云存储服务&#xff0c;能够为企业和个人用户提供强大的数据存储和管理功能。本文将对华为对象存储OBS的特点、优势和未来发展进行详细介绍。 一、华为对象存储OBS的特点 1.对象…...

编程日记 2023/3/31 1:45:38

你知道照片怎么变清晰吗？增强照片清晰度的方法

相信很多小伙伴都会有这种的经历&#xff0c;去游玩时高高兴兴的拍照留念&#xff0c;结果拍出来的照片不是很尽人意。或者是画面还没聚焦好&#xff0c;就按下快门&#xff0c;导致拍摄出来的照片变模糊了。很多小伙伴遇到这种情况都很烦恼&#xff0c;照片丢了可惜&#xff0…...

编程日记 2023/4/13 18:01:04

NOIP模拟赛 轰炸（bomb）

题目描述 有nnn座城市&#xff0c;城市之间建立了mmm条有向的地下通道。 你需要发起若干轮轰炸&#xff0c;每轮可以轰炸任意多的城市。但在每次轰炸城市中&#xff0c;不能同时存在两个城市i,ji,ji,j满足可以通过地下通道从城市iii到达城市jjj。你需要求出最少需要多少轮可以…...

编程日记 2023/4/19 15:30:57

Linux系统之安装PHP环境

Linux系统之安装PHP环境 一、PHP介绍1.PHP简介2.PHP优势3.php7版本特点二、本地环境介绍1.环境规划2.检查操作系统版本3.检查当前yum仓库三、安装PHP5.4版本1.查看可安装php版本2.使用yum安装php3.安装httpd服务4.关闭selinux和设置防火墙5.编辑index.php测试文件6.测试php环境…...

编程日记 2023/4/18 19:57:57

MySQL8的安装教程

MySQL8的安装教程 1.安装包的下载 如果不想去官网下载的话可以去百度网盘进行下载。 MySQL :: Download MySQL Community Server mysql-8.0.28-winx64.zip_免费高速下载|百度网盘-分享无限制 (baidu.com) 提取码&#xff1a;0001 2.解压 3.创建一个my.ini的文件 最好是创建…...

编程日记 2023/4/13 2:58:08

日入500+的程序员都在用的“接私活”平台

网上总说程序员的薪资很高&#xff0c;这我可就不同意了&#xff1a; 程序员的薪资哪里是很高&#xff0c;而是非常高&#xff01;而会接私活的程序员更是能拿到更高的收入&#xff01;作为一个程序员&#xff0c;这些接私活的网站一定要收藏起来&#xff0c;让你在“八小时外…...

编程日记 2023/3/31 1:20:32

MySQL表设计思路（一对多、多对多...）

要开始单独负责需求了&#xff0c;捋一捋表设计的思路。 文章目录一、MySQL中的数据类型二、一对一的关系设计二、一对多的关系设计三、多对多的关系设计四、经验总结一、MySQL中的数据类型 字符串类型 varchar&#xff1a;即variable char &#xff0c;可边长度的字符串&#…...

编程日记 2023/4/18 19:59:40

内存对齐：C/C++编程中的重要性和技巧

C/C中的内存对齐前言基本概念 什么是内存对齐&#xff1f;内存对齐的定义内存对齐的作用数据类型的大小ARM 64 位架构和 x86_64 架构下的数据类型大小ARM 32 位架构下的数据类型大小内存对齐的边界填充字节的作用内存对齐的原理结构体中的内存对齐结构体的定义和使用结构体中成…...

编程日记 2023/3/31 1:10:28

C++ Primer第五版_第七章习题答案（41~50）

文章目录练习7.411、头文件2、源文件3、主函数练习7.42练习7.43练习7.44练习7.45练习7.46练习7.47练习7.48练习7.49练习7.50练习7.41 使用委托构造函数重新编写你的Sales_data 类&#xff0c;给每个构造函数体添加一条语句&#xff0c;令其一旦执行就打印一条信息。用各种可能的…...

编程日记 2023/4/15 17:34:32

python玄阶斗技--NumPy入门

目录 一.NumPy介绍 二.创建数组 1.一维数组创建 2.二维数组创建 3.zeros函数 4.ones函数 5.empty函数 6.arange函数 三.NumPy的数学操作 1.基本运算 2.矩阵运算 3.ndarray类的方法 四.数组堆叠 五.数组分隔 一.NumPy介绍 在这里对NumPy的介绍我不想扯太多&#xf…...

编程日记 2023/4/13 2:59:15

VR黑科技丨远离拥挤，VR直播开启沉浸式赏樱新姿势

春光兮婉转&#xff0c;珞樱兮盛绽&#xff0c;又是一年樱花季&#xff0c;全国各地大部分地区的樱花进入盛花期&#xff0c;尤其是武汉&#xff0c;东湖樱园踏青赏花的游人如织、摩肩擦踵&#xff0c;勾勒一幅“人人人人人人人花人人人人人”的盛景。 为了一睹樱花“芳容”&am…...

编程日记 2023/4/19 5:28:51

ts的一些用法

1.交叉类型 & ---多个类型属性的集合 1.1类型别名实现 type Person {name:string} type Children Person & {age:number} let newPerson:Children {// name:hahah,name:hhaah,age:18 } 1.2 接口类型实现 interface Inter1{name:string } interface Inter2{name:…...

编程日记 2023/4/14 8:45:03

终极指南：如何用ChatLaw构建你的免费中文法律AI助手

终极指南&#xff1a;如何用ChatLaw构建你的免费中文法律AI助手 【免费下载链接】ChatLaw ChatLaw&#xff1a;A Powerful LLM Tailored for Chinese Legal. 中文法律大模型 项目地址: https://gitcode.com/gh_mirrors/ch/ChatLaw 面对复杂的法律问题&#xff0c;你是否…...

编程新知 2026/5/13 1:41:37

中国半导体产业崛起：资本驱动下的存储器攻坚与全产业链布局

1. 行业格局的十字路口&#xff1a;当西方整合遇上东方崛起最近几年&#xff0c;半导体行业的头条新闻几乎被一系列重磅并购案所占据&#xff1a;恩智浦收购飞思卡尔、安华高并购博通、英特尔鲸吞阿尔特拉。这些动辄数百亿美元的巨无霸交易&#xff0c;背后传递出一个清晰的信号…...

编程新知 2026/5/13 0:49:00

从零基础到AI大模型高手，自学AI大模型学习路线推荐，不走弯路！

本文提供了一条详尽的AI大模型自学路线&#xff0c;旨在帮助新手小白系统学习。路线涵盖数学与编程基础、机器学习入门、深度学习深入、大模型探索、进阶与应用以及社区与资源等多个方面。内容详细列出了各阶段的学习资源&#xff0c;包括经典书籍、在线课程、实践项目等&#…...

编程新知 2026/5/13 0:44:48

避坑指南：海康威视工业相机SDK二次开发常见问题排查（从环境配置到图像采集）

海康威视工业相机SDK开发实战&#xff1a;从环境搭建到图像处理的深度避坑指南 工业视觉领域的开发者们&#xff0c;是否曾在深夜调试海康威视相机SDK时&#xff0c;被突如其来的"DLL缺失"错误打断思路&#xff1f;或是明明按照文档配置了项目属性&#xff0c;却始终…...

编程新知 2026/5/12 23:33:49

YOLO26改进 | MSHC多尺度异构卷积：用方形核与条带核捕获复杂空间纹理，以清晰动机打造超强创新！

# YOLO26改进最新创新改进系列 | MSHC多尺度异构卷积&#xff1a;用方形核与条带核捕获复杂空间纹理&#xff0c;以清晰动机打造超强创新&#xff01; 购买相关资料后畅享一对一答疑&#xff01; 畅享超多免费持续更新且可大幅度提升文章档次的纯干货工具&#xff01; 这篇采用…...

编程新知 2026/5/12 23:29:45

别再只点CubeMX的SDRAM选项了！STM32F429IGT6外扩W9825G6KH内存的完整驱动与读写测试指南

STM32F429IGT6外扩W9825G6KH内存实战&#xff1a;从CubeMX配置到完整驱动开发的深度解析 如果你正在使用STM32F429IGT6开发板&#xff0c;并且需要扩展大容量内存&#xff0c;W9825G6KH-6I这颗32MB的SDRAM芯片可能已经在你的硬件清单上。许多开发者习惯性地依赖STM32CubeMX生成…...

编程新知 2026/5/12 22:41:40

“枯笔”“泼墨”“留白”在Midjourney中根本不存在？——资深数字书画师拆解6个被长期误用的东方美学关键词

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;东方美学与AI绘图的本质断层 气韵生动与像素采样的不可通约性 东方绘画传统以“气韵生动”为最高准则&#xff0c;强调笔意流转、留白呼吸、时间性观照与心手相忘的即兴生成。而当前主流AI绘图模型&am…...

编程新知 2026/5/12 21:37:48

在持续集成环境中集成Taotoken API进行自动化测试的稳定性观察

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在持续集成环境中集成Taotoken API进行自动化测试的稳定性观察 1. 场景概述&#xff1a;CI/CD中的AI功能自动化测试 在现代软件开…...

编程新知 2026/5/12 21:03:38

小熊派gd32f303实战指南（9）— 硬件I2C驱动AT24C02 EEPROM从零到一

1. 硬件I2C与AT24C02基础认知 第一次接触硬件I2C时&#xff0c;我也被那些专业术语搞得一头雾水。简单来说&#xff0c;I2C就像两个人用摩斯密码交流——只需要两根线&#xff08;SDA数据线和SCL时钟线&#xff09;&#xff0c;就能让主设备&#xff08;GD32F303&#xff09;和…...

编程新知 2026/5/12 21:01:38

终极网盘直链下载助手完整指南：告别限速，快速获取八大平台真实下载地址

终极网盘直链下载助手完整指南&#xff1a;告别限速&#xff0c;快速获取八大平台真实下载地址 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里…...

编程新知 2026/5/12 20:44:18