您的位置：首页 > Web前端 > JavaScript

js模拟购物车商品价格的增减

2017-08-10 11:29 190 查看
效果图如下所示：比较粗糙哦！


代码如下：

<!DOCTYPE HTML>
 <html>
 <head>
 <meta
http-equiv="Content-Type"
content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <script>
 /*
 重用代码：
 1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素
 2、把核心主程序实现，用函数包起来
 3、把每组里不同的值找出来，通过传参实现
 */
 window.onload=function(){
 var oUl=document.getElementById('list');
 var aLi=oUl.getElementsByTagName('li');
 var oP=document.getElementsByTagName('p')[0];
 var pSpan=oP.getElementsByTagName("span");
 /*fn(ali[0]);
 fn(ali[1]);
 fn(ali[2]);
 fn(ali[3]);*/
 for(var i=0;i<aLi.length;i++){
 fn(aLi[i]);
 }
 function fn(oLi){
 var oBtn=oLi.getElementsByTagName("input");
 var oStrong=oLi.getElementsByTagName("strong")[0];
 var oEm=oLi.getElementsByTagName("em")[0];
 var oSpan=oLi.getElementsByTagName("span")[0];
 var num=Number(oStrong.innerHTML);
 var price=parseFloat(oEm.innerHTML);
 oBtn[1].onclick=function(){
 num++;
 oStrong.innerHTML=num;
 oSpan.innerHTML=num*price+"元";
 fn2();
 }
 oBtn[0].onclick=function(){
 num--;
 if(num<0){
 num=0;
 }
 oStrong.innerHTML=num;
 oSpan.innerHTML=num*price+"元";
 fn2();
 }
 }
 function fn2(){
 var oStrong=oUl.getElementsByTagName("strong");
 var oEm=oUl.getElementsByTagName("em");
 var oSpan=oUl.getElementsByTagName("span");
 var amountN=0;
 var amountP=0;
 var max_price=[];
 for(var i=0;i<aLi.length;i++){
 amountN+=parseInt(oStrong[i].innerHTML);
 amountP+=parseFloat(oSpan[i].innerHTML);
 if(parseInt(oStrong[i].innerHTML)){
 max_price[max_price.length]=parseFloat(oEm[i].innerHTML);
 }
 }
 max_price.sort(function(a,b){
 return b-a;
 })
 if(amountN==0){
 max_price=0;
 }
 pSpan[0].innerHTML=amountN+"件";
 pSpan[1].innerHTML=amountP+"元";
 pSpan[2].innerHTML=max_price[0]+"元";
 }
 }
 </script>
 </head>
  
 <body>
  
 <ul
id="list">
 <li>
 <input
type="button"
value="-" />
 <strong>0</strong>
 <input
type="button"
value="+" />
 单价：<em>12.5元</em>
 小计：<span>0元</span>
 </li>
 <li>
 <input
type="button"
value="-" />
 <strong>0</strong>
 <input
type="button"
value="+" />
 单价：<em>10.5元</em>
 小计：<span>0元</span>
 </li>
 <li>
 <input
type="button"
value="-" />
 <strong>0</strong>
 <input
type="button"
value="+" />
 单价：<em>8.5元</em>
 小计：<span>0元</span>
 </li>
 <li>
 <input
type="button"
value="-" />
 <strong>0</strong>
 <input
type="button"
value="+" />
 单价：<em>8元</em>
 小计：<span>0元</span>
 </li>
 <li>
 <input
type="button"
value="-" />
 <strong>0</strong>
 <input
type="button"
value="+" />
 单价：<em>14.5元</em>
 小计：<span>0元</span>
 </li>
 </ul>
  
 <p>
 商品合计共：<span>0件</span>，共花费了：<span>0元</span><br />
 其中最贵的商品单价是：<span>0元</span>
 </p>
  
 </body>
 </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  web前端开发 javascript
相关文章推荐
新的分享
章节导航