珠峰培训 - 第二天课后作业及解析(FruitJ)
文章目录
- 珠峰培训 - 第二天课后作业及解析(FruitJ)
- 一、练习题 :
- 1. 输出下面程序运行的结果
- 2. 把下面的程序改写成为三元运算符,并算出结果
- 3. 算出输出的结果
- 4. 算出输出的结果
- 5. 实现入下图中的案例效果
- 6.扩展:其他班老师出的“变态题”
- 7.扩展实现如下的需求 ( 判断用户输入的数字,是正数还是负数 )
- 8. 扩展思考题(周五讲,提前思考一下)
一、练习题 :
1. 输出下面程序运行的结果
=>
- continue 跳出本轮循环
- break 结束当前循环
-1).
for (var i = 0; i < 10; i++) {
console.log(i); // 0 【循环一次】
break;
}
console.log(i); // 0
解析: 此题循环一次, 遇到 break
。最外层作用域中也能访问到 i
的原因是 ES5
之前的语法没有 块级作用域
(只有函数有函数作用域)。
-2).
for (var i = 0; i < 10; i++) {
continue;
console.log(i);
}
console.log(i); // 10 【循环 11 次】
解析: continue
在打印语句之前。
-3).
for (var i = 1; i <= 10; i += 2) {
if (i <= 5) {
i++;
continue;
} else {
i -= 2;
break;
}
i--;
console.log(i);
// 【循环 3 次】
}
console.log(i); // 5
解析: 前两次 continue
, 最后一次 break
。
-4).
for (var i = 3; i < 12; i++) {
if (i < 3) {
i++;
break;
}
if (i > 9) {
i += 2;
continue;
}
i--;
}
console.log(i);
解析: console.log(i);
不会被执行, 前面的代码陷入死循环。
2. 把下面的程序改写成为三元运算符,并算出结果
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
3. 算出输出的结果
let a = typeof typeof typeof [12,23];
console.log(a); // string
4. 算出输出的结果
let a = '10';
a == 10 ? a++ : a--;
console.log(a); // 11
let b = '10';
switch (b) {
case 10:
b++;
break;
default:
b--;
}
console.log(b); // 9
解析: a++ 会自动调用 Number()
转型函数将数据类型转换为 number 类型
5. 实现入下图中的案例效果
<!doctype html>
<html>
<head>
<title>demo</title>
<style type="text/css">
html,
body {
overflow: hidden;
margin: 0;
padding: 0;
height: 100%;
background-color: #FFF;
}
</style>
</head>
<body>
<button id="btn">白、红、绿、蓝、黑、白</button>
<script type="text/javascript">
// 获取目标元素(#btn)
let btn = document.querySelector("#btn");
// 定义颜色队列
let queue_colors = ["(255,255,255)", "(255,0,0)", "(0,128,0)", "(0,0,255)", "(0,0,0)"];
// 为目标元素(#btn) 绑定点击事件
btn.addEventListener('click', function() {
// 获取 body 的 rgb 颜色值
let current_color = window.getComputedStyle(document.body, null).backgroundColor.replace("rgb", "");
// 格式化颜色值
current_color = current_color.replace(/\s/g, "");
// 定义下一次的颜色值
let color = "";
// 确定下一次颜色值
for(let i = 0; i < queue_colors.length; i++) {
(current_color === queue_colors[i]) ? color = queue_colors[(i + 1) >= queue_colors.length ? 0 : (i + 1)] : null ;
}
// 改变 body 背景色
document.body.style.cssText = `
background-color: rgb${ color };
`;
}, false);
</script>
</body>
</html>
6.扩展:其他班老师出的“变态题”
!(!"Number(undefined)"); // true 【!(!true)】
isNaN(parseInt(new Date())) + Number([1]) + typeof undefined; // "2undefined" 【true + 1 + "undefined"】
Boolean(Number("")) + !isNaN(Number(null)) + Boolean("parseInt([])") + typeof !(null); // "2boolean" 【false + true + true + "boolean"】
parseFloat("1.6px") + parseInt("1.2px") + typeof parseInt(null); // "2.6number" 【1.6 + 1 + "number"】
isNaN(Number(!!Number(parseInt("0.8")))); // false 【isNaN(0)】
console.log(1 + "2" + "2"); // "122"
!typeof parseFloat("0"); // false 【!true】
Number(""); // 0
typeof "parseInt(null)" + 12 + !!Number(NaN); // "string12false" 【"string" + 12 + false】
!typeof (isNaN("")) + parseInt(NaN); // NaN 【false + NaN】
typeof !parseInt(null) + !isNaN(null); // "booleantrue" 【"boolean" + true】
7.扩展实现如下的需求 ( 判断用户输入的数字,是正数还是负数 )
=> 正则方式实现
<!doctype html>
<html>
<head>
<title>demo</title>
<style type="text/css">
html,
body {
overflow: hidden;
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<input type="text" name="userPhone" placeholder="phone...">
<button class="btn">验证</button>
<script type="text/javascript">
// 获取目标元素(input[name=userPhone])
let oInput = document.querySelectorAll("[name=userPhone]")[0];
// 获取目标元素(.btn)
let btn = document.querySelectorAll(".btn")[0];
// 为目标元素(.btn])绑定点击事件
btn.addEventListener('click', function() {
// 获取当前表单输入数据
let val = oInput.value;
// 定义正则
let reg = /^[-+\d]?\d+$/;
// 判断输出
val !== "" ? reg.test(val) ? val === "0" ? console.log("既不是正数也不是负数") : val.substr(0, 1) === "-" ? console.log("当前输入数值为负数") : console.log("当前输入数值为正数") : console.log("当前输入数值不合法!") : console.log("请输入数值") ;
}, false);
</script>
</body>
</html>
-1). 判断输入的年份是闰年还是平年
-2). 判断输入的数字是偶数还是奇数
-3). 根据输入的分数,判定成绩等级
-1)、-2)、-3) 共用一套代码
<!doctype html>
<html>
<head>
<title>demo</title>
<style type="text/css">
html,
body {
overflow: hidden;
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<input type="text" name="input" placeholder="please ...">
<button class="btn">验证</button>
<script type="text/javascript">
// 获取目标元素(input[name=input])
let oInput = document.querySelectorAll("[name=input]")[0];
// 获取目标元素(.btn)
let btn = document.querySelectorAll(".btn")[0];
// 为目标元素(.btn])绑定点击事件
btn.addEventListener('click', function() {
// 获取当前表单输入数据
let val = oInput.value;
// 定义正则
let reg = /^\d+$/;
// 判断输出
reg.test(val) ? (
// 判断年份
// console.log(utils.judgeYears(Number(val)))
// 判断奇偶数
// console.log(utils.judgeNumber(Number(val)))
// 根据输入的分数,判定成绩等级 (90分及以上“优秀” 80分及以上"中等" 70分及以上"及格" 70分以下"不及格")
// console.log(utils.judgeGrade(Number(val)))
) : console.log("输入不合法") ;
}, false);
let utils = {
judgeYears(year) {
return `${year}`.length !== 4 ? "输入不合法" : ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) ? "闰年" : "平年";
},
judgeNumber(num) {
return (num % 2 === 0) ? "偶数" : "奇数" ;
},
judgeGrade(grade) {
return grade >= 90 ? "优秀" : grade >= 80 && grade < 90 ? "中等" : grade >= 70 && grade < 80 ? "及格" : "不及格" ;
},
};
</script>
</body>
</html>
-4). 某个公司要给员工发年终奖,为了奖励老员工,所以工作时间越长,发的越多,规则如下:
工作满 0 年,发月薪的 1 倍月薪年终奖,如果月薪大于 8000 ,那么就是发 1.2倍
工作满 1 年,发月薪的 1.5 倍月薪年终奖,如果月薪大于 10000 ,那么就是发 1.7倍
工作满 2 年甚至更多 ,发月薪的3 倍月薪年终奖,如果月薪大于 12000 ,那么就是发 3.2倍
编写JS程序,当用户输入自己的工作年限和薪资后,计算并且输出应得的年终奖~~
<!doctype html>
<html>
<head>
<title>demo</title>
<style type="text/css">
html,
body {
overflow: hidden;
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<input type="text" name="year" placeholder="year ...">
<input type="text" name="salary" placeholder="salary ...">
<button class="btn">验证</button>
<script type="text/javascript">
// 获取目标元素(input[name=year])
let oInput_year = document.querySelectorAll("[name=year]")[0];
// 获取目标元素(input[name=salary])
let oInput_salary = document.querySelectorAll("[name=salary]")[0];
// 获取目标元素(.btn)
let btn = document.querySelectorAll(".btn")[0];
// 设定最高工作年限
const MAX_WORK_YEAR = 100;
// 为目标元素(.btn])绑定点击事件
btn.addEventListener('click', function() {
// 获取当前表单输入数据
let year = oInput_year.value;
let salary = oInput_salary.value;
let money = 0;
// 定义正则
let reg = /^\d+$/;
// 判断输出
if(reg.test(year) && reg.test(salary)) {
year = Number(year);
salary = Number(salary);
// 校验工作年限
if(year < MAX_WORK_YEAR) {
// 计算年终奖
money = (year >= 0 && year < 1) ? util(salary, 8000, 1.2, 1) : (year >= 1 && year < 2)? util(salary, 10000, 1.7, 1.5) : (year >= 2) ? money = util(salary, 12000, 3.2, 2) : null ;
}else {
console.log("工作年限不切实际");
}
}else {
console.log("输入有误");
}
console.log(`年终奖: ${ money }`);
}, false);
// 工具函数
function util(salary, tag, max, min) {
return (salary >= tag) ? salary * max : salary * min ;
}
</script>
</body>
</html>
-5). 一个加油站为了鼓励车主多加油,所以加的多有优惠。
92 号汽油,每升 6 元;如果大于等于 20升,那么每升 5.9 元
97 号汽油,每升 7 元;如果大于等于 30升,那么每升 6.95 元
编写 JS 程序,用户输入自己的汽油编号,然后输入自己加多少升,计算并且输出应付价格~~
<!doctype html>
<html>
<head>
<title>demo</title>
<style type="text/css">
html,
body {
overflow: hidden;
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<input type="text" name="number" placeholder="汽油编号 ...">
<input type="text" name="count" placeholder="加了...升">
<button class="btn">验证</button>
<script type="text/javascript">
// 获取目标元素(input[name=number])
let oInput_number = document.querySelectorAll("[name=number]")[0];
// 获取目标元素(input[name=count])
let oInput_count = document.querySelectorAll("[name=count]")[0];
// 获取目标元素(.btn)
let btn = document.querySelectorAll(".btn")[0];
// 设定最高汽油编号
const GASOLINE_NUMBERS = [92, 97];
// 为目标元素(.btn])绑定点击事件
btn.addEventListener('click', function() {
// 获取当前表单输入数据
let number = oInput_number.value;
let count = oInput_count.value;
let money = 0;
// 定义正则
let reg = /^\d+$/;
// 判断输出
if(reg.test(number) && reg.test(count)) {
number = Number(number);
count = Number(count);
// 校验汽油种类
if(GASOLINE_NUMBERS.includes(number)) {
// 计算最终油价
money = number === 92 ? util(count, 20, 6, 5.9) : util(count, 30, 7, 6.95) ;
}else {
console.log("没有该种类型汽油");
}
}else {
console.log("输入有误");
}
console.log(`最终油价: ${ money }`);
}, false);
// 工具函数
function util(count, tag, max, min) {
return (count >= tag) ? count * min : count * max;
}
</script>
</body>
</html>
8. 扩展思考题(周五讲,提前思考一下)
已知下面代码可以修改BOX元素的样式
box.style.color = 'red';
那么下面的写法是否可以修改元素的样式,如果不可以是为什么?
//第一种方案
let AA = box.style;
AA.color = 'red';
//第二种方案
let BB = box.style.color;
BB = 'red';
//=>哪种方式可以实现,不能实现是因为啥?
=> 第一种可以实现, 第二种无法实现。
解析 : AA 存储与操作的是 box.style 的引用地址, 而 BB 存储与操作的是 box.style.color 所指的基本类型值。
图解 :
第一种 :
第二种: