一个简易版购物车

fwxstar 2018-06-08 596次浏览

摘要: 项目预览地址:http://jsrun.net/xWgKp/editHtml<ul id="list">     <li&g...

项目预览地址:http://jsrun.net/xWgKp/edit


Html

<ul id="list">
    <li>
        <input type="button" value="+"/>
        <strong>0</strong>
        <input type="button" value="-"/>
        单价:<em class="unit">12.5元</em>
        合计:<em class="totalMon">0元</em>
    </li>
    <li>
        <input type="button" value="+"/>
        <strong>0</strong>
        <input type="button" value="-"/>
        单价:<em class="unit">12元</em>
        合计:<em class="totalMon">0元</em>
    </li>
    <li>
        <input type="button" value="+"/>
        <strong>0</strong>
        <input type="button" value="-"/>
        单价:<em class="unit">22.5元</em>
        合计:<em class="totalMon">0元</em>
    </li>
    <li>
        <input type="button" value="+"/>
        <strong>0</strong>
        <input type="button" value="-"/>
        单价:<em class="unit">4.5元</em>
        合计:<em class="totalMon">0元</em>
    </li>

    <li>
        <input type="button" value="+"/>
        <strong>0</strong>
        <input type="button" value="-"/>
        单价:<em class="unit">55元</em>
        合计:<em class="totalMon">0元</em>
    </li>
</ul>
<div>
    <p id="summary">
        商品合计共:<em>0</em>件,共花费了:<em>0</em>元<br />
        其中最贵的商品单价是:<em>0</em>元
    </p>
</div>


Js

var oUl=document.getElementById("list");
var aLilist=oUl.getElementsByTagName("li");
var totalMon=document.getElementsByClassName("totalMon");
var summary=document.getElementById("summary");
var aStrong=document.getElementsByTagName("strong");
var aUnit=document.getElementsByClassName("unit");

var sEm=summary.getElementsByTagName("em");

//数字增减
for(var i=0;i<aUnit.length;i++){
    console.log(aUnit[i]);
}
//总计
function count(){
    var pAll = 0;
    var aPrice = 0;
    var temp = 0;
    for(var i=0;i temp ){
                temp = parseFloat(aUnit[i].innerHTML);

            }
        }
    }
    //最贵单价
    sEm[2].innerText=temp;
    //商品合计个数
    sEm[0].innerText=pAll;
    //总计花费
    sEm[1].innerText=aPrice;

}

//数字增减
for(var i=0;i0){
            num--;
        }
        aStrong.innerText=num;
        aEmd.innerText=num*parseFloat(aEmp.innerText)+"元";
        count();

    };

}