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> ~~~