本教程旨在指导读者如何使用HTML、JavaScript和Bootstrap构建一个交互式网页，用于输入并分析汽车经销商的季度销售数据。文章详细讲解了如何通过JavaScript收集表单数据，并计算每季度总销售额、每位销售代表的最高单季度销售额，以及每位销售代表的平均销售额，最终将结果动态展示在Bootstrap表格中。教程重点阐述了数据处理逻辑，特别是修正了计算销售代表平均销售额时的常见错误，确保数据准确无误地呈现。
1. 概述与技术栈
本教程将引导您创建一个功能完善的销售数据管理页面。用户可以输入三位销售代表的四个季度销售额，系统将自动计算并显示以下统计结果：
每个季度的总销售额。每位销售代表的最高单季度销售额。每位销售代表的平均销售额。
我们将主要使用以下技术：
HTML5: 构建页面结构和表单元素。CSS3 (Bootstrap 3.4.1): 美化页面布局，提供响应式表格样式。JavaScript (原生JS & jQuery 3.6.4): 处理用户输入、执行数据计算和动态更新页面内容。
2. 页面结构设计 (HTML)
页面的核心是一个Bootstrap表格，用于展示销售数据和计算结果。每个销售代表占据一行，包含四个季度的输入框，以及两个只读的输出框用于显示最高销售额和平均销售额。表格底部增加一行，用于显示每个季度的总销售额。
季度销售数据分析 #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 */ }@@##@@点击此处查看描述作为一家汽车经销商，我们将买家与数千个二手车网站匹配，让您无需搜索。
从您的第一辆车到第十五辆，我们希望让买卖汽车成为您期待的事情。我们正在采用数据驱动和以用户为中心的方法，创造新的、更好的买卖汽车方式。// JavaScript will be placed here季度销售额
经销商 销售代表 第一季度 第二季度 第三季度 第四季度 代表最高销售额 代表平均销售额 Carmax in Laurel, MD John Malcavech MERCEDES-BENZ OF SILVER SPRING Moses Aran Hertz Car Sales Baltimore Rachet C. Clinton 总销售额 ----- ----- -----
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免费学习笔记（深入）”；
$(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 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); // 保留两位小数 } }
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 representativefor (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文件。
季度销售数据分析 #panel, #flip { padding: 5px; text-align: center; background-color: red; border: solid 1px white; color: white; } #panel { padding
以上就是基于HTML、JavaScript与Bootstrap的销售数据统计与展示教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1514209.html
微信扫一扫 
支付宝扫一扫 
