J09 循环练习题

1.遇到break,以下代码不在执行

for (var i = 0; i < 10; i++) {
        console.log(i); //=>0
        break;
    }
    console.log(i); //=>0

2. 遇到continue，结束本轮循环，继续下一轮

for (var i = 0; i < 10; i++) {
	continue; 
	//=>结束本轮循环（循环体中continue下面代码不在执行，继续累加执行下一轮）
	console.log(i);
}
console.log(i); //=>10 

3.for循环 判断条件中含有continue;break;

for (var i = 1; i <= 10; i += 2) {
	if (i <= 5) { // 1<=5=>1+1=2  2+2=4
		i++;      // 4<=5=>4+1=5  5+2=7
		continue; // 7<=5 不成立 走7-2=5
	} else {
		i -= 2;
		break;
	}
	i--;
	console.log(i);
}
console.log(i); //=>5

4. 死循环

for (var i = 3; i < 12; i++) {
	if (i < 3) {
		i++;
		break;
	}
	if (i > 9) {
		i += 2;
		continue;
	}
	i--;
}
console.log(i);//死循环3

5.改写成三元运算符格式 并计算

let a = 12;
if (a >= 0 && a <= 20) {
	if (a % 2 === 0) {
		a += 2;
	}
} else {
	a -= 2;
}
//=>三元运算符写法：条件?成立:不成立;	
a >= 0 && a <= 20 ? (a % 2 === 0 ? a += 2 : null) : a -= 2;
console.log(a); //=>14 

6.switch...case 是遵循===绝对相等

let b = '10';
switch (b) {
    case 10: //=>每一种case都是===进行比较的  '10'===10  FALSE
    b++;
    break;
    default:
    b--;
    }
console.log(b); //=>9

分析步骤：
// == 比较的时候，如果左右两边数据类型不一致则先转换为相同的类型，再比较
// '10' == 10  TRUE
// let a = '10';
// a == 10 ? a++ : a--;  
// console.log(a);

/*
 * a++ 和 a+=1 和 a=a+1 都是在自身基础上累加1，
 * 但是a++浏览器会给其做特殊处理（会把其转换为数字再进行累加）
 *  a++  => a=Number(a)+1
 *  a+=1 => a=a+1
 */

7.转换计算题

7.1字符串转换为布尔类型

!(!"Number(undefined)");
=>!(!true)
=>!false
=>true

步骤分析：
/* 
 *   ""  ''  `` 都是字符串   => "Number(undefined)"就是一个字符串
 *   !"Number(undefined)" 转换为布尔在取反  => false
 *   !false  => true
 */

7.2 加法拼接

isNaN(parseInt(new Date())) + Number([1]) + typeof undefined;​
=>isNaN(NaN)=>true
=>1
=>"undefined"
=>true+1+"undefined"
=>"2undefined"

分析步骤：
/*
* + 是最后计算的，先把每一项的值都算出来，最后相加
*   isNaN(parseInt(new Date()))  从最里层开始逐一向外层计算
*   new Date() => 当前本机日期（对象）
*   parseInt(对象) => parseInt("Fri Mar 06 2020 11:43:18 GMT+0800") =>NaN
*   isNaN(NaN) => true
*   Number([1]) 
*   Number("1") =>1
*   typeof undefined
*   =>"undefined"
*   true + 1 + "undefined"
*   true + 1 => 2
*    2 + "undefined" => "2undefined"
*/

7.3 转换计算

Boolean(Number("")) + !isNaN(Number(null)) + Boolean("parseInt([])") + typeof !(null);​
=> boolean(0)=>false
=> !isNaN(0)=>!false=>true
=> true
=>typeof true=>"boolean"
=>false+true+true+"boolean"=0+1+1+"boolean"
=>'2.6boolean'


步骤分析：
/*
* Boolean(Number(""))
* Number("") => 0
* Boolean(0) => false
* !isNaN(Number(null))
*  Number(null) => 0
*  isNaN(0) => false
*  !false => true
* Boolean("parseInt([])")
*  "parseInt([])" 他是一个字符串，并不是转换数字啥的
*   => true
* typeof !(null)
* !(null) => true
* typeof true => "boolean"
* false + true + true + "boolean"  => "2boolean"
*/

7.4 转换计算

parseFloat("1.6px") + parseInt("1.2px") + typeof parseInt(null);​
=>1.6+1+"number"
=>"2.6number"

