类似于购物车，点击按钮，购物数量的增加或者减少

最新推荐文章于 2018-05-16 14:43:21 发布

S852509769

最新推荐文章于 2018-05-16 14:43:21 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css+js

本文链接：https://blog.youkuaiyun.com/S852509769/article/details/78120453

html+css+js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种通过HTML和JavaScript实现的数量增减功能。利用两个按钮控制一个显示数量的标签，实现了基本的数量增加和减少功能，并确保数量不会小于1。代码简单易懂，适合初学者学习。

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

类似于这样的效果，

该如何实现：下面将给出具体的代码

两边是button按钮，中间是span标签。（1）设置button的单击事件可以使用onclick直接在button上绑定，（2）也可以使用在js代码中绑定按钮的单击事件，使用click方法。这是两种不同的方法，但是效果一样的。

注意：获取span上的数字，并可以对数字进行加减操作使用parseInt($('quantity').text())+1;parseInt($('quantity').text())-1。设置span上面的只也使用text()方法。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.2.1.min.js"></script>
<script>
function del(){
var num=parseInt($('#quantity').text())-1;
if(num<1){
$('#quantity').text(1);
}else{
$('#quantity').text(num);
}
}
function add(){
var num=parseInt($('#quantity').text())+1;
$('#quantity').text(num);
}
</script>
</head>
<body>
<input type="button" value="-" id="del" onclick="del()"/>
<span id="quantity">1</span>
<input type="button" value="+" id="add" onclick="add()"/>

</body>
</html>