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