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

最新推荐文章于 2024-01-09 00:30:00 发布

GiantChan

最新推荐文章于 2024-01-09 00:30:00 发布

阅读量1w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： web前端文章标签：购物车数量

本文链接：https://blog.youkuaiyun.com/killzero/article/details/18351591

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如题。

使用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())){//检查用户输入的值是否是数字