练习一：综合成绩统计与评级系统
编写一个名为 analyzeGrades 的函数，该函数接收一个包含若干学生成绩（0-100之间的数字）的数组作为参数。请完成以下功能：
数据清洗：过滤掉数组中无效的数据（非数字类型、小于0或大于100的数值），将有效成绩存入一个新数组。
基础统计：计算有效成绩的总分、平均分、最高分和最低分。
等级判定：遍历有效成绩数组，根据分数段判断等级（90-100为“优”，80-89为“良”，60-79为“中”，60以下为“差”），并统计各等级的人数。
结果返回：返回一个对象，包含有效成绩数组、总分、平均分、最高分、最低分以及等级统计对象。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>综合成绩统计与评级系统</title> <style> *{margin:0;padding:0;box-sizing:border-box;font-family:"微软雅黑",sans-serif;}body{max-width:800px;margin:50px auto;padding:0 20px;background-color:#f5f5f5;}.container{background:white;padding:30px;border-radius:10px;box-shadow:0 2px 10pxrgba(0,0,0,0.1);}h1{text-align:center;color:#333;margin-bottom:30px;}.input-area{margin-bottom:20px;}textarea{width:100%;height:100px;padding:10px;border:1px solid #ddd;border-radius:5px;resize:none;font-size:16px;}button{display:block;width:100%;padding:12px;background-color:#4CAF50;color:white;border:none;border-radius:5px;font-size:16px;cursor:pointer;}button:hover{background-color:#45a049;}.result-area{margin-top:30px;padding:20px;background-color:#f9f9f9;border-radius:5px;}.result-item{margin-bottom:10px;font-size:16px;}.result-item span{font-weight:bold;color:#333;}</style> </head> <body> <div class="container"> <h1>综合成绩统计与评级系统</h1> <div class="input-area"> <textarea id="gradeInput" placeholder="请输入学生成绩（用逗号分隔，例如：95,88,72,55,80）"></textarea> </div> <button id="analyzeBtn">分析成绩</button> <div id="result" class="result-area"> <div class="result-item">有效成绩：<span id="validGrades"></span></div> <div class="result-item">总分：<span id="totalScore"></span></div> <div class="result-item">平均分：<span id="averageScore"></span></div> <div class="result-item">最高分：<span id="maxScore"></span></div> <div class="result-item">最低分：<span id="minScore"></span></div> <div class="result-item">优：<span id="gradeExcellent"></span> 人</div> <div class="result-item">良：<span id="gradeGood"></span> 人</div> <div class="result-item">中：<span id="gradeMedium"></span> 人</div> <div class="result-item">差：<span id="gradePoor"></span> 人</div> </div> </div> <script> function analyzeGrades(grades){// 1. 数据清洗 const validGrades = grades.filter(grade => typeof grade ==='number'&& !isNaN(grade)&& grade >= 0 && grade <= 100);// 2. 基础统计 let totalScore = 0;let averageScore = 0;let maxScore = 0;let minScore = 0;const validCount = validGrades.length;if (validCount > 0){totalScore = validGrades.reduce((sum,score)=> sum + score,0);averageScore =(totalScore / validCount).toFixed(2)* 1;maxScore = Math.max(...validGrades);minScore = Math.min(...validGrades);}// 3. 等级判定 const gradeStats ={优:0,良:0,中:0,差:0}; validGrades.forEach(score =>{if(score >= 90)gradeStats.优++;else if(score >= 80)gradeStats.良++;else if(score >= 60)gradeStats.中++;else gradeStats.差++;});return{validGrades,totalScore,averageScore,maxScore,minScore,gradeStats};}// 4. 绑定按钮事件 document.getElementById('analyzeBtn').addEventListener('click', function(){const inputStr = document.getElementById('gradeInput').value.trim();if (!inputStr){alert('请输入成绩数据！');return;}// 解析输入（处理逗号和空格） const gradeArray = inputStr.split(',').map(item =>Number(item.trim()));const result =analyzeGrades(gradeArray);// 填充结果 document.getElementById('validGrades').textContent = result.validGrades.join(', ');document.getElementById('totalScore').textContent = result.totalScore;document.getElementById('averageScore').textContent = result.averageScore;document.getElementById('maxScore').textContent = result.maxScore;document.getElementById('minScore').textContent = result.minScore;document.getElementById('gradeExcellent').textContent = result.gradeStats.优;document.getElementById('gradeGood').textContent = result.gradeStats.良;document.getElementById('gradeMedium').textContent = result.gradeStats.中;document.getElementById('gradePoor').textContent = result.gradeStats.差;});</script> </body> </html>运行呈现：
练习二：寻找“完数”
题目描述：
一个数如果恰好等于它的所有真因子（即除了自身以外的约数）之和，这个数就被称为“完数”。例如：6 = 1 + 2 + 3，所以6是完数。
请编写一个函数 findPerfectNumbers(start, end)，找出并返回 start 到 end 范围内（包含两头）所有的完数组成的数组。
要求：
函数接收两个数字参数 start 和 end。
使用嵌套循环：外层循环遍历范围内的每一个数字，内层循环寻找该数字的因子。
如果该数是完数，将其存入结果数组。
返回该数组。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>寻找完数工具</title> <style> *{margin:0;padding:0;box-sizing:border-box;font-family:"微软雅黑",sans-serif;}body{max-width:600px;margin:50px auto;padding:0 20px;background-color:#f5f5f5;}.container{background:white;padding:30px;border-radius:10px;box-shadow:0 2px 10pxrgba(0,0,0,0.1);}h1{text-align:center;color:#333;margin-bottom:30px;font-size:24px;}.input-group{margin-bottom:20px;}label{display:block;margin-bottom:8px;color:#555;font-size:16px;}input{width:100%;padding:10px;border:1px solid #ddd;border-radius:5px;font-size:16px;}button{width:100%;padding:12px;background-color:#28a745;color:white;border:none;border-radius:5px;cursor:pointer;font-size:18px;transition:background-color 0.3s;margin-top:10px;}button:hover{background-color:#218838;}.result-area{margin-top:30px;padding:20px;background-color:#f8f9fa;border-radius:5px;display:none;}.result-area h2{color:#333;margin-bottom:15px;font-size:18px;}.result-text{font-size:16px;line-height:1.6;color:#555;}.result-text span{font-weight:bold;color:#28a745;}.tip{color:#999;font-size:14px;margin-top:10px;text-align:center;}.error{color:#dc3545;font-size:14px;margin-top:5px;display:none;}</style> </head> <body> <div class="container"> <h1>寻找完数工具</h1> <div class="input-group"> <label for="startNum">范围起始值：</label> <input type="number" id="startNum" placeholder="请输入起始数字(如1)"> <div class="error" id="startError">请输入有效的正整数</div> </div> <div class="input-group"> <label for="endNum">范围结束值：</label> <input type="number" id="endNum" placeholder="请输入大于等于起始值的正整数(如100)"> <div class="error" id="endError">请输入大于等于起始值的正整数</div> </div> <button id="findBtn">查找完数</button> <p class="tip">提示：完数是指等于自身所有真因子之和的数(如6=1+2+3)</p> <div class="result-area" id="resultArea"> <h2>查找结果</h2> <div class="result-text" id="resultText"></div> </div> </div> <script> function findPerfectNumbers(start, end){const perfectNumbers = [];for(let num = start;num <= end;num++){if(num < 2)continue;let sumOfFactors = 0;for(let i = 1;i <= num / 2;i++){if (num % i === 0){sumOfFactors += i;}}if (sumOfFactors === num){perfectNumbers.push(num);}}return perfectNumbers;}const startNumInput = document.getElementById('startNum');const endNumInput = document.getElementById('endNum');const findBtn = document.getElementById('findBtn');const resultArea = document.getElementById('resultArea');const resultText = document.getElementById('resultText');const startError = document.getElementById('startError');const endError = document.getElementById('endError');function hideAllErrors(){startError.style.display ='none';endError.style.display ='none';}findBtn.addEventListener('click', () =>{hideAllErrors();resultArea.style.display ='none';const start =Number(startNumInput.value.trim());const end =Number(endNumInput.value.trim());if (isNaN(start) || start < 1){startError.style.display ='block';return;}if (isNaN(end) || end < start){endError.style.display ='block';return;}const perfectNumbers =findPerfectNumbers(start,end);let resultHtml ='';if (perfectNumbers.length === 0){resultHtml = `在 <span>${start}</span> 到 <span>${end}</span> 范围内未找到完数`;}else{resultHtml = `在 <span>${start}</span> 到 <span>${end}</span> 范围找到的完数有：<br>`;perfectNumbers.forEach(num =>{let factors = [];for(let i = 1;i <= num / 2;i++){if(num % i === 0)factors.push(i);}resultHtml += `${num}(${factors.join(' + ')})<br>`;});}resultText.innerHTML = resultHtml;resultArea.style.display ='block';});</script> </body> </html>运行呈现：
练习三：数组合并与去重
题目描述：
编写一个函数 mergeArrays(arr1, arr2)，将两个数组合并成一个新的数组，并去除其中重复的数字（如果两个数组中有相同的数字，新数组中只保留一个）。
要求：
函数接收两个数组参数 arr1 和 arr2。
创建一个空数组 result 用于存放结果。
先将 arr1 中的所有元素添加到 result 中。
再遍历 arr2，对于 arr2 中的每一个元素，检查它在 arr1 或 result 中是否已经存在。
如果不存在，才将其添加到 result 中。
返回 result。
示例：
输入：mergeArrays([1, 2, 3], [2, 3, 4, 5])
输出：[1, 2, 3, 4, 5]
在这里<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组合并与去重工具</title> <style> *{margin:0;padding:0;box-sizing:border-box;font-family:"微软雅黑",sans-serif;}body{max-width:700px;margin:50px auto;padding:0 20px;background-color:#f5f5f5;}.container{background:white;padding:30px;border-radius:10px;box-shadow:0 2px 10pxrgba(0,0,0,0.1);}h1{text-align:center;color:#333;margin-bottom:30px;font-size:24px;}.input-group{margin-bottom:20px;}label{display:block;margin-bottom:8px;color:#555;font-weight:500;font-size:16px;}textarea{width:100%;height:80px;padding:10px;border:1px solid #ddd;border-radius:5px;resize:none;font-size:16px;}button{width:100%;padding:12px;background-color:#007bff;color:white;border:none;border-radius:5px;cursor:pointer;font-size:18px;transition:background-color 0.3s;margin-top:10px;}button:hover{background-color:#0056b3;}.result-area{margin-top:30px;padding:20px;background-color:#f8f9fa;border-radius:5px;display:none;}.result-area h2{color:#333;margin-bottom:15px;font-size:18px;}.result-text{font-size:16px;color:#555;line-height:1.6;padding:10px;background-color:white;border-radius:5px;border:1px solid #eee;}.result-text span{font-weight:bold;color:#007bff;}.tip{color:#999;font-size:14px;margin-top:10px;text-align:center;}.error{color:#dc3545;font-size:14px;margin-top:5px;display:none;}</style> </head> <body> <div class="container"> <h1>数组合并与去重工具</h1> <div class="input-group"> <label for="arr1Input">第一个数组（元素用英文逗号分隔）：</label> <textarea id="arr1Input" placeholder="请输入有效的数组元素（用英文逗号分隔）"></textarea> <div class="error" id="arr1Error">请输入有效的数组元素（用英文逗号分隔）</div> </div> <div class="input-group"> <label for="arr2Input">第二个数组（元素用英文逗号分隔）：</label> <textarea id="arr2Input" placeholder="请输入有效的数组元素（用英文逗号分隔）"></textarea> <div class="error" id="arr2Error">请输入有效的数组元素（用英文逗号分隔）</div> </div> <button id="mergeBtn">合并并去重</button> <p class="tip">提示：支持数字、字符串等元素，重复元素仅保留一个，保留原顺序</p> <div class="result-area" id="resultArea"> <h2>合并去重结果</h2> <div class="result-text" id="resultText"></div> </div> </div> <script> function mergeArrays(arr1, arr2){const result = [];// 先加入第一个数组的所有元素 for(let i = 0;i < arr1.length;i++){result.push(arr1[i]);}// 再加入第二个数组中不存在于结果的元素 for(let j = 0;j < arr2.length;j++){let currentElement = arr2[j];let isExist = false;for(let k = 0;k < result.length;k++){if (result[k] === currentElement){isExist = true;break;}}if (!isExist){result.push(currentElement);}}return result;}const arr1Input = document.getElementById('arr1Input');const arr2Input = document.getElementById('arr2Input');const mergeBtn = document.getElementById('mergeBtn');const resultArea = document.getElementById('resultArea');const resultText = document.getElementById('resultText');const arr1Error = document.getElementById('arr1Error');const arr2Error = document.getElementById('arr2Error');function hideAllErrors(){arr1Error.style.display ='none';arr2Error.style.display ='none';}function parseArrayInput(inputStr){if(!inputStr.trim())return [];return inputStr.split(',').map(item =>{const trimmed = item.trim();returnisNaN(Number(trimmed))?trimmed:Number(trimmed);}).filter(item => item !=='');}mergeBtn.addEventListener('click', () =>{hideAllErrors();resultArea.style.display ='none';const arr1Str = arr1Input.value.trim();const arr2Str = arr2Input.value.trim();if (!arr1Str || arr1Str.length === 0){arr1Error.style.display ='block';return;}if (!arr2Str || arr2Str.length === 0){arr2Error.style.display ='block';return;}const arr1 =parseArrayInput(arr1Str);const arr2 =parseArrayInput(arr2Str);const mergedArray =mergeArrays(arr1,arr2);let resultHtml = ` 第一个数组：<span>${arr1.join(', ')}</span><br> 第二个数组：<span>${arr2.join(', ')}</span><br> 合并去重后：<span>${mergedArray.join(', ')}</span> `;resultText.innerHTML = resultHtml;resultArea.style.display ='block';});</script> </body> </html>插入代码片呈现：
