HTML里面----逻辑语句 & 循环语句的案例讲解
文章目录
- 1.HMLT中if/else语句的基本使用
- 2.if---else if --- else多条件的判断
- 3.三元表达式
- 4.switch / case 语句的应用
- 一.常规写法
- 二.简写switch case语句以及注意点
- 5.while循环的使用
- 一.基本用法
- 二.应用案例
- 6.do / while 循环的使用
- 7.for循环的基本应用
- 8.for循环的嵌套使用--长方体的五角星
- 9.for循环嵌套---三角形形状的五角星
- 10.for循环的嵌套使用---乘法口诀的实现
1.HMLT中if/else语句的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>if/else语句的基本使用</title>
</head>
<body>
# 将js代码放入body里面的最底部，这样方便先加载静态显示的内容，再加载js动态效果
<script type="text/javascript">
var age = parseInt(prompt("请您输入一个年龄！"))
console.log(age)
if (age > 18){
console.log("已经成年了，可以喝酒了！")
}else{
console.log("未成年人，请不要喝酒抽烟!!")
}
</script>
</body>
</html>
解释：
- （1）parseInt（）方法可以将str类型转Int类型
- （2）prompt（）方法是可以自动弹出输入框并赋值给js代码里面的变量
- （3）console.log()这个里面打印的东西，都显示在浏览器console里面，方便developer调试程序
2.if—else if — else多条件的判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>if /else if /else</title>
</head>
<body>
<script>
/*
score 90--100 A级
80--90 B级
70--80 C级
60--70 D级
0-- 60 E级
*/
var score = Number(prompt('请输入您的成绩'))
if (!isNaN(score)){
if (score >= 90 && score<=100){
console.log("A级")
}else if (score > 80){
console.log("B级")
}else if (score > 70){
console.log("C级")
}else if (score > 60){
console.log("D级")
}else{
console.log("E级")
}
}else{
console.log("您输入的数据有误，请输入数字")
}
</script>
</body>
</html>
解释：
- （1）isNaN()函数，判断是否为非数字，NaN:not a number
- （2）!isNaN()，判断是否为数字，函数里面是变量，返回True 或 False
- （3）else if 可以有多个，但if & else都只能有一个
- （4）Number（）这个函数，是将字符串转数字的函数，浮点类型或整型类型都可以，而ParseInt（）函数，只能转换为整型类型。
3.三元表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var age = parseInt(prompt("请输入一个年龄"));
result = age >= 18 ? "成年了":"未成年";
console.log(result);
</script>
</body>
</html>
解释：
- （1）result = age >= 18 ? “成年了”:“未成年”; 将这个分为三部分来理解
- （2）result是变量
- （3）age>=18 是判断语句
- （4）“成年了”:"未成年"是最终可选的结果
- （5）如果（3）成立，那么就输出（4）选项里面的"成年了",否者输出"未成年"
4.switch / case 语句的应用
一.常规写法
/*
score 90--100 A级
80--90 B级
70--80 C级
60--70 D级
0-- 60 E级
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var score_level = prompt("请输入成绩等级");
switch (score_level) {
case "A":
console.log("分数大约在90--100之间");
break;
case "B":
console.log("分数大约在80--90之间");
break;
case "C":
console.log("分数大约在70--80之间");
break;
case "D":
console.log("分数大约在60--70之间");
break;
case "E":
console.log("分数大约在0--60之间");
break;
}
</script>
</body>
</html>
解释：
- （1）switch（变量），变量是具体的一个值
- （2）case后面的变量，这个也是不同的具体的值，符合条件就执行case后面的代码，然后跳出循环break;
二.简写switch case语句以及注意点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var montch = parseInt(prompt("请输入月份"));
switch(montch){
case 1:
case 3:
case 5:
case 7:console.log("七月31天");break;
case 6:
case 8:console.log("八月30天");break;
case 2:console.log("二月28天");break;
default:
console.log("输入的数据不符合条件");break;
}
</script>
</body>
</html>
解释:
- （1）把case分类里面，执行语句一样的分为一类，最后一个执行语句可以涵盖前面的表达式；
- （2）default后面的break可以省略
- （3）switch（）函数的变量与case后面的变量，这两个变量是严格模式的比较，类型、大小都需要比较
- （4）default（）语句也可以不写，用case代替即可
5.while循环的使用
一.基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var i = 0;
while (i<20){
console.log("hello world", i+1);
i++;
}
</script>
</body>
</html>
二.应用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var username = prompt("请输入用户名！");
var pw = prompt("请输入密码");
while (username != "admin" || pw != "123456") {
username = prompt("请输入用户名！")
pw = prompt("请输入密码")
}
console.log("登录成功")
</script>
</body>
</html>
解释：
- （1）var username = prompt(“请输入用户名！”)，声明并初始化变量；
- （2）while循环里面，对username还可以再次赋值，改变变量的值
- （3）username != “admin” || pw != “123456”，只要有一个变量不是正确的，就进入循环，然后需要重新输入2个变量的值。
- （4）如果2个变量都正确，就不符合while（）循环的条件，则直接执行console.log(“登录成功”)
6.do / while 循环的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
do{
var age = parseInt(prompt("请您输入年龄"));
}while(age<18);
console.log("恭喜您，您刚刚成年了！")
</script>
</body>
</html>
解释：
- （1）do（）里面是具体的表达式，如果符合while（）条件就执行do（）里面的表达式
- （2）while（）里面是判断语句，
- （3）如果不符合while（）的判断条件，就执行外部的语句，console.log()
7.for循环的基本应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i%2==0){
sum += i
}
}
console.log("求和为：", sum)
</script>
</body>
</html>
解释：
- （1）for（）循环里面一般需要有3个表达式，变量，变量的范围，计数器3个
- （2）先循环，然后再判断每个数是否为偶数，偶数就添加到sum（）里面
8.for循环的嵌套使用–长方体的五角星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 控制具体打印多少行
for(var l=0;l<5;l++){
// 控制每一行的具体打印情况和换行
for (var i = 1; i <= 5; i++) {
document.write("⭐️")
}
document.write("
")
}
</script>
</body>
</html>
解释：
- （1）最外面一层for循环是控制行数，里面for是控制每一行的情况
- （2）document.write(""),这个函数里面一般填写标签组的内容，最终显示在浏览器里面，
9.for循环嵌套—三角形形状的五角星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 控制具体打印多少行
for(var l=1;l<=5;l++){
// 控制每一行的具体打印情况和换行
for (var i = 1; i <= l; i++) {
document.write("⭐️")
}
document.write("
")
}
</script>
</body>
</html>
10.for循环的嵌套使用—乘法口诀的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 控制具体打印多少行---乘法口诀
for(var l=1;l<=9;l++){
// 控制每一行的具体打印情况和换行
for (var i = 1; i <= l; i++) {
document.write(i+"*"+l+"="+i*l,'\t')
}
document.write("
")
}
</script>
</body>
</html>