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

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

news 2026/2/7 1:47:38

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

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2026/2/6 23:34:34

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/2/5 3:48:44

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/10/15 5:04:46

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/1/22 8:41:31

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/10/6 16:38:04

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2026/1/25 3:21:09

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/29 17:12:17

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/12/14 14:47:02

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/10/4 20:58:43