练习一：综合成绩统计与评级系统
编写一个名为 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 10px rgba(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 10px rgba(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; color: #555; line-height: 1.6; } .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 10px rgba(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; font-weight: 500; } 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(); return isNaN(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(); const arr1 = parseArrayInput(arr1Str); const arr2 = parseArrayInput(arr2Str); // 输入校验 if (arr1Str && arr1.length === 0) { arr1Error.style.display = 'block'; return; } if (arr2Str && arr2.length === 0) { arr2Error.style.display = 'block'; return; } // 合并去重 const mergedArray = mergeArrays(arr1, arr2); let resultHtml = `第一个数组：<span>${arr1.join(', ')}</span><br>`; resultHtml += `第二个数组：<span>${arr2.join(', ')}</span><br>`; resultHtml += `合并后：<span>${mergedArray.join(', ')}</span>`; resultText.innerHTML = resultHtml; resultArea.style.display = 'block'; }); </script> </body> </html>
