基于HTML、JavaScript与Bootstrap的销售数据统计与展示教程-js教程-PHP中文网

基于HTML、JavaScript与Bootstrap的销售数据统计与展示教程

本教程旨在指导读者如何使用HTML、JavaScript和Bootstrap构建一个交互式网页，用于输入并分析汽车经销商的季度销售数据。文章详细讲解了如何通过JavaScript收集表单数据，并计算每季度总销售额、每位销售代表的最高单季度销售额，以及每位销售代表的平均销售额，最终将结果动态展示在Bootstrap表格中。教程重点阐述了数据处理逻辑，特别是修正了计算销售代表平均销售额时的常见错误，确保数据准确无误地呈现。

1. 概述与技术栈

本教程将引导您创建一个功能完善的销售数据管理页面。用户可以输入三位销售代表的四个季度销售额，系统将自动计算并显示以下统计结果：

每个季度的总销售额。
每位销售代表的最高单季度销售额。
每位销售代表的平均销售额。

我们将主要使用以下技术：

HTML5: 构建页面结构和表单元素。
CSS3 (Bootstrap 3.4.1): 美化页面布局，提供响应式表格样式。
JavaScript (原生JS & jQuery 3.6.4): 处理用户输入、执行数据计算和动态更新页面内容。

2. 页面结构设计 (HTML)

页面的核心是一个Bootstrap表格，用于展示销售数据和计算结果。每个销售代表占据一行，包含四个季度的输入框，以及两个只读的输出框用于显示最高销售额和平均销售额。表格底部增加一行，用于显示每个季度的总销售额。

<!DOCTYPE html>
<html>
<head>
    <title>季度销售数据分析</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        #panel, #flip {
            padding: 5px;
            text-align: center;
            background-color: red;
            border: solid 1px white;
            color: white; /* Added for better visibility */
        }
        #panel {
            padding: 50px;
            display: none;
        }
        #logo {
            text-align: left;
            padding: 50px;
        }
        .center {
            margin: auto;
            width: 60%;
            border: none;
            padding: 10px;
            text-align: center; /* Center the button */
        }
        body {
            background-color: black;
            color: white; /* Default text color for body */
        }
        .table th, .table td {
            color: white; /* Ensure table text is white */
        }
        .table input {
            color: red; /* Input field text color */
        }
    </style>
</head>
<body>
    <div id="logo">@@##@@</div>
    <div id="flip"><span style="font-weight:bold;"> 点击此处查看描述 </span></div>
    <div id="panel">
        <p>作为一家汽车经销商，我们将买家与数千个二手车网站匹配，让您无需搜索。<br>
        从您的第一辆车到第十五辆，我们希望让买卖汽车成为您期待的事情。我们正在采用数据驱动和以用户为中心的方法，创造新的、更好的买卖汽车方式。</p>
    </div>

    <div class="container">
        <h2><strong>季度销售额</strong></h2>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>经销商</th>
                    <th>销售代表</th>
                    <th>第一季度</th>
                    <th>第二季度</th>
                    <th>第三季度</th>
                    <th>第四季度</th>
                    <th>代表最高销售额</th>
                    <th>代表平均销售额</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Carmax in Laurel, MD</td>
                    <td>John Malcavech</td>
                    <td><input type="number" name="s1[]"></td>
                    <td><input type="number" name="s1[]"></td>
                    <td><input type="number" name="s1[]"></td>
                    <td><input type="number" name="s1[]"></td>
                    <td><input type="text" id="high1" readonly></td>
                    <td><input type="text" id="avg1" readonly></td>
                </tr>
                <tr>
                    <td>MERCEDES-BENZ OF SILVER SPRING</td>
                    <td>Moses Aran</td>
                    <td><input type="number" name="s2[]"></td>
                    <td><input type="number" name="s2[]"></td>
                    <td><input type="number" name="number" name="s2[]"></td>
                    <td><input type="number" name="s2[]"></td>
                    <td><input type="text" id="high2" readonly></td>
                    <td><input type="text" id="avg2" readonly></td>
                </tr>
                <tr>
                    <td>Hertz Car Sales Baltimore</td>
                    <td>Rachet C. Clinton</td>
                    <td><input type="number" name="s3[]"></td>
                    <td><input type="number" name="s3[]"></td>
                    <td><input type="number" name="s3[]"></td>
                    <td><input type="number" name="s3[]"></td>
                    <td><input type="text" id="high3" readonly></td>
                    <td><input type="text" id="avg3" readonly></td>
                </tr>
                <tr>
                    <td>总销售额</td>
                    <td>-----</td>
                    <td><input type="text" name="total[]" readonly></td>
                    <td><input type="text" name="total[]" readonly></td>
                    <td><input type="text" name="total[]" readonly></td>
                    <td><input type="text" name="total[]" readonly></td>
                    <td>-----</td>
                    <td>-----</td>
                </tr>
            </tbody>
        </table>
        <div class="center">
            <button type="button" onclick="calculate()">计算</button>
        </div>
    </div>
    <script>
        // JavaScript will be placed here
    </script>
