jQuery 计算价格的代码实例

最新推荐文章于 2025-10-14 08:52:31 发布

原创最新推荐文章于 2025-10-14 08:52:31 发布 · 297 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

html5 同时被 2 个专栏收录

168 篇文章

订阅专栏

jQuery

13 篇文章

订阅专栏

这是一个最基础的例子，计算购买商品的总价

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>价格计算器</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        div { margin-bottom: 10px; }
        label { display: inline-block; width: 80px; }
        input { width: 100px; padding: 5px; }
        #totalPrice { font-weight: bold; color: blue; }
    </style>
</head>
<body>

    <h2>商品总价计算</h2>

    <div>
        <label for="unitPrice">单价 ($):</label>
        <input type="number" id="unitPrice" value="10.00" step="0.01">
    </div>
    <div>
        <label for="quantity">数量:</label>
        <input type="number" id="quantity" value="1" min="1">
    </div>
    <div>
        <label>总价 ($):</label>
        <span id="totalPrice">0.00</span>
    </div>

    <script>
        $(document).ready(function() {
            function calculateTotalPrice() {
                // 获取单价和数量
                let unitPrice = parseFloat($('#unitPrice').val());
                let quantity = parseInt($('#quantity').val());

                // 检查输入是否有效，如果无效则默认为0
                if (isNaN(unitPrice)) {
                    unitPrice = 0;
                }
                if (isNaN(quantity)) {
                    quantity = 0;
                }

                // 计算总价
                let totalPrice = unitPrice * quantity;

                // 更新显示结果，保留两位小数
                $('#totalPrice').text(totalPrice.toFixed(2));
            }

            // 当单价或数量改变时，重新计算总价
            $('#unitPrice, #quantity').on('input', calculateTotalPrice);

            // 页面加载时执行一次计算
            calculateTotalPrice();
        });
    </script>

</body>
</html>

HTML 部分: 包含两个输入框 (单价 和 数量) 和一个 span 用于显示 总价。
jQuery 部分:
- $(document).ready(function() { ... }); 确保代码在DOM加载完成后执行。
- calculateTotalPrice() 函数：
  - 使用 $('#elementId').val() 获取输入框的值。
  - parseFloat() 和 parseInt() 将字符串值转换为数字，这是进行数学运算的关键。
  - isNaN() 检查转换后的值是否为非数字 (Not a Number)，用于处理无效输入。
  - toFixed(2) 将计算结果格式化为两位小数的字符串。
- $('#unitPrice, #quantity').on('input', calculateTotalPrice); 监听两个输入框的 input 事件。只要用户在输入框中输入内容，就会触发 calculateTotalPrice 函数。

购物车价格计算：多商品列表

这个例子模拟一个简单的购物车，计算多个商品的总价：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车价格计算</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .item { margin-bottom: 15px; border: 1px solid #eee; padding: 10px; }
        .item label { display: inline-block; width: 80px; }
        .item input { width: 80px; padding: 5px; }
        #cartTotal { font-weight: bold; color: green; font-size: 1.2em; margin-top: 20px; }
    </style>
</head>
<body>

    <h2>我的购物车</h2>

    <div class="item">
        <label>商品 A:</label>
        单价: <span class="unit-price" data-price="25.50">$25.50</span>
        数量: <input type="number" class="quantity" value="1" min="0">
        小计: <span class="item-subtotal">$25.50</span>
    </div>

    <div class="item">
        <label>商品 B:</label>
        单价: <span class="unit-price" data-price="12.00">$12.00</span>
        数量: <input type="number" class="quantity" value="2" min="0">
        小计: <span class="item-subtotal">$24.00</span>
    </div>

    <div class="item">
        <label>商品 C:</label>
        单价: <span class="unit-price" data-price="5.99">$5.99</span>
        数量: <input type="number" class="quantity" value="3" min="0">
        小计: <span class="item-subtotal">$17.97</span>
    </div>

    <hr>
    <div>
        <h3>购物车总计: <span id="cartTotal">$67.47</span></h3>
    </div>

    <script>
        $(document).ready(function() {
            function updateCartTotal() {
                let cartTotal = 0;

                // 遍历每一个商品项
                $('.item').each(function() {
                    let $item = $(this); // 当前商品项的jQuery对象

                    // 获取单价 (从data-price属性中获取，更可靠)
                    let unitPrice = parseFloat($item.find('.unit-price').data('price'));
                    // 获取数量
                    let quantity = parseInt($item.find('.quantity').val());

                    // 检查有效性
                    if (isNaN(unitPrice)) unitPrice = 0;
                    if (isNaN(quantity)) quantity = 0;

                    let itemSubtotal = unitPrice * quantity;
                    $item.find('.item-subtotal').text('$' + itemSubtotal.toFixed(2)); // 更新小计

                    cartTotal += itemSubtotal; // 累加到购物车总价
                });

                // 更新购物车总计显示
                $('#cartTotal').text('$' + cartTotal.toFixed(2));
            }

            // 监听所有商品数量输入框的变化
            $('.quantity').on('input', updateCartTotal);

            // 页面加载时执行一次计算
            updateCartTotal();
        });
    </script>

</body>
</html>