跳到主要内容
三个原生 JS 小工具：成绩评级、完数查找和数组合并去重 | 极客日志
JavaScript 算法
三个原生 JS 小工具：成绩评级、完数查找和数组合并去重 实现了三个可直接在浏览器中运行的原生 JavaScript 工具：成绩统计评级系统支持逗号分隔输入，自动过滤不合法分数，计算总分、平均分、最高最低分及等级分布；寻找完数工具在用户指定范围内查找真因子之和等于自身的所有完数，默认上限 10000；数组合并去重工具将两数组合并并去除重复元素，提供默认测试用例和自定义输入。所有代码均为完整可运行的 HTML 页面，无外部依赖。
平常写脚本跑数据，懒得开 IDE 的时候，直接在浏览器里搞个页面更省事。下面这三个小工具都是单 HTML 文件，带着样式和逻辑，打开就能用，没引入任何外部依赖。
成绩统计评级
输入一串用逗号分开的分数，它会先过滤掉不合法的值（非数字、小于 0 或大于 100），然后算总分、平均分、最高最低分，再按 90-优、80-良、60-中、其余差做个等级统计。空数组的情况也处理了，不会报错。
需要注意，这里假设输入是纯数字列表，如果混进了非数字字符，Number() 会返回 NaN，过滤阶段就直接踢掉了，不会影响统计。
<!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;
}
.container {
max-width : 800px ;
margin : 50px auto;
padding : 20px ;
border : 1px solid #eee ;
border-radius : 8px ;
box-shadow : 相关免费在线工具 加密/解密文本 使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
Gemini 图片去水印 基于开源反向 Alpha 混合算法去除 Gemini/Nano Banana 图片水印，支持批量处理与下载。 在线工具，Gemini 图片去水印在线工具，online
Keycode 信息 查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码 JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化 使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆 Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
0
2px
10px
rgba
0
0
0
0.1
h1
text-align
color
#333
margin-bottom
30px
.input-area
margin-bottom
20px
.input-area
input
width
60%
padding
10px
border
1px
#ccc
border-radius
4px
font-size
16px
.input-area
button
padding
10px
20px
background-color
#409eff
color
border
border-radius
4px
font-size
16px
cursor
margin-left
10px
.input-area
button
:hover
background-color
#3a8ee6
.result-area
margin-top
30px
padding
20px
background-color
#f8f9fa
border-radius
4px
.result-area
h3
color
#333
margin-bottom
15px
.result-item
margin
8px
0
line-height
1.8
color
#666
.result-item
strong
color
#333
</style >
</head >
<body >
<div class ="container" >
<h1 >
</h1 >
<div class ="input-area" >
<input type ="text" id ="gradeInput" placeholder ="请输入成绩（多个成绩用逗号分隔，例如：85,92,59）" >
<button onclick ="handleAnalyze()" >
</button >
</div >
<div class ="result-area" id ="resultArea" style ="display:none;" >
<h3 >
</h3 >
<div class ="result-item" >
<strong >
</strong >
<span id ="validGrades" >
</span >
</div >
<div class ="result-item" >
<strong >
</strong >
<span id ="totalScore" >
</span >
</div >
<div class ="result-item" >
<strong >
</strong >
<span id ="averageScore" >
</span >
</div >
<div class ="result-item" >
<strong >
</strong >
<span id ="maxScore" >
</span >
</div >
<div class ="result-item" >
<strong >
</strong >
<span id ="minScore" >
</span >
</div >
<div class ="result-item" >
<strong >
</strong >
<span id ="gradeCount" >
</span >
</div >
</div >
</div >
<script >
function analyzeGrades (gradeArr ) {
const validGrades = gradeArr.filter (grade =>return typeof grade === 'number' && !isNaN (grade) && grade >= 0 && grade <= 100 ;
});
let totalScore = 0 ;
let averageScore = 0 ;
let maxScore = 0 ;
let minScore = 100 ;
if (validGrades.length > 0 ) {
totalScore = validGrades.reduce ((sum, grade ) => sum + grade, 0 );
averageScore = Number ((totalScore / validGrades.length ).toFixed (2 ));
maxScore = Math .max (...validGrades);
minScore = Math .min (...validGrades);
}
const gradeCount = { 优：0 , 良：0 , 中：0 , 差：0 };
validGrades.forEach (grade =>if (grade >= 90 ) gradeCount.优++;
else if (grade >= 80 ) gradeCount.良++;
else if (grade >= 60 ) gradeCount.中++;
else gradeCount.差++;
});
return { validGrades, totalScore, averageScore, maxScore, minScore, gradeCount };
}
function handleAnalyze (const inputVal = document .getElementById ('gradeInput' ).value .trim ();
if (!inputVal) {
alert ('请输入成绩！' );
return ;
}
const gradeArr = inputVal.split (',' ).map (item =>Number (item.trim ()));
const result = analyzeGrades (gradeArr);
document .getElementById ('resultArea' ).style .display = 'block' ;
document .getElementById ('validGrades' ).textContent = result.validGrades .join ('、' ) || '无' ;
document .getElementById ('totalScore' ).textContent = result.totalScore ;
document .getElementById ('averageScore' ).textContent = result.averageScore ;
document .getElementById ('maxScore' ).textContent = result.validGrades .length > 0 ? result.maxScore : '无' ;
document .getElementById ('minScore' ).textContent = result.validGrades .length > 0 ? result.minScore : '无' ;
document .getElementById ('gradeCount' ).textContent = `优：${result.gradeCount.优} 人，良：${result.gradeCount.良} 人，中：${result.gradeCount.中} 人，差：${result.gradeCount.差} 人` ;
}
</script >
</body >
</html >
寻找完数 完数的定义是一个正整数恰好等于它的所有真因子（除了自身以外的约数）之和，比如 6=1+2+3。这个工具让你输入起止范围，然后列出其中所有的完数。
默认是从 1 到 10000，范围别设太大——因为是双层循环直接硬算的，上限到几十万就会明显卡顿，浏览器可能会弹'脚本无响应'。如果真需要大范围，可以考虑优化成只检查到平方根的因子，但这个小工具本来就是为了随手查一下，就没加那些。
<!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 : "Microsoft YaHei" , Arial, sans-serif;
}
body {
background : #f8f9fa ;
padding : 2rem ;
}
.container {
max-width : 600px ;
margin : 0 auto;
background : #fff ;
padding : 2rem ;
border-radius : 10px ;
box-shadow : 0 2px 10px rgba (0 ,0 ,0 ,0.1 );
}
h1 {
text-align : center;
color : #333 ;
margin-bottom : 2rem ;
}
.input-group {
margin-bottom : 1.5rem ;
}
label {
display : block;
margin-bottom : 0.5rem ;
color : #555 ;
font-weight : 500 ;
}
input {
width : 100% ;
padding : 0.8rem ;
border : 1px solid #ddd ;
border-radius : 6px ;
font-size : 1rem ;
}
.btn-group {
display : flex;
gap : 1rem ;
margin-bottom : 2rem ;
}
button {
flex : 1 ;
padding : 0.8rem ;
border : none;
border-radius : 6px ;
font-size : 1rem ;
cursor : pointer;
transition : background 0.3s ;
}
.btn-find {
background : #28a745 ;
color : #fff ;
}
.btn-find :hover {
background : #218838 ;
}
.btn-reset {
background : #6c757d ;
color : #fff ;
}
.btn-reset :hover {
background : #5a6268 ;
}
.result {
border-top : 1px solid #eee ;
padding-top : 2rem ;
}
.result-item {
margin-bottom : 1rem ;
line-height : 1.8 ;
color : #333 ;
}
.result-item strong {
color : #28a745 ;
margin-right : 0.5rem ;
}
pre {
background : #f5f5f5 ;
padding : 1rem ;
border-radius : 6px ;
margin-top : 0.5rem ;
overflow-x : auto;
}
</style >
</head >
<body >
<div class ="container" >
<h1 > 寻找'完数'工具</h1 >
<div class ="input-group" >
<label > 起始范围：</label >
<input type ="number" id ="startInput" placeholder ="输入起始数字" value ="1" >
</div >
<div class ="input-group" >
<label > 结束范围：</label >
<input type ="number" id ="endInput" placeholder ="输入结束数字" value ="10000" >
</div >
<div class ="btn-group" >
<button class ="btn-find" onclick ="findPerfectNumbers()" > 寻找完数</button >
<button class ="btn-reset" onclick ="resetInput()" > 重置输入</button >
</div >
<div class ="result" id ="resultBox" > </div >
</div >
<script >
function findPerfectNumbers (const start = parseInt (document .getElementById ('startInput' ).value );
const end = parseInt (document .getElementById ('endInput' ).value );
const result = [];
for (let num = start; num <= end; num++) {
let sum = 0 ;
for (let i = 1 ; i < num; i++) {
if (num % i === 0 ) {
sum += i;
}
}
if (sum === num) {
result.push (num);
}
}
const resultBox = document .getElementById ('resultBox' );
resultBox.innerHTML = `
<div>
<strong>在范围 [${start} , ${end} ] 内找到的完数：</strong>
<pre>${JSON .stringify(result, null , 2 )} </pre>
</div>
<div><strong>完数总数：</strong> ;
}
</script >
</body >
</html >
数组合并去重 把两个数组合并，同时去掉重复值。实现上就是先塞第一个数组，再遍历第二个，用 includes 判断是否已存在，不在才 push。这种方式代码短，但如果数组很大的话性能会掉——毕竟每次 includes 都是 O(n) 的扫描。真要处理海量数据还是换成 Set 去重更合理，但这里就照着题目要求写的最直观的版本。
页面上给了两组输入框，可以自己填数组，也能直接点'运行默认测试'跑预置的 [1,2,3] 和 [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 >
body {
font-family : Arial, sans-serif;
max-width : 600px ;
margin : 2rem auto;
padding : 0 1rem ;
}
.container {
background : #f5f5f5 ;
padding : 2rem ;
border-radius : 8px ;
box-shadow : 0 2px 4px rgba (0 ,0 ,0 ,0.1 );
}
.input-group {
margin : 1rem 0 ;
}
input {
width : 100% ;
padding : 0.8rem ;
margin-top : 0.5rem ;
border : 1px solid #ddd ;
border-radius : 4px ;
box-sizing : border-box;
}
button {
background : #007bff ;
color : white;
border : none;
padding : 0.8rem 1.5rem ;
border-radius : 4px ;
cursor : pointer;
margin-right : 1rem ;
}
button :hover {
background : #0056b3 ;
}
.result {
margin-top : 1.5rem ;
padding : 1rem ;
background : #fff ;
border-radius : 4px ;
border : 1px solid #ddd ;
}
</style >
</head >
<body >
<div class ="container" >
<h1 > 数组合并与去重工具</h1 >
<div class ="input-group" >
<label > 数组 1 (用逗号分隔，例如：1,2,3)</label >
<input type ="text" id ="arr1Input" placeholder ="请输入数组 1" >
</div >
<div class ="input-group" >
<label > 数组 2 (用逗号分隔，例如：2,3,4,5)</label >
<input type ="text" id ="arr2Input" placeholder ="请输入数组 2" >
</div >
<button onclick ="runCustomTest()" > 合并并去重</button >
<button onclick ="runDefaultTest()" > 运行默认测试</button >
<div class ="result" id ="result" > </div >
</div >
<script >
function mergeArrays (arr1, arr2 ) {
let result = [];
for (let i = 0 ; i < arr1.length ; i++) {
result.push (arr1[i]);
}
for (let i = 0 ; i < arr2.length ; i++) {
let current = arr2[i];
if (!result.includes (current)) {
result.push (current);
}
}
return result;
}
function runDefaultTest (const arr1 = [1 , 2 , 3 ];
const arr2 = [2 , 3 , 4 , 5 ];
const merged = mergeArrays (arr1, arr2);
showResult (arr1, arr2, merged);
}
function runCustomTest (const input1 = document .getElementById ('arr1Input' ).value ;
const input2 = document .getElementById ( </script >
</body >
</html >
三个工具的完整代码都可以直接复制保存为 .html 文件，双击就能在浏览器里跑。没依赖、不请求网络，适合临时用一下或者练习原生 JS 时参考。
${result.length}
function
resetInput
document
getElementById
'startInput'
value
1
document
getElementById
'endInput'
value
10000
document
getElementById
'resultBox'
innerHTML
''
'arr2Input'
value
const
split
','
map
Number
const
split
','
map
Number
const
mergeArrays
showResult
function
showResult
arr1, arr2, merged
document
getElementById
'result'
innerHTML
`
<p>输入：mergeArrays([${arr1} ], [${arr2} ])</p>
<p>输出：[${merged} ]</p>
`