</body>
</html>

登录后复制

HTML结构注意事项：

CDN引用: 确保正确引入jQuery和Bootstrap的CSS/JS文件。这里使用的是Bootstrap 3.4.1。
输入框命名: 季度销售额输入框使用 name="s1[]"、name="s2[]"、name="s3[]" 的形式，方便JavaScript通过 document.getElementsByName() 获取同组数据。
只读输出框: 最高销售额和平均销售额的输出框使用 id="high1"、id="avg1" 等唯一ID，便于JavaScript直接定位并更新值。readonly 属性确保用户无法修改这些计算结果。
计算按钮: 一个简单的 button 元素，通过 onclick="calculate()" 调用JavaScript函数。

3. JavaScript核心逻辑 (calculate函数)

calculate 函数是整个应用的核心，负责数据收集、计算和结果展示。

立即学习“Java免费学习笔记（深入）”；

<script>
    $(document).ready(function() {
        $("#flip").click(function() {
            $("#panel").slideDown("slow");
        });
    });

    function calculate() {
        // 1. 数据收集：将输入框中的销售数据存储到二维数组
        var sales = new Array(3); // 3行，对应3位销售代表
        sales[0] = []; // John Malcavech
        sales[1] = []; // Moses Aran
        sales[2] = []; // Rachet C. Clinton

        // 获取并填充John Malcavech的销售数据
        var s1 = document.getElementsByName('s1[]');
        for (var i = 0; i < s1.length; i++) {
            sales[0].push(s1[i].value);
        }

        // 获取并填充Moses Aran的销售数据
        var s2 = document.getElementsByName('s2[]');
        for (var i = 0; i < s2.length; i++) {
            sales[1].push(s2[i].value);
        }

        // 获取并填充Rachet C. Clinton的销售数据
        var s3 = document.getElementsByName('s3[]');
        for (var i = 0; i < s3.length; i++) {
            sales[2].push(s3[i].value);
        }

        // 2. 计算每季度的总销售额
        var totalSalesPerQuarter = []; // 存储每个季度的总销售额
        var overallTotalSales = 0; // 所有季度的总销售额

        // 遍历列（季度）
        for (var col = 0; col < sales[0].length; ++col) {
            var currentQuarterTotal = 0; // 当前季度的总销售额
            // 遍历行（销售代表）
            for (var row = 0; row < sales.length; ++row) {
                currentQuarterTotal += parseInt(sales[row][col] || 0); // 确保转换为数字，处理空值
                overallTotalSales += parseInt(sales[row][col] || 0);
            }
            totalSalesPerQuarter.push(currentQuarterTotal);
            // 将结果显示在表格底部对应的“总销售额”输入框中
            document.getElementsByName('total[]')[col].value = currentQuarterTotal;
        }
        // console.log("所有季度总销售额: " + overallTotalSales); // 可以用console.log代替alert

        // 3. 找出每位销售代表的最高单季度销售额
        // 遍历行（销售代表）
        for (var row = 0; row < sales.length; ++row) {
            // 初始化当前销售代表的最高销售额为第一个季度的值
            var highestSaleForRep = parseInt(sales[row][0] || 0);
            // 遍历列（季度）
            for (var col = 0; col < sales[0].length; ++col) {
                var currentSale = parseInt(sales[row][col] || 0);
                if (currentSale > highestSaleForRep) {
                    highestSaleForRep = currentSale;
                }
            }
            // 将结果显示在对应的“代表最高销售额”输入框中
            var highId = "high" + (row + 1);
            document.getElementById(highId).value = highestSaleForRep;
        }

        // 4. 计算每位销售代表的平均销售额 (修正后的逻辑)
        // 遍历行（销售代表）
        for (var row = 0; row < sales.length; ++row) {
            var totalSalesForRep = 0; // 当前销售代表的总销售额
            // 遍历列（季度）以累加当前代表的所有季度销售额
            // 关键修正：循环条件应为 sales[0].length (即季度数)
            for (var col = 0; col < sales[0].length; ++col) {
                totalSalesForRep += parseInt(sales[row][col] || 0);
            }

            // 在内层循环结束后，计算平均值
            var numberOfQuarters = sales[0].length; // 获取季度数量，此处为4
            var averageSalesForRep = totalSalesForRep / numberOfQuarters;

            // 将结果显示在对应的“代表平均销售额”输入框中
            var avgId = "avg" + (row + 1); // 构建正确的ID，如 "avg1", "avg2", "avg3"
            document.getElementById(avgId).value = averageSalesForRep.toFixed(2); // 保留两位小数
        }
    }
