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

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

news 2025/9/14 15:40:35

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

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2025/8/4 18:55:37

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/8/28 21:08:38

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2025/9/9 10:09:47

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2025/9/3 19:20:35

[大语言模型]在个人电脑上部署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/9/4 16:15:51

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50

【LeetCode】3309. 连接二进制表示可形成的最大数值（递归|回溯|位运算）

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

编程新知 2025/7/5 18:01:05

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

编程新知 2025/9/9 10:08:39

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/9/1 8:36:19

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

编程新知 2025/9/7 8:47:45