js实现购物车价格计算效果

最新推荐文章于 2022-09-15 14:46:21 发布

JackieDYH

最新推荐文章于 2022-09-15 14:46:21 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签：购物车价格计算计算 javascript css

本文链接：https://blog.csdn.net/JackieDYH/article/details/105031088

版权

JavaScript 专栏收录该内容

372 篇文章 55 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			button{
				width: 40px;
				font-size: 20px;
			}
			#num{
				font-style: normal;
				font-size: 20px;
				padding: 0 5px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var btns = document.getElementsByTagName('button');
				var num = document.getElementById('num');
				var unit = document.getElementById('unit');
				var total = document.getElementById('total');
				// console.log(btns,num,total);
				var nums = Number(num.innerHTML);
				var units = Number(unit.innerHTML);
				var sum = 0;
				console.log(typeof units,units);
				for(var i = 0; i < btns.length; i++){
					btns[i].index = i;
					btns[i].onclick = function(){
							if(this.index == 0){
								if(nums === 0){
									nums = 0;
									// sum = nums * units;
								}else{
									nums--;
									// sum = nums * units;
								}
							}else if(this.index == 1){
								nums++;
							}
							sum = nums * units;
						num.innerHTML = nums;
						total.innerHTML = sum;
					}
				}
			}
		</script>
	</head>
	<body>
		<div class="wrap">
			<button type="button">-</button>
			<i id="num">0</i>
			<button type="button">+</button>
			单价：<spam id="unit">12.5</spam>元 
			总价：<span id="total">0</span>元
		</div>
	</body>
</html>