</script>

登录后复制

JavaScript逻辑详解与修正：

数据收集 (sales 二维数组):
- 通过 document.getElementsByName('sX[]') 获取每个销售代表的所有季度销售额输入框元素集合。
- 遍历这些集合，使用 push() 方法将每个输入框的值添加到对应的 sales 二维数组的子数组中。
- 注意： 输入框的值是字符串，在进行数学运算前必须使用 parseInt() 或 parseFloat() 转换为数字。为了健壮性，建议使用 parseInt(value || 0) 来处理空字符串或非数字输入，将其视为0。
计算每季度总销售额:
- 外层循环遍历 sales[0].length（即季度数），代表按列（季度）进行统计。
- 内层循环遍历 sales.length（即销售代表数），累加当前季度所有代表的销售额。
- 将结果更新到 name="total[]" 的输入框中。
找出每位销售代表的最高单季度销售额:
- 外层循环遍历 sales.length（销售代表数），代表按行（销售代表）进行统计。
- 在每个销售代表的循环开始时，将 highestSaleForRep 初始化为该代表第一个季度的销售额。
- 内层循环遍历 sales[0].length（季度数），比较当前代表每个季度的销售额，更新 highestSaleForRep。
- 通过 id="highX" 定位到对应的只读输入框，更新其值。
计算每位销售代表的平均销售额 (核心修正):
- 原始问题: 原始代码中计算平均值的内层循环条件是 sales.length[0]，这是一个语法错误，sales.length 是数组的长度（行数），它没有索引 [0]。正确的应该是 sales[0].length，表示第一行的长度，也就是季度的数量（列数）。
- 修正后的逻辑:
  - 外层循环 for (var row = 0; row
  - 内层循环 for (var col = 0; col
  - 关键点： totalSalesForRep 的累加必须在内层循环中完成。而平均值的计算 (averageSalesForRep = totalSalesForRep / numberOfQuarters) 必须在内层循环结束后，即外层循环的每次迭代中进行。
  - 将计算出的平均值赋值给正确的元素ID ("avg" + (row + 1))。toFixed(2) 用于将结果格式化为两位小数，提高可读性。
- 错误示例分析（原代码片段）：
```
//Finding the average sale of each representative
for (var row = 0; row < sales.length; ++row) {
    var totalperRep = 0; //reset
    for (var col = 0; col < sales.length[0]; ++col) // 错误：sales.length[0]
    {
        totalperRep += parseInt(sales[row][col]);
        var saleRow = "avg" + (row + 1); // 错误：变量在内层循环中反复声明且赋值
    }
    document.getElementById(saleRow).value = totalperRep; // 错误：这里是总和，不是平均
    var average = totalperRep / sales.length[0]; // 错误：分母
    document.getElementById(average).value = totalperRep; // 错误：用数字作为ID
}
```
  登录后复制
  - sales.length[0]：语法错误，导致无法正确获取列数。
  - var saleRow = "avg"+(row+1); 在内层循环中，每次迭代都会重新声明并赋值，但其作用域是整个外层循环，且其值在内层循环结束时才稳定，但赋值操作应该在内层循环结束后进行。
  - document.getElementById(saleRow).value = totalperRep;：这一行将总和而不是平均值赋给了 saleRow 对应的元素。
  - document.getElementById(average).value = totalperRep;：这里试图将计算出的 average 值（一个数字）作为HTML元素的ID来获取元素，这是不正确的。HTML元素的ID必须是字符串。

4. 样式和UI交互 (CSS & jQuery)

CSS: 主要通过Bootstrap的 table 和 table-bordered 类来美化表格。自定义CSS用于设置背景色、文字颜色以及 panel 和 flip 元素的样式。
jQuery: 用于实现点击 flip 元素时，panel 元素滑动显示或隐藏的动画效果。

5. 完整代码示例

将上述HTML、CSS和JavaScript片段组合起来，即可得到一个完整的、可运行的HTML文件。

<!DOCTYPE html>
<html>
<head>
    <title>季度销售数据分析</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        #panel, #flip {
            padding: 5px;
            text-align: center;
            background-color: red;
            border: solid 1px white;
            color: white;
        }
        #panel {
            padding

登录后复制

以上就是基于HTML、JavaScript与Bootstrap的销售数据统计与展示教程的详细内容，更多请关注php中文网其它相关文章！