多商品結算(購物車)

時間 2019-11-10
標籤商品結算購物車简体版
原文原文鏈接
<!DOCTYPE html>
<html>html
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{margin: 0; padding: 0;}
        #ulList{background-color: green;}
        li{list-style: none;border-bottom: 1px dashed white;height: 30px;line-height: 30px;}
    </style>
    <script>
        window.onload = function(){
            var oUl = document.getElementById('ulList');
            var aLi = oUl.getElementsByTagName('li');
            
            //計算每種商品的數量和價格
            //在使用getElementsByTagName時,若是隻有一個標籤存在 不要忘記後面[0];
            function calcEach(oli){
                var aInp = oli.getElementsByTagName('input');
                var oStrong = oli.getElementsByTagName('strong')[0];
                var oEm = oli.getElementsByTagName('em')[0];
                var oSpan = oli.getElementsByTagName('span')[0];
                var eachNum = oStrong.innerHTML;
                var eachMoney = parseFloat(oEm.innerHTML);
                
                aInp[1].onclick = function(){
                    eachNum++;
                    oStrong.innerHTML = eachNum;
                    oSpan.innerHTML = (eachNum*eachMoney).toFixed(2)+'元';
                    calcTotal('strong','allNum');
                    calcTotal('span','allMoney');
                    
                }                    
                aInp[0].onclick = function(){
                    eachNum--;
                    if(eachNum<0){
                        eachNum=0;
                    }
                    oStrong.innerHTML = eachNum;
                    oSpan.innerHTML = (eachNum*eachMoney).toFixed(2)+'元';
                    calcTotal('strong','allNum');
                    calcTotal('span','allMoney');
                }                    
            }
            for(var i = 0;i<aLi.length;i++){
                calcEach(aLi[i]);
            }
            
            //計算購物者購買的總量和總價格
            function calcTotal(tagName,id){
                var arr = [];
                var reg = /^[0-9]*[1-9][0-9]*$/;
                var num = 0;
                for(var i=0;i<aLi.length;i++){
                    var aTagName = aLi[i].getElementsByTagName(tagName);
                    for(var j=0;j<aTagName.length;j++){
                        arr.push(aTagName[j]);
                    }
                }
                for(var i = 0;i<arr.length;i++){
                    num +=parseFloat(arr[i].innerHTML);
                }
                
                if(reg.test(num)){
                    document.getElementById(id).innerHTML = num;
                }else{
                    document.getElementById(id).innerHTML = num.toFixed(2);
                }    
                
            }
            
        };
    </script>
</head>
<body>
    <ul id="ulList">
        <li>
            <input type="button" value="-"/>
            <strong>0</strong>
            <input type="button" value="+"/>
            單價：<em>12.51元</em>
            小計：<span>0元</span>
        </li>
        <li>
            <input type="button" value="-"/>
            <strong>0</strong>
            <input type="button" value="+"/>
            單價：<em>8.52元</em>
            小計：<span>0元</span>
        </li>
        <li>
            <input type="button" value="-"/>
            <strong>0</strong>
            <input type="button" value="+"/>
            單價：<em>10.57元</em>
            小計：<span>0元</span>
        </li>
    </ul>
    <p style="font-size: 20px;font-family: arial;color: red; background-color: black;">商品合計：<span id="allNum"><strong>0</strong></span>件，共花費了：<span id="allMoney">0</span>元</p>
</body>
</html>spa
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。