超实用！带最低单价保护的商品定价计算器 HTML 代码揭秘

以下是一个满足你需求的商品定价计算器的 HTML 代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>商品定价计算器</title> </head> <body> <label for="costPrice">商品采购成本（元/1000g）：</label> <input type="number" id="costPrice" step="0.01" oninput="calculatePrice()"> <br> <label for="minProfit">最低利润（元）：</label> <input type="number" id="minProfit" step="0.01" oninput="calculatePrice()"> <br> <label for="shippingFee">运费（元）：</label> <input type="number" id="shippingFee" step="0.01" oninput="calculatePrice()"> <br> <label for="shopDiscount">店铺折扣（%）：</label> <input type="number" id="shopDiscount" step="0.01" oninput="calculatePrice()"> <br> <label for="platformDiscount">平台让利（%）：</label> <input type="number" id="platformDiscount" step="0.01" oninput="calculatePrice()"> <br> <label for="salesWeight">销售重量（g）：</label> <input type="number" id="salesWeight" step="1" oninput="calculatePrice()"> <br> <p>销售定价：<span id="salesPrice"></span> 元</p> <script> // 从本地存储中获取数据 function getStoredValue(key, defaultValue) { const storedValue = localStorage.getItem(key); return storedValue ? parseFloat(storedValue) : defaultValue; } // 将数据保存到本地存储 function saveToLocalStorage(key, value) { localStorage.setItem(key, value); } // 初始化输入框的值 document.getElementById('costPrice').value = getStoredValue('costPrice', 19.9); document.getElementById('minProfit').value = getStoredValue('minProfit', 5); document.getElementById('shippingFee').value = getStoredValue('shippingFee', 3); document.getElementById('shopDiscount').value = getStoredValue('shopDiscount', 95); document.getElementById('platformDiscount').value = getStoredValue('platformDiscount', 15); document.getElementById('salesWeight').value = getStoredValue('salesWeight', 1000); // 计算销售定价的函数 function calculatePrice() { // 获取输入的值 const costPrice = parseFloat(document.getElementById('costPrice').value); const minProfit = parseFloat(document.getElementById('minProfit').value); const shippingFee = parseFloat(document.getElementById('shippingFee').value); const shopDiscount = parseFloat(document.getElementById('shopDiscount').value) / 100; const platformDiscount = parseFloat(document.getElementById('platformDiscount').value) / 100; const salesWeight = parseFloat(document.getElementById('salesWeight').value); // 保存输入的值到本地存储 saveToLocalStorage('costPrice', costPrice); saveToLocalStorage('minProfit', minProfit); saveToLocalStorage('shippingFee', shippingFee); saveToLocalStorage('shopDiscount', shopDiscount * 100); saveToLocalStorage('platformDiscount', platformDiscount * 100); saveToLocalStorage('salesWeight', salesWeight); // 计算成本 const totalCost = costPrice * (salesWeight / 1000) + shippingFee; // 计算满足3倍利润的折后价格 const targetProfit = totalCost * 3; const targetFinalPrice = totalCost + targetProfit; // 反推销售定价 const salesPrice = targetFinalPrice / (shopDiscount * (1 - platformDiscount)); // 检查是否满足最低利润要求 const minSalesPrice = (totalCost + minProfit) / (shopDiscount * (1 - platformDiscount)); const finalSalesPrice = Math.max(salesPrice, minSalesPrice); // 显示结果 document.getElementById('salesPrice').textContent = finalSalesPrice.toFixed(2); } // 页面加载时计算一次价格 calculatePrice(); </script> </body> </html> ``` 代码说明： 1. HTML 部分：创建了多个输入框用于动态输入商品采购成本、最低利润、运费、店铺折扣、平台让利和销售重量。当输入框的值发生变化时，会触发 `calculatePrice` 函数进行计算。 2. JavaScript 部分： - `getStoredValue` 函数用于从本地存储中获取数据，如果没有存储数据则使用默认值。 - `saveToLocalStorage` 函数用于将输入的值保存到本地存储。 - `calculatePrice` 函数用于计算销售定价，首先获取输入的值并保存到本地存储，然后计算总成本，接着计算满足 3 倍利润的折后价格，反推销售定价，检查是否满足最低利润要求，最后显示结果。需要小心的地方：我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 输入验证：确保用户输入的是有效的数字，避免输入非数字字符导致计算错误。 2. 折扣计算：折扣的输入是百分比，需要将其转换为小数进行计算，注意小数点的处理。 3. 本地存储：本地存储的数据是字符串类型，在使用之前需要将其转换为数字类型。 ######[AI写代码神器 | 1335点数解答 | 2025-08-17 03:36:12]

服务商

更多选项

快捷项

自定义