基于原生 JavaScript 的 Web 实用工具：成绩统计、完数查找与数组去重

分享了三个基于原生 JavaScript 和 HTML/CSS 构建的 Web 小工具。第一个是成绩统计评级系统，支持输入多个成绩并计算有效分数、总分、平均分、最高分、最低分及等级分布。第二个是完数查找工具，允许用户设定起始和结束范围，自动搜索并展示该区间内的完数及其数量。第三个是数组合并去重工具，提供默认测试用例和自定义输入功能，实现两个数组的合并与元素去重。所有示例均为单文件 HTML 结构，包含内联样式与脚本，可直接保存并在浏览器中运行使用。

星落发布于 2026/4/6更新于 2026/4/188 浏览

工具一：成绩统计评级系统

该工具用于统计输入的成绩数据，计算有效成绩数量、总分、平均分、最高分、最低分以及等级分布。

<!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: 0 2px 10px rgba(0,0,,);
        }
         {
            : center;
            : ;
            : ;
        }
         {
            : ;
        }
          {
            : ;
            : ;
            :  solid ;
            : ;
            : ;
        }
          {
            :  ;
            : ;
            : white;
            : none;
            : ;
            : ;
            : pointer;
            : ;
        }
          {
            : ;
        }
         {
            : ;
            : ;
            : ;
            : ;
        }
          {
            : ;
            : ;
        }
         {
            :  ;
            : ;
            : ;
        }
          {
            : ;
        }
    


    
        成绩统计评级系统
        
        
        
            
            统计成绩
        
        
        
        
            统计结果
            有效成绩：
            总分：
            平均分：
            最高分：
            最低分：
            等级统计：

相关免费在线工具

加密/解密文本
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。在线工具，加密/解密文本在线工具，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
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online

// 核心成绩统计函数 analyzeGrades function analyzeGrades(gradeArr) { // 1. 数据清洗：过滤无效成绩 const validGrades = gradeArr.filter(grade => { return typeof grade === 'number' && !isNaN(grade) && grade >= 0 && grade <= 100; }); // 2. 基础统计（兼容空数组） 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); } // 3. 等级统计 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.差++; }); // 4. 返回结果 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.差}人`; }

<!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> 个</div>
            `;
        }

        
         () {
            .(). = ;
            .(). = ;
            .(). = ;
        }
    </script>
</body>
</html>

<!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>
        // 题目要求的 mergeArrays 函数
        function mergeArrays(arr1, arr2) {
            let result = [];
            // 先添加 arr1 的所有元素
            for (let i = 0; i < arr1.length; i++) {
                result.push(arr1[i]);
            }
            // 遍历 arr2 并去重添加
            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().;
            
            
             arr1 = input1 ? input1.().() : [];
             arr2 = input2 ? input2.().() : [];
            
             merged = (arr1, arr2);
            (arr1, arr2, merged);
        }

        
         () {
            .(). = ;
        }
    </script>
</body>
</html>

基于原生 JavaScript 的 Web 实用工具：成绩统计、完数查找与数组去重

工具一：成绩统计评级系统

更多推荐文章

相关免费在线工具

工具二：寻找完数工具

工具三：数组合并去重工具

基于原生 JavaScript 的 Web 实用工具：成绩统计、完数查找与数组去重

工具一：成绩统计评级系统

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

工具二：寻找完数工具

工具三：数组合并去重工具