瞅我干啥？

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::

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

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

 

posted on 2016-10-10 20:07  瞅我干啥？  阅读(253)  评论(0)    收藏  举报