本教程旨在指导读者如何使用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
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