步骤分析：
/*
 * parseFloat("1.6px") => 1.6
 * parseInt("1.2px") => 1
 * typeof parseInt(null)
 *    parseInt(null) => parseInt('null') => NaN
 *    typeof NaN => "number"
 * 1.6 + 1 + "number" => '2.6number'
 */

7.5 转换计算

isNaN(Number(!!Number(parseInt("0.8"))));​
=>isNaN(Number(!!Number(0))
=>isNaN(Number(false))
=>isNaN(1)
=>false

步骤分析：
/*
* parseInt("0.8") => 0
* !!Number(0) => false
* Number(false) => 0
* isNaN(0) => false
*/

7.6 字符串拼接

console.log(1 + "2" + "2");​
=>'122'

7.7 转换计算

!typeof parseFloat("0");​
=> ！typeof 0
=>!"number"
=> false

步骤分析：
/*
 *  parseFloat("0") => 0
 *  typeof 0 => "number"
 *  !"number" => false
 */

7.8 空字符串转换成数组是0

 Number("");​
 =>0
 
/* 0 */

7.9 转换计算

typeof "parseInt(null)" + 12 + !!Number(NaN);​
=>"string"
=>12
=>!!NaN=>fasle
=>"string"+12+fasle
=>"string12false"

步骤分析：
/*
 * typeof "parseInt(null)" => "string"
 * 12
 * !!Number(NaN) => false
 * => "string12false"
 */

7.10 转换计算

!typeof (isNaN("")) + parseInt(NaN);​
=>!typeof false=>!"boolean"=>!true=false
=>NaN
=>false+NaN
=>NaN

步骤分析：
/* 
 * !typeof (isNaN(""))
 * isNaN("") => isNaN(Number("")) => isNaN(0) => false
 * typeof false => "boolean"
 * !"boolean" => false
 * parseInt(NaN)
 * parseInt(String(NaN)) => parseInt('NaN') => NaN
 * false + NaN => NaN
 */

7.11 检测、取整 +转布尔、是不是一个数

typeof !parseInt(null) + !isNaN(null);
=>typeof true
=>boolean+!isNaN(null)
=>'boolean'+true
=>'booleantrue'

步骤分析：
/*
 *  typeof !parseInt(null)
 *     parseInt(null) => parseInt('null') => NaN
 *     !NaN => true
 *     typeof true => "boolean"
 *  !isNaN(null)
 *     isNaN(null) => isNaN(Number(null)) => isNaN(0) => false
 *     !false => true
 *  "boolean" + true => "booleantrue" 
 */

8.修改盒子中文字颜色样式的三种写法，哪一种可以？

let box = document.getElementById('box');
box.style.color = 'red';

let boxSty = box.style;
//=>获取的是STYLE对应的对象  BBBFFF000
boxSty.color = 'red';

let text = box.style.color;
//=>获取的是color初始值''，基本类型值，直接存在栈内存中
text = 'red';

9.切换背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换背景色</title>
</head>
<body style="background:white">
    <button id="btnBox">白-红-粉-蓝</button>
    <script>
    let body=document.body;
    let btnBox=document.getElementById("btnBox");

    btnBox.onclick=function () {
        bg=body.style.backgroundColor;
        if(bg==="white"){
            body.style.backgroundColor="red";
        }else if(bg==="red"){
            body.style.backgroundColor="pink"
        }else if(bg==="pink"){
            body.style.backgroundColor="blue"
        }else {
             body.style.backgroundColor="white"
        }
    }
    </script>
</body>
</html>

10 判断是平年还是闰年？

• 1.判断是平年还是闰年
• 2.能被4整除,不能被100整除
• 3.能被400整除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>平年还是闰年</title>
</head>
<body >
  <input type="text" id="inpBox">
  <button id="btnBox">提交</button>

	<script>
     let inpBox=document.getElementById("inpBox"),
      btnBox=document.getElementById("btnBox");

     btnBox.onclick=function () {
         let val=Number(inpBox.value);
         if(isNaN(val)||val<1000||val>9999){
             alert("请输入合法的年份");
             return;
         }

         if((val%4===0&&val%100!==0)||val%400===0){
          alert(`${val}年是闰年`);
         }else{
             alert(`${val}年是平年`);
         }
     }
	</script>
</script>
</body>
</html>

11 判断是奇数还是偶数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断是奇数偶</title>
</head>
<body >
  <input type="text" id="inpBox">
  <button id="btnBox">提交</button>

	<script>
     let inpBox=document.getElementById("inpBox"),
      btnBox=document.getElementById("btnBox");

     btnBox.onclick=function () {
         let val=Number(inpBox.value);
         if(isNaN(val)){
             alert("请输入合法的数数字");
             return;
         }

         if((val%2===0)){
          alert(`${val}年是偶数`);
         }else{
             alert(`${val}年是奇数`);
         }
     }
	</script>
</script>
</body>
</html>

12 根据输入的分数，判定成绩的等级

说明：90分及以上是优秀，80分及以下是中等，70分及以上是及格，70分以下不及格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断成绩</title>
</head>
<body >
  <input type="text" id="inpBox">
  <button id="btnBox">提交</button>

	<script>
     let inpBox=document.getElementById("inpBox"),
      btnBox=document.getElementById("btnBox");

     btnBox.onclick=function () {
         let val=Number(inpBox.value);
         if(isNaN(val)){
             alert("请输入合法的分数");
             return;
         }

         if((val===90)){
          alert(`${val}是优秀`);
         }else if(val===80){
             alert(`${val}年是中等`);
         }else if(val===70){
             alert(`${val}年是及格`);
         }else{
              alert(`${val}年是不及格`);
         }
     }
	</script>
</script>
</body>
</html>

13 编写JS程序，当用户自己的工作和薪资后，计算并且输出应得年终奖

• 某个公司要给员工发年终奖,为了奖励老员工，所以工作时间越长，发的越多，规则如下
  • 工作满0年发月薪的1被月薪年终奖，如果月薪大于8000元，那么就1.2被
  • 工作满1年，发月薪的1.5倍月薪年终奖，如果月薪大约10000元，那么就发1.7倍
  • 工作满2年，发月薪的3倍月薪年终奖，如果月薪大于12000，那么久发3.2倍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断成绩</title>
</head>
<body >
工作年限：<input type="text" id="workYear">	<br>
工作薪酬：<input type="text" id="workMoney"><br>
<button id="submit">提交</button> 

<script>
    let workYear = document.getElementById('workYear'),
			workMoney = document.getElementById('workMoney'),
            submit = document.getElementById('submit');
            
		submit.onclick = function () {
			let year = workYear.value,
				money = workMoney.value;
                year = Number(year);
                money = Number(money);

			// 最好把YEAR和MONEY做非有效数字的校验
			if (isNaN(year) || isNaN(money)) {
				alert('输入有误，请查证');
				return;
			}

			let result = 0; //=>设置初始值
			if (year === 0) {
				if (money >= 8000) {
					result = money * 1.2;
				} else {
					result = money * 1;
				}
			} else if (year === 1) {
				if (money >= 10000) {
					result = money * 1.7;
				} else {
					result = money * 1.5;
				}
			} else {
				if (money >= 12000) {
					result = money * 3.2;
				} else {
					result = money * 3;
				}
			}
			alert(`你应该拿到的年终奖是：￥${result.toFixed(2)}`);
		} 
</script>
</body>
</html>

14 编写JS程序，用户输入自己的汽油编号，然后输入自己加多少升，计算并且输出应付的金额

• 92号汽油，每升6元；如果大于等于20升，那么每升5.9元
• 97号汽油，每升7元；如果大于等于30升，那么每升6.95元

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body >
汽油型号：<select id="modelInp">
		<option value="95" selected>#95</option>
		<option value="97">#97</option>
	</select>
	<br>
	汽油升数：<input type="text" id="priceInp">
	<br>
	<button id="submit">提交</button>

	<script>
		let modelInp = document.getElementById('modelInp'),
			priceInp = document.getElementById('priceInp'),
			submit = document.getElementById('submit');
		submit.onclick = function () {
			let model = modelInp.value,
				price = priceInp.value;
			model = Number(model);
			price = Number(price);
			if (isNaN(model) || isNaN(price)) {
				alert('输入有误，请查证');
				return;
			}
			let result =0;
		 if (model === 95) {
				if (price >= 20) {
					result = price * 5.9;
				} else {
					result = price * 6;
				}
			} else {
				if (price >= 30) {
					result = price * 6.95;
				} else {
					result = price * 7;
				}
			} 
			alert(`支付总价：￥${result.toFixed(2)}`);
		}
	</script>
</body>
</html>