本文实例为大家分享了js实现购物车商品数量加减的具体代码,供大家参考,具体内容如下
Html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
< link rel = 'stylesheet' type = 'text/css' media = 'screen' href = '../css/bootstrap.min.css' >
< script src = "../js/jquery-1.12.4.js" ></ script >
< div style = "width: 300px;margin: 30px auto 0;" >
< form class = "form-inline" >
< div class = "form-group" >
< div class = "input-group" >
< div onclick = "minus()" class = "input-group-addon" >-</ div >
< input type = "text" class = "form-control" id = "exampleInputAmount" >
< div onclick = "add()" class = "input-group-addon" >+</ div >
</ div >
</ div >
</ form >
</ div >
|
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<style>
.list a {
display : block ;
margin : 30px ;
padding : 0 20px ;
height : 100px ;
}
.list .list-img {
width : 180px ;
height : 100px ;
border-radius: 6px ;
object-fit: cover;
}
.list .title {
font-size : 16px ;
font-weight : bold ;
white-space : nowrap ;
text- overflow : ellipsis;
margin : 10px 0 0 ;
}
.list .content {
font-size : 14px ;
line-height : 26px ;
margin : 10px 0 0 ;
display : -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2 ;
overflow : hidden ;
}
</style>
|
Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<script>
var num = 0;
// 对表单进行初始赋值
$( '#exampleInputAmount' ).val(num);
// 点击添加时
function add() {
// 方法体
if (num >= 5) {
alert( '最多可添加5个' );
return ;
}
num++;
console.log(num);
$( '#exampleInputAmount' ).val(num);
}
// 点击删除时
function minus() {
if (num < 1) {
alert( '已减到最低了' );
return ;
}
num--;
console.log(num);
$( '#exampleInputAmount' ).val(num);
}
</script>
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/weixin_43549976/article/details/108680689