多商品结算(购物车)

<!DOCTYPE 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>

多商品结算(购物车)

kobe

引用和评论

浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

Base64编码的“暗坑”：解密失败？可能是这些原因！

手写一个动态海洋和天空效果的vue hooks

原生electron起步-从零到一完成构建和打包