商品详情页中的数量的增加与减少

js代码:

function add_nmu()
            {
                var zhi
                if ($("#scount").val() == "")
                {
                    zhi = 1;
                }
                else
                {
                    zhi = parseInt($("#scount").val()) + 1;
                }
                var zongprice = parseInt(zhi) * parseFloat($("#sdj").text());
                $("#scount").val(zhi);
                $("#snum").text(zhi);
                $("#zprice").text(zongprice.toFixed(2) * 10 / 10);
            }
            function reduce_nmu()
            {
                var zhi;
                var zongprice;
                if ((parseInt($("#scount").val()) - 1) != 0 && $("#scount").val() != "")
                {
                    zhi = parseInt($("#scount").val()) - 1;
                    $("#scount").val(zhi);
                    $("#snum").text(zhi);
                    zongprice = parseInt(zhi) * parseFloat($("#sdj").text());
                    $("#zprice").text(zongprice.toFixed(2) * 10 / 10);
                }
                if ($("#scount").val() == 1)
                {
                    $("#zprice").text($("#sdj").text());
                }
            }
            function maicoutn()
            {
                if ($("#scount").val() == 0)
                {
                    $("#scount").val("");
                    $("#snum").text(1);
                }
                if ($("#scount").val() > 0)
                {
                    var zhi = parseInt($("#scount").val());
                    var zongprice = parseInt(zhi) * parseFloat($("#sdj").text());
                    $("#zprice").text(zongprice.toFixed(2) * 10 / 10);
                    $("#snum").text(zhi);
                }
            }

DIV代码:

<span class="jian" onClick="reduce_nmu()">-</span>   
<span class="jia" onClick="add_nmu()">+</span>        
<input type="text" id="scount" value="1" οnkeyup="value = this.value.replace(/\D+/g, ''), maicoutn()"

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一种实现商品数量加减按钮的HTML代码,同时商品数量也会随之增加减少的示例: ```html <!DOCTYPE html> <html> <head> <title>商品详情页</title> </head> <body> <h1>商品名称</h1> <p>商品描述</p> <img src="商品图片路径" alt="商品图片"> <h2>商品信息</h2> <ul> <li>价格:$99.99</li> <li>颜色:红色</li> <li>尺码:L</li> <li>库存:10件</li> </ul> <label for="quantity">数量:</label> <input type="number" id="quantity" value="1" min="1"> <button onclick="decreaseQuantity()">-</button> <button onclick="increaseQuantity()">+</button> <button onclick="addToCart()">加入购物车</button> <script> function decreaseQuantity() { var quantityInput = document.getElementById("quantity"); var currentQuantity = parseInt(quantityInput.value); if (currentQuantity > 1) { quantityInput.value = currentQuantity - 1; } } function increaseQuantity() { var quantityInput = document.getElementById("quantity"); var currentQuantity = parseInt(quantityInput.value); quantityInput.value = currentQuantity + 1; } function addToCart() { var quantityInput = document.getElementById("quantity"); var quantity = parseInt(quantityInput.value); // 在这里执行添加到购物车的操作 // 可以使用本地存储或者发送请求到服务器 alert("已将 " + quantity + " 件商品添加到购物车!"); } </script> </body> </html> ``` 在上面的代码,我们添加了一个`<input type="number">`元素来显示商品数量,并使用`min="1"`属性确保数量不会小于1。然后,我们在数量输入框旁边添加了一个减号按钮和一个加号按钮,用于减少增加数量。每个按钮都有相应的点击事件处理函数`decreaseQuantity()`和`increaseQuantity()`。 在`addToCart()`函数,我们获取数量输入框的值,然后执行添加到购物车的操作。这里只是一个简单的提示弹窗,你可以根据实际需求进行定制。 这样,当用户点击减号或加号按钮时,商品数量会相应地减少增加,并且在点击加入购物车时,会显示添加的商品数量
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值