0060.階段作業題講解2（實戰案例） · 原生js-2020

#### 11. ~~~javascript function sum() { let total = 0; for (let i = 0; i < arguments.length; i++) { let item = Number(arguments[i]); if (isNaN(item)) continue; total += item; } return total; } let result = sum(10, 20, 30, '40', 'AA'); console.log(result); ~~~ ~~~javascript let sum = (...args) =>args.reduce((item,cur)=>{ cur = Number(cur); isNaN(cur)?cur=0:null; return item +cur; },0); let result = sum(10,20,30,'40','AA'); console.log(result); ~~~ ~~~ <!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> .box { margin: 20px auto; width: 300px; } .box .btn { padding: 5px 10px; } .box .codeImg { padding: 10px; height: 50px; border: 1px solid #EEE; background: lightcyan; display: none; } .box .codeImg.active { display: block; } </style> </head> <body> <div class="box"> <button id="btn" class="btn">按鈕</button> <div id="codeImg" class="codeImg active"> 二維碼 </div> </div>  <script> /* * 點擊BTN按鈕，控制CODEIMG盒子顯示隱藏（也就是控制是否擁有ACTIVE樣式類，有這個樣式類就顯示，否則就隱藏即可） => 當前盒子顯示則讓其隱藏，當前隱藏則讓其顯示即可 */ let btn = document.getElementById('btn'); let codeImg = document.getElementById('codeImg'); btn.onclick = function () { // 獲取CODEIMG盒子的樣式類 let classText = codeImg.className; if (classText.includes('active')) { // 當前是顯示的，我們讓其隱藏 codeImg.className = 'codeImg'; } else { // 當前是隱藏的，我們讓其顯示 codeImg.className = 'codeImg active'; } }; </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> .tabBox { margin: 20px auto; width: 500px; } .tabBox .tab { position: relative; top: 1px; } .tabBox .tab li { float: left; margin-right: 10px; padding: 0 10px; height: 35px; line-height: 35px; font-size: 14px; border: 1px solid #AAA; background: #f6f7fb; cursor: pointer; } .tabBox .tab li.active { background: #FFF; border-bottom-color: #FFF; } .tabBox div { display: none; padding: 10px; height: 100px; border: 1px solid #AAA; background: #FFF; } .tabBox div.active { display: block; } </style> </head> <body> <section class="tabBox" id="tabBox"> <ul class="tab clearfix"> <li class="active">編程</li> <li>讀書</li> <li>運動</li> </ul> <div class="active">編程可以使我“賺取高薪”</div> <div>讀書可以使我“修身養性”</div> <div>運動可以使我“身體健康”</div> </section>  <script> var tabBox = document.getElementById('tabBox'), navList = tabBox.getElementsByTagName('li'), conList = tabBox.getElementsByTagName('div'); /* 不管鼠標劃過誰，都讓所有的LI和DIV移除選中樣式，再讓當前劃過的有選中樣式 */ function changeTab(n) { // CLEAR ALL for (var i = 0; i < navList.length; i++) { navList[i].className = ''; conList[i].className = ''; } // CURRENT // n:鼠標劃過誰，執行方法的時候，就把它的索引傳遞進來 navList[n].className = 'active'; conList[n].className = 'active'; } for (var i = 0; i < navList.length; i++) { var item = navList[i]; item.myIndex = i; item.onmouseover = function () { changeTab(this.myIndex); }; } </script> </body> </html> ~~~