购物车数字加减按钮

最新推荐文章于 2022-04-26 16:47:11 发布

calangan

最新推荐文章于 2022-04-26 16:47:11 发布

阅读量2.3w

点赞数 3

分类专栏： web

本文链接：https://blog.csdn.net/calangan/article/details/71544039

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

购物车数字加减按钮，实现的比较简单，各位友友简单参考

<!DOCTYPE html>
<html>
	<head>
		<title>num</title>
		<style type="text/css">
			a{
				width:20px;
				text-decoration:none;
			}
			.content{
				width:60px;
				height:30px;
				line-height:32px;
				text-align:center;
				border:1px solid gray;
			}
			#num{
				width:20px;
				height:30px;
				display:inline-block;
				border-right:1px solid gray;
				border-left:1px solid gray;
			}
		</style>
		
		<script type="text/javascript">
			var x = 1;
			function show(state){
				if(state=="sub"){
					if(x<=0){
						document.getElementById('num').innerHTML="0";
					}else{
						x--;
						document.getElementById('num').innerHTML=x;
					}
				}else if(state=="sum"){
					x++;
					document.getElementById('num').innerHTML=x;
				}
			}
		</script>
	</head>
	<body>
		<div class="content">
			<a id="sub" href="javascript:void(0)" οnclick="show('sub')">-</a>
			<div id="num">1</div>
			<a id="sum" href="javascript:void(0)" οnclick="show('sum')">+</a>
		</div>
	</body>
<html>