操作当当购物车页面-CSDN博客

本文链接：https://blog.csdn.net/bafangcio/article/details/80503271
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>操作当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>
<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span οnclick="close_plan();">关闭</span>
    </div>
    <div class="cartList" id="cartList">
        <ul>
            <li>商品图片</li>
            <li>商品信息</li>
            <li>单价</li>
            <li>数量</li>
            <li>总价</li>
            <li>操作</li>
        </ul>
        <ul>
            <li><img src="images/dog.jpg"></li>
            <li>我和狗狗活下来了</li>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-" οnclick="minus(0);"><input type="text" name="amount" value="1" id="one"><input type="button" name="plus" value="+" οnclick="plus(0);"></li>
            <li id="price0">21.90</li>
            <li><p  οnclick="collection();">移入收藏</p><p id="del0" οnclick="del(0)">删除</p></li>
        </ul>
        <ul>
            <li><img src="images/mai.jpg"></li>
            <li>灰霾来了怎么办</li>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-" οnclick="minus(1);"><input type="text" name="amount" value="1" id="two"><input type="button" name="plus" value="+" οnclick="plus(1);"></li>
            <li id="price1">24.00</li>
            <li><p  οnclick="collection();">移入收藏</p><p id="del1" οnclick="del(1)">删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">商品总计：<span id="total"></span></li>
            <li><span>结 算</span></li>
        </ol>
    </div>
</div>
</body>
<script>
	var one=document.getElementById("one");
	var two=document.getElementById("two");
	var price0=document.getElementById("price0");
	var price1=document.getElementById("price1");
	var total=document.getElementById("total");
	var del0=document.getElementById("del0");
	var del1=document.getElementById("del1");
//	左减
	function minus(num){
		switch(num){
			case 0:
				var value=one.value;
				if(0<one.value){
					value--;
					one.value=value;
				}
				price0.innerText=12.90*parseInt(value);//单件商品总价
				total.innerText=parseInt(price0.innerText)+parseInt(price1.innerText);//多件商品总价
				break;
			case 1:
				var value=two.value;
				if(0<two.value){
					value--;
					two.value=value;
				}
				price1.innerText=24.00*parseInt(value);//单件商品总价
				total.innerText=parseInt(price0.innerText)+parseInt(price1.innerText);//多件商品总价
				break;
		}
	}
//	右加
	function plus(num){
		switch(num){
			case 0:
				var value=one.value;
				if(one.value>=0){
					value++;
					 one.value=value;
				}
				price0.innerText=12.90*parseInt(value);//单件商品总价
				total.innerText=parseInt(price0.innerText)+parseInt(price1.innerText);//多件商品总价
				break;
			case 1:
				var value=two.value;
				if(two.value>=0){
					value++;
					 two.value=value;
				}
				price1.innerText=24.00*parseInt(value);//单件商品总价
				total.innerText=parseInt(price0.innerText)+parseInt(price1.innerText);//多件商品总价
				break;
		}
	}//删除
	function del(num){
		switch(num){
			case 0:
				(del0.parentNode).parentNode.remove();
				break;
			case 1:
				(del1.parentNode).parentNode.innerText="";
				break;
		}
	}
</script>
</html>
JS实现购物车功能
