Javascript入门阶段——else if语句
2020-11-25 10:20
826 查看
1. 课程大纲
- if-else语句的复习
- 逻辑运算符(!)
- else if语句在飞机大战中的运用
2.1 逻辑运算符!(非)
- !:代表相反的意思
- 逻辑运算符!会把本来的运算结果转变成相反的结果。
- 根据下列代码,判断结果(true / false)
2.2 回顾if-else语句
if(判断条件){ A }else{ B }
- 判断条件为真(true),执行A处的代码
- 判定条件为假(false),执行B处代码
- 如果明天不下雨,在警告框中显示去动物园,否则显示在家写作业。代码如下:
var isRain = false; if(!isRain){ alert("去动物园"); }else{ alert("在家写作业"); }
代码运行结果:
- 声明变量 isRain,表示明天是否下雨。
- 使用if-else语句判断是否下雨。
- isRain为 false,那么! isRain为true,执行第一个大括号中的代码,在警告框中显示“去动物园”。
3. else-if语句
3.1 学生分数等级划分程序
- 根据学生分数划分等级:
3.2 else if语句
if(判断条件一){ A }else if(判断条件二){ B }else if(判断条件三){ C }else{ D }
- else if语句用于多重判断;
- 如果判断条件 fcd1 一为true,执行A处代码
- 判断条件一为 false,再执行判断条件二,如果判断条件二为true,则执行B处代码
- 同理,判断条件二为 false,再执行判断条件三,如果判断条件三为true,执行C处的代码
- 如果之前的判断条件都为 false,则执行D处的代码
- 程序执行流程如下图所示:
3.3 学生分数等级划分程序代码
代码如下
<!DOCTYPE html> <html> <title>test01</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <script> var score = prompt("请输入考试分数:"); if(score >= 90){ alert("等级A"); }else if(score >= 80){ alert("等级B"); }else if(score >= 70){ alert("等级C"); }else if(score >= 60){ alert("等级D"); }else{ alert("不及格"); } </script> </body> </html>
- 如果 score>=90为true,在警告框上显示"等级A"。
- 若 score>=90为 False,再判断 score>=80.如果 score>=80为true,在警告框上显示"等级B"。
- 依次同理,若 score>=80为 false,再判断 score>=70.如果 score>=70为true,在警告框上显示"等级C"
- 依次同理,若 score>=70为 false,再判断 score>=60.如果 score>=60为true,在警告框上显示"等级D"
- 若以上所有的条件都不成立,在警告框上显示"不及格"
3.4 数字星期对应程序
- 程序执行流程图如下:
代码如下:
<!DOCTYPE html> <html> <title>test01</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <script> var today = prompt("请输入1-7的数字:"); if(today == 1){ alert("今天是星期一"); }else if(today == 2){ alert("今天是星期二"); }else if(today == 3){ alert("今天是星期三"); }else if(today == 4){ alert("今天是星期四"); }else if(today == 5){ alert("今天是星期五"); }else if(today == 6){ alert("今天是星期六"); }else if(today == 7){ alert("今天是星期日"); }else{ alert("该数字没有星期对应!"); } </script> </body> </html>
3.5 else if语句在飞机大战中的实际运用
根据型号画飞机
- 代码如下
<!DOCTYPE html> <html> <title>test01</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <canvas id="myCanvas" width="500" height="500"></canvas> <body> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var type = prompt("请输入飞机类型:"); if(type == 1){ ctx.drawImage(enemy1,100,100); }else if(type == 2){ ctx.drawImage(ememy2,200,200); }else if(type == 3){ ctx.drawImage(enemy3,300,300); }else{ ctx.font = "40px 微软雅黑"; ctx.fillText("没有该类型的飞机",100,50); } </script> </body> </html>
- 提示用户,在信息提示输入框中输入飞机类型
- 输入1的时候,在画布上画出架小型敌机。
- 输入2的时候,在画布上画出一架中型敌机。
- 输入3的时候,在画布上画出一架大型敌机。
- 输入其它数字的时候,在画布上写出"没有该类型飞机”的字样,且文字的大小为40px、字体为微软雅黑。
相关文章推荐
- Javascript入门阶段——if语句
- JavaScript入门简介(包括:JavaScript的定义,JavaScript的作用,渲染引擎,JS引擎,JS的组成,JS代码的书写位置——行内式、内嵌式、链接式,JS注释及输入输出语句)
- 2.入门第二课:javascript运算符、表达式、语句
- JavaScript入门学习书籍的阶段选择
- JavaScript 循环语句入门详解
- JavaScript快速入门(三)——JavaScript语句
- JavaScript入门学习书籍的阶段选择
- JavaScript入门——基础'判断/循环'语句汇总
- Javascript入门阶段——字符串拼接和变量的应用
- javaScript入门学习书籍的阶段选择
- JavaScript入门学习书籍的阶段选择
- JavaScript入门学习书籍的阶段选择(ZHUAN)
- JavaScript快速入门(三)——JavaScript语句
- JavaScript入门学习书籍到阶段书籍
- JavaScript入门:005—JS基本语句
- JavaScript快速入门(三)——JavaScript语句
- JavaScript入门学习书籍的阶段选择
- JavaScript入门基础使用语句
- JavaScript else If 语句用法 【每日一段代码44】
- JavaScript入门学习书籍的阶段选择!