用JS实现一个简单的加减购物车效果

最新推荐文章于 2023-11-19 12:43:11 发布

supertianjia

最新推荐文章于 2023-11-19 12:43:11 发布

阅读量1.8w

点赞数 11

CC 4.0 BY-SA版权

分类专栏：前端文章标签： input 购物车 js 加减小白

本文链接：https://blog.youkuaiyun.com/qq_37870901/article/details/81164902

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的加减输入框效果，通过按钮控制输入框内的数值增减，并更新相应的金额计算。

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

1.书写input输入框作为加减实现的效果。

2.加减按钮用button按钮来实现

3.利用js控制i的值作为输入框中的值。

实现的效果：

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			body{
				margin: 0;
				padding: 0;
			}
			.box{
				border: red solid 1px;
				height: 40px;
				width: 200px;
				margin: 200px auto;
				text-align: center;
				padding-top: 20px;
			}
			.box input{
				width: 40px;
				text-align: center;
			}
			#money{
				border: none;
				text-align: left;
				margin-left: 2px;
			}
			ul{
				list-style: none;
			}
			ul li{
				display: block;
				float: left;
				vertical-align: middle;
			}
		</style>
		<script>
			window.onload = function(){
				var plus = document.getElementById("plus");
				var i = document.getElementById("text").value;
				var subtract = document.getElementById("subtract");
				var money = document.getElementById("money").value;
				plus.onclick = function(){
					i++;
					document.getElementById("text").value = i;
					document.getElementById("money").value = i*money;
				}
				subtract.onclick = function(){
					if (i>0) {
						i--;
						document.getElementById("text").value = i;
						document.getElementById("money").value = i*money;
					} else{
						i=0;
						document.getElementById("text").value = i;
						document.getElementById("money").value = i*money;
					}
				}				
			}		
		</script>
	</head>
	<body>
		<ul class="box">
			<li><button id="plus">+</button></li>
			<li><input type="text" id="text" value="1"/></li>
			<li><button id="subtract">-</button></li>
			<li>&nbsp;&nbsp;&nbsp;¥<input type="text" id="money" value="88"/></li>
		</ul>
	</body>
</html>