0033.课后作业讲解：逻辑思维判断题 · 原生js-2020

~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>珠峰培训 - 微信：18310612838</title>  <link rel="stylesheet" href="reset.min.css"> <style> html, body { height: 100%; overflow: hidden; } </style> </head> <body style="background-color: white;"> <button id="changeBtn">点击切换BODY的颜色白->红->蓝->绿->白</button>  <script> /* * 点击BUTTON的时候，获取到当前BODY的背景颜色，根据现有的背景颜色，把其更改为对应的颜色 * 1.想要操作谁，就先获取谁 * 2.事件绑定 * 3.实现对应的需求逻辑即可 * * body.style.backgroundColor 操作的是元素的行内样式（只对元素行内上写的样式有作用），扩展思考：想要获取元素的样式（不论写在哪的样式），后面课程中会讲到 getComputedStyle * * 在JS中获取颜色，如果设置的时候是基于16进制或者RGB表示法写的样式，得到的结果一般都是RGB的染色值（我们最好把需要在JS中获取的颜色用英文单词表示法编写） * #fff 会得到rgb颜色，如果是white，那么得到的就是white */ let body = document.body, changeBtn = document.getElementById('changeBtn'); changeBtn.onclick = function () { // 每一次点击要获取当前最新的背景颜色 let bg = body.style.backgroundColor; /* if (bg === 'white') { body.style.backgroundColor = 'red'; } else if (bg === 'red') { body.style.backgroundColor = 'blue'; } else if (bg === 'blue') { body.style.backgroundColor = 'green'; } else { body.style.backgroundColor = 'white'; } */ // SWITCH CASE只应用于一个变量（JS表达式）在不同值情况下的不同操作 switch (bg) { case 'white': body.style.backgroundColor = 'red'; break; case 'red': body.style.backgroundColor = 'blue'; break; case 'blue': body.style.backgroundColor = 'green'; break; default: body.style.backgroundColor = 'white'; } }; </script> <script> // 颜色是由变化规律的：红->蓝->绿->白 let body = document.body, changeBtn = document.getElementById('changeBtn'); let arr = ['red', 'blue', 'green', 'white'], index = -1; changeBtn.onclick = function () { index++; if (index > arr.length - 1) { // 已经到头了，则从索引零重新开始即可 index = 0; } body.style.backgroundColor = arr[index]; }; /* * arr.length-1=3 最大索引（长度-1，因为索引从零开始） * 第一次点击 * index++ => index=0 * body.style.backgroundColor = arr[0]; 'RED' * 第二次点击 * index++ => index=1 * body.style.backgroundColor = arr[1]; 'BLUE' * 第三次点击 * index++ => index=2 * body.style.backgroundColor = arr[2]; 'GREEN' * 第四次点击 * index++ => index=3 * body.style.backgroundColor = arr[3]; 'WHITE' * 第五次点击 * index++ => index=4 * if(4>3) => index=0 * body.style.backgroundColor = arr[0]; 'RED' * ...... */ </script> </body> </html> ~~~ ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>珠峰培训 - 微信：18310612838</title>  <link rel="stylesheet" href="reset.min.css"> <style> </style> </head> <body>   <script> let inpBox = document.getElementById('inpBox'), submit = document.getElementById('submit'); submit.onclick = function () { // 获取文本框中的内容（默认是字符串，需要转换为数字） let val = inpBox.value; val = Number(val); if (isNaN(val) || val < 1000 || val > 9999) { alert('输入的年份必须合法！'); return; //=>遇到RETURN下面代码就不在执行了 } if ((val % 4 === 0 && val % 100 !== 0) || val % 400 === 0) { alert(`${val}年是闰年！`); } else { alert(`${val}年是平年！`); } } </script> <script> let inpBox = document.getElementById('inpBox'), submit = document.getElementById('submit'); submit.onclick = function () { let val = inpBox.value; val = Number(val); if (isNaN(val)) { alert('请输入有效数字！'); return; } if (val % 2 === 0) { alert(`${val}是偶数！`); } else { alert(`${val}是奇数！`); } } </script> <script> let inpBox = document.getElementById('inpBox'), submit = document.getElementById('submit'); submit.onclick = function () { let val = inpBox.value; val = Number(val); if (isNaN(val)) { alert('请输入有效分数！'); return; } if (val >= 90) { alert(`优秀！`); } else if (val >= 80 && val < 90) { alert(`中等`); } else if (val >= 70 && val < 80) { alert(`及格`); } else { alert(`不及格`); } } </script> 工作年限：<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> 汽油型号：<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 = model === 95 ? (price >= 20 ? price * 5.9 : price * 6) : (price >= 30 ? price * 6.95 : price * 7); 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> ~~~