当前位置：首页 > news >正文

【前端教程】JavaScript 基础实战案例（5-10）

news 2025/8/31 11:38:13

5. 打印1000以内的完数

完数是指一个数恰好等于它的因子之和（不包括自身），例如6=1+2+3。这一概念源自古希腊数学家毕达哥拉斯及其学派的研究。

// 打印1000以内的完数
for (let num = 2; num <= 1000; num++) {let sum = 0;// 寻找因子（优化：只需检查到num/2即可）for (let i = 1; i <= num / 2; i++) {if (num % i === 0) {sum += i;}}// 判断是否为完数if (sum === num) {console.log(num);}
}

扩展解析：

算法优化：原始算法检查到num-1，优化后检查到num/2即可，因为一个数的因子不可能大于它的一半（除了自身）
1000以内的完数只有4个：6、28、496、8128
完数具有许多有趣的数学性质，例如所有偶完数都可以表示为2^(p-1)×(2p-1)的形式，其中2^p-1是梅森素数

6. 学生成绩评价系统

10分满分制，按照每一分一个等级进行评价，根据分数给出相应的反馈：

// 评价学生成绩
function evaluateScore(score) {// 确保输入是有效分数if (isNaN(score) || score < 0 || score > 10) {return "无效分数，请输入0-10之间的数字";}// 使用条件判断进行分级评价if (score === 10) {return "太棒了，完美的成绩！";} else if (score >= 9) {return "非常优秀，继续保持！";} else if (score >= 8) {return "表现很好，值得称赞！";} else if (score >= 7) {return "不错，继续努力！";} else if (score >= 6) {return "刚好及格，还需加油！";} else {return "成绩不理想，需要更加努力学习！";}
}// 使用示例
console.log(evaluateScore(9.5));  // 非常优秀，继续保持！
console.log(evaluateScore(6));    // 刚好及格，还需加油！

扩展解析：

输入验证是关键，确保函数处理边界情况和无效输入
可以扩展为更复杂的评分系统，如将10分制转换为ABCDE等级制
实际应用中，这样的函数常被用于学习管理系统(LMS)中的自动评分反馈模块
评价语言的设计应具有激励性，而非简单的评判

7. 打印5以下的数字

打印从0到4的数字，展示不同循环结构的使用方法：

// 方法1：使用for循环 - 适合已知循环次数的情况
console.log("使用for循环:");
for (let i = 0; i < 5; i++) {console.log(i);
}// 方法2：使用while循环 - 适合循环次数不确定的情况
console.log("\n使用while循环:");
let num = 0;
while (num < 5) {console.log(num);num++;
}// 方法3：使用do-while循环 - 确保至少执行一次
console.log("\n使用do-while循环:");
let count = 0;
do {console.log(count);count++;
} while (count < 5);

扩展解析：

for循环适合已知循环次数的场景，语法紧凑，将初始化、条件和迭代放在一起
while循环适合循环次数不确定，依赖条件判断的场景
do-while循环保证循环体至少执行一次，适用于需要先执行后判断的情况
这三种循环可以相互转换，但选择合适的循环结构能使代码更易读、更高效

8. 打印100以内的奇数，五个数字为一行

控制输出格式，每五个奇数换行显示，展示循环控制和格式化输出的技巧：

// 打印100以内的奇数，五个数字为一行
let count = 0;
let output = ""; // 使用字符串累积输出，减少DOM操作for (let i = 1; i <= 100; i++) {// 判断是否为奇数（i % 2 !== 0 等价于 i % 2 === 1）if (i % 2 !== 0) {output += i + " ";count++;// 每5个数字换行if (count % 5 === 0) {output += "<br>";}}
}// 一次性输出结果，提高性能
document.write(output);

扩展解析：

奇数判断：除了使用i % 2 !== 0，还可以用位运算i & 1，性能更优
性能优化：累积字符串后一次性输出，比频繁的document.write更高效
格式控制：使用计数器count来控制每行显示的数字数量
可扩展性：修改条件可以轻松实现打印偶数、3的倍数等其他需求

9. 根据输入类型展示不同内容

根据用户输入内容的类型（数字或字符串），动态展示不同内容，展示类型判断和条件渲染：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>根据输入类型展示内容</title><script>window.onload = function() {showContent();}function showContent() {var input = prompt("请输入数字或非数字的字符串:\n（如果是数字打印99乘法表，如果是非数字的字符串打印静夜思这首诗）");// 判断输入是否为数字// 注意：空字符串、" "等特殊情况的处理if (input !== null && input.trim() !== "" && !isNaN(input)) {document.write("<h3>99乘法表</h3>");printMultiplicationTable();} else if (input !== null && input.trim() !== "") {// 非数字则展示静夜思document.write("<h3>静夜思</h3>");printPoem();} else {document.write("<p>未输入有效内容</p>");}}// 打印99乘法表function printMultiplicationTable() {let table = "<table border='1'>";for(var j = 1; j <= 9; j++) {table += "<tr>";for(var i = 1; i <= j; i++) {table += `<td>${j}×${i}=${i*j}</td>`;}table += "</tr>";}table += "</table>";document.write(table);}// 打印静夜思function printPoem() {const poem = `作者：(唐)李白<br>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。`;document.write(poem);}</script><style>table {border-collapse: collapse;margin: 20px 0;}td {padding: 5px 10px;}h3 {color: #333;}</style>
</head>
<body>
</body>
</html>

扩展解析：

类型判断：isNaN()函数用于检查值是否为非数字，但需注意空字符串等边缘情况
函数拆分：将打印乘法表和诗歌的功能拆分为独立函数，提高代码可读性和可维护性
代码优化：使用模板字符串(`)使HTML拼接更简洁
UI美化：添加简单的CSS样式提升展示效果
用户体验：处理空输入情况，给出明确反馈

10. 将用户输入内容显示在指定区域

定义函数接收用户输入，并将结果显示在页面指定的div元素中，展示DOM操作基础：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>显示用户输入</title><style>#displayArea {width: 300px;min-height: 100px;margin: 20px auto;padding: 15px;border: 2px solid #4a90e2;border-radius: 5px;background-color: #f8f9fa;font-family: Arial, sans-serif;text-align: center;}.container {text-align: center;margin-top: 50px;}button {padding: 8px 16px;background-color: #4a90e2;color: white;border: none;border-radius: 4px;cursor: pointer;}button:hover {background-color: #3a80d2;}</style><script>window.onload = function() {// 为按钮添加点击事件document.getElementById("inputButton").addEventListener("click", getUserInput);}// 获取用户输入并显示function getUserInput() {var userInput = prompt("请输入你的内容:");// 获取div元素var displayElement = document.getElementById("displayArea");// 处理用户取消输入的情况if (userInput === null) {displayElement.innerHTML = "<em>已取消输入</em>";} // 处理空输入的情况else if (userInput.trim() === "") {displayElement.innerHTML = "<em>输入为空</em>";} // 正常显示输入内容else {displayElement.textContent = userInput;}}</script>
</head>
<body><div class="container"><button id="inputButton">点击输入内容</button><div id="displayArea">等待输入...</div></div>
</body>
</html>