一、场景与目标
目标概述
在电商与SaaS场景中，价格计算需要根据用户选择的支付周期动态调整，以实现更灵活的订阅策略。本文将围绕 JavaScript价格计算器实操，展示如何按不同支付周期进行动态定价，并在价格发生变动时通过弹窗提示提升用户体验。
通过本节可以快速掌握前端价格计算的核心要点，包括如何定义价格维度、如何将支付周期映射到价格、以及如何在用户交互时提供明确的反馈机制。
二、价格模型与支付周期
支付周期类型
常见的支付周期包括按月、按季、按年三种形式。对于不同周期，通常会设定<基准价格、折扣规则和最终价格的计算逻辑，以实现动态定价的效果。
在实现中，可以通过一个简单的价格数据结构来保存各周期的基准价和折扣值，从而在用户切换周期时快速重新计算价格。
三、核心算法：价格计算与边界处理
价格计算函数设计
核心思路是：周期 -> 基准价，再结合 折扣规则 得到 最终价格。需要处理的边界包括：未知周期时的兜底价、负价校验以及价格最小值保护。
通过清晰的函数分离，可以将数据定义、计算逻辑、以及边界处理分离，提升代码的可维护性与可测试性。
const PRICE_TIERS = {monthly: 19,quarterly: 49,yearly: 179
};const DISCOUNTS = {monthly: 0,quarterly: 5, // 季度比月付多省的金额yearly: 20 // 年付的总折扣
};// 按支付周期返回最终价格
function getPrice(period) {const base = PRICE_TIERS[period] || 0;const discount = DISCOUNTS[period] || 0;const final = base - discount;return Math.max(final, 0);
}
四、弹窗提示与用户交互设计
模态弹窗的结构与逻辑
为确保价格变化能够清晰传达给用户，弹窗提示应具备简洁的文案和可操作的按钮。设计要点包括：可访问性、焦点管理、以及在价格更新时的即时反馈。
在实现中，可以用一个简单的模态框来承载提示文本和操作按钮，并基于用户的选择来决定是否继续购买或重新加载价格。
// 显示模态框的简易实现（示例）
function showModal(message) {const modal = document.getElementById('priceModal');modal.style.display = 'flex';modal.querySelector('.message').textContent = message;
}
五、完整代码示例与集成步骤
在页面中集成的完整示例
以下示例展示了如何在一个简单的页面中集成价格计算、周期切换和弹窗提示。通过 周期选择控件、价格显示区域、以及 弹窗组件，实现交互闭环。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8" /><title>价格计算器示例</title><style>.modal { display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.6);align-items:center; justify-content:center; }.modal-content { background:#fff; padding:20px; border-radius:8px; min-width:300px; }</style>
</head>
<body><div><label>支付周期<select id="cycleSelect"><option value="monthly">按月</option><option value="quarterly">按季</option><option value="yearly">按年</option></select></label></div><p>最终价格：<span id="price">$19</span></p><button id="buyBtn">购买</button><div id="priceModal" class="modal" aria-hidden="true"><div class="modal-content"><p class="message">价格更新提示</p><button id="confirmBtn">确定</button><button id="cancelBtn">取消</button></div></div><script>// 使用的价格与折扣数据const PRICE_TIERS = { monthly: 19, quarterly: 49, yearly: 179 };const DISCOUNTS = { monthly: 0, quarterly: 5, yearly: 20 };function getPrice(period) {const base = PRICE_TIERS[period] || 0;const discount = DISCOUNTS[period] || 0;return Math.max(base - discount, 0);}function showModal(message) {const modal = document.getElementById('priceModal');modal.querySelector('.message').textContent = message;modal.style.display = 'flex';}document.addEventListener('DOMContentLoaded', function(){const cycle = document.getElementById('cycleSelect');const priceEl = document.getElementById('price');const buyBtn = document.getElementById('buyBtn');const confirmBtn = document.getElementById('confirmBtn');const cancelBtn = document.getElementById('cancelBtn');function updatePrice() {const period = cycle.value;const p = getPrice(period);priceEl.textContent = '$' + p;}cycle.addEventListener('change', updatePrice);buyBtn.addEventListener('click', function(){const period = cycle.value;const p = getPrice(period);showModal('将按 ' + period + ' 付费，价格为 $' + p +，是否继续购买？');});confirmBtn.addEventListener('click', function(){// 执行购买逻辑document.getElementById('priceModal').style.display = 'none';});cancelBtn.addEventListener('click', function(){document.getElementById('priceModal').style.display = 'none';});updatePrice();});</script>
</body>
</html>
// script.js（可分离的实现方式，若在上例中使用）
const PRICE_TIERS = { monthly: 19, quarterly: 49, yearly: 179 };
const DISCOUNTS = { monthly: 0, quarterly: 5, yearly: 20 };function getPrice(period) {const base = PRICE_TIERS[period] || 0;const discount = DISCOUNTS[period] || 0;return Math.max(base - discount, 0);
}function showModal(message) {const modal = document.getElementById('priceModal');modal.querySelector('.message').textContent = message;modal.style.display = 'flex';
}document.addEventListener('DOMContentLoaded', () => {const cycle = document.getElementById('cycleSelect');const priceEl = document.getElementById('price');const buyBtn = document.getElementById('buyBtn');const confirmBtn = document.getElementById('confirmBtn');const cancelBtn = document.getElementById('cancelBtn');function updatePrice() {const period = cycle.value;const p = getPrice(period);priceEl.textContent = '$' + p;}cycle.addEventListener('change', updatePrice);buyBtn.addEventListener('click', () => {const period = cycle.value;const p = getPrice(period);showModal('将按 ' + period + ' 付费，价格为 $' + p + '，是否继续购买？');});confirmBtn.addEventListener('click', () => {// 购买流程占位document.getElementById('priceModal').style.display = 'none';});cancelBtn.addEventListener('click', () => {document.getElementById('priceModal').style.display = 'none';});updatePrice();
});
