while do..while验证用户名和密码-课后程序(JavaScript前端开发案例教程-黑马程序员编著-第2章-课后作业)
【案例2-8】while do..while验证用户名和密码
一、案例描述
- 考核知识点
while、do…while循环语句
- 练习目标
- 掌握while语句。
- do…while循环语句。
- 需求分析
在网站上登录时会用到表单，让用户属于用户名和密码，输入正确才可以进入，本案例将采用while do..while两种循环方式来进行用户名和密码的验证。
- 案例分析
- 打开页面时，效果如图2-11所示。
- 输入用户名展示
- 输入密码效果展示
如果输入的信息正确，则弹出如图2-13所示提示。
- 提示登录成功
如果输入的信息不正确，则弹出如图2-14所示提示。
- 提示登录失败
- 具体实现步骤如下：
- 用户输入用户名。
- 用户输入密码。
- 输入的内容，如果符合语句中的条件则提示“登录成功”，不符合时提示“用户名或者密码有误”，让你一直输入用户名和密码，直到输入正确为止。
二、案例实现
1、while循环方式实现
根据上面的分析，可以通过简单的JavaScript代码来实现这一效果，具体代码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>验证用户名和密码</title>
- </head>
- <body>
- <script>
- // 输入用户名和密码，如果正确，给出弹出框提示"登录成功"，如果不对，一直输入:while
- /* 第一种方式 while*/
- var userName = prompt("请输入用户名");
- var passWord = prompt("请输入密码");
- while( userName!="admin" || passWord!="123456" ){
- alert("用户名或者密码有误");
- userName = prompt("请输入用户名");
- passWord = prompt("请输入密码");
- }
- alert("登录成功");
- </script>
- </body>
- </html>
2、do…while循环方式实现
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>验证用户名和密码</title>
- </head>
- <body>
- <script>
- // 输入用户名和密码，如果正确，给出弹出框提示"登录成功"，如果不对，一直输入
- /* 第二种方式 do...while
- do {
- // alert("用户名或者密码有误");
- var userName = prompt("请输入用户名");
- var passWord = prompt("请输入密码");
- }while(userName!="admin"||passWord!="123456")
- alert("登录成功");*/
- </script>
- </body>
- </html>