js实现购物车数量增减联动价格变化

最新推荐文章于 2023-03-27 19:44:34 发布

原创

最新推荐文章于 2023-03-27 19:44:34 发布 · 1w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#购物车数量

本文介绍了如何使用JavaScript实现购物车中商品数量的增减，并同步更新商品总价的功能。通过HTML结构配合JS逻辑，创建了一个包含两个操作按钮和一个数量输入框的简单购物车数量控制模块。

如题。

使用js实现一个购物车中常见的功能：购物数量增减功能。

我实现的效果如图：

两边是两个input，中间是一个input输入框。

HTML：

<input id="min" name="" type="button" value="-" >
<input id="num" name="num" type="text" value="1" readonly="true" onchange="setTotal();" >
<input id="add" name="" type="button" value="+" >

JS：

//根据选择的数量计算总价，并显示出来
function setTotal(){
		var t = $("#num");
		var tmp = document.getElementById("totalPrice");//需要修改的总价位置1
		var tmp1 = document.getElementById("totalPrice1");//需要修改的总价位置2
		if(/\D/.test(t.val())){//检查用户输入的值是否是数字

最低0.47元/天解锁文章