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

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

news 2025/12/19 0:41:16

【案例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

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/12/12 19:42:17

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/11/9 11:32:13

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/12/15 22:07:34

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/12/4 0:13:33

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2025/12/14 1:46:19

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2025/12/14 4:22:15

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2025/12/9 3:17:09

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/11/13 2:37:01