完善 购物车统计价格 总价数量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    window.onload=function(){
        var aIn=document.querySelectorAll('input');
        var aEm=document.querySelectorAll('em');
        var aI=document.querySelectorAll('i');
        for(var i=0;i<aIn.length;i++){
            (function(index){
                if(aIn[index].value=='0'){
                        delete localStorage['a'+index];
                 }
                aIn[i].oninput=function(){
                    aI[index].innerHTML=parseFloat(aEm[index].innerHTML)*parseFloat(aIn[index].value);
                    localStorage['a'+index]=parseFloat(aEm[index].innerHTML)*parseFloat(aIn[index].value);    
                    getStorage();
                };

            })(i);    
       }
       //获取后台存取的信息。
       function getStorage(){
               var arr=[];
            function findArr(){
                   for(var name in localStorage){
                       var reg=/^[a]d+$/g;
                       if(reg.test(name)){
                           arr.push(localStorage[name]);
                       }    
                }
                return arr;
            }
            var d=findArr();
            var p=0;
            for(var i=0;i<d.length;i++){
                var p=Number(d[i])+p;
                div1.innerHTML='总价:'+p;
            }
        }
       
    };
    </script>
</head>
<body>
    <div>
        <p>商品名称:碧血剑谱</p>
        <input type="number" min="0" value="0">
        <em>30$</em><br><br>
        <i></i>
    </div>
    <div>
        <p>商品名称:九阴真经</p>
        <input type="number" min="0" value="0">
        <em>60$</em><br><br>
        <i></i>
    </div>
    <div>
        <p>商品名称:太极拳谱</p>
        <input type="number" min="0" value="0">
        <em>90$</em><br><br>
        <i></i>
    </div>
    <div id="div1">0</div>
</body>
</html>
原文地址:https://www.cnblogs.com/lixuekui/p/5947119.html