原生js实现淘宝购物车功能

js淘宝购物车功能描述：

1、点击“+”，单个商品数量加1，总数量加1；单个商品价格添加，总价也添加。
2.点击“-”，单个商品数量减1，总数量减1；单个商品价格减少，总价也减少。
当该商品数量为0时，点击依然为0；
3.显示出总价，总数量和其中最贵的那个商品的价格。
瞄一眼效果图：

废话不多说，LU代码

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>*{padding:0;margin:0;}#list,p{list-style:none;width:600px;margin:0 auto;}#list li {width:600px;height:50px;line-height:50px;margin-top:20px;font-size:20px;}#list li input{width:60px;height:40px;line-height:40px;}.highlight{color:red;font-size:30px;font-weight:bold;}</style><script>window.onload = function （） { var oUl = $（"list"）; var totalNumber = $（"totalNum"）; var totalPrice = $（"totalPrice"）; var mostExpensive = $（"mostExpensive"）; var aLi = oUl.getElementsByTagName（"li"）; var maxPrice = [0]; for （ var i = 0; i < aLi.length; i++ ） {price（aLi[i]）; } function price（oLi） {var aBtn = oLi.getElementsByTagName（"input"）;var oStrong = oLi.getElementsByTagName（"strong"）[0];var oEm = oLi.getElementsByTagName（"em"）[0];var oSpan = oLi.getElementsByTagName（"span"）[0];aBtn[0].onclick = function （） { var num = Number（oStrong.innerHTML）; var price = parseFloat（oEm.innerHTML）; var numbers = Number（totalNumber.innerHTML）; var prices = parseFloat（totalPrice.innerHTML）; num--; if （num === 0） {// 如果该商品数量为0，,那么就得把它的价格从价格表中清除 var index = maxPrice.indexOf（price）;if （index > -1） maxPrice.splice（index, 1）; } else if （num < 0） {num = 0; return; } numbers--; oStrong.innerHTML = num; oSpan.innerHTML = num * price + "元"; totalNumber.innerHTML = numbers; totalPrice.innerHTML = prices - （num + 1） * price; mostExpensive.innerHTML = maxPrice[0];}aBtn[1].onclick = function （） { var num = Number（oStrong.innerHTML）; var price = parseFloat（oEm.innerHTML）; var numbers = Number（totalNumber.innerHTML）; var prices = parseFloat（totalPrice.innerHTML）; num++; numbers++; if （maxPrice.indexOf（price） < 0） {maxPrice.push（price）maxPrice.sort（function （a,b） {return b - a}）; } oStrong.innerHTML = num; oSpan.innerHTML = num * price + "元"; totalNumber.innerHTML = numbers; totalPrice.innerHTML = prices + num * price; mostExpensive.innerHTML = maxPrice[0];} } function $（id） {return document.getElementById（id）;}}</script></head><body><ul id="list"> <li><input type="button" value="-" /><strong>0</strong><input type="button" value="+" />单价：<em>12.5元</em>小计：<span class="highlight">0元</span> </li> <li><input type="button" value="-" /><strong>0</strong><input type="button" value="+" />单价：<em>10.5元</em>小计：<span class="highlight">0元</span> </li> <li><input type="button" value="-" /><strong>0</strong><input type="button" value="+" />单价：<em>8.5元</em>小计：<span class="highlight">0元</span> </li> <li><input type="button" value="-" /><strong>0</strong><input type="button" value="+" />单价：<em>8元</em>小计：<span class="highlight">0元</span> </li> <li><input type="button" value="-" /><strong>0</strong><input type="button" value="+" />单价：<em>14.5元</em>小计：<span class="highlight">0元</span> </li></ul><p>商品合计共：<span class="highlight" id="totalNum">0</span>件，共花费了：<span class="highlight" id="totalPrice">0</span>元<br />其中最贵的商品单是：<span class="highlight" id="mostExpensive">0</span>元</p></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。