以下是一个满足你需求的商品定价计算器的 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. 本地存储:本地存储的数据是字符串类型,在使用之前需要将其转换为数字类型。 [2025-08-17 03:36:12 | AI写代码神器 | 1335点数解答]