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

最新推荐文章于 2021-01-08 23:33:16 发布

weixin_33701294

最新推荐文章于 2021-01-08 23:33:16 发布

阅读量205

点赞数

原文链接：http://www.cnblogs.com/lixuekui/p/5947119.html

版权

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

weixin_33701294

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
完善购物车统计价格总价数量

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function(){ var...
复制链接

扫一扫