js购物车

2022-02-05 11:02:59 阅读：118 来源： 互联网

标签：total obj price innerHTML js num console 购物车

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        table,tr,td{
            border: 1px solid;
        }
       td{
            text-align: center;
        }
        table{
            border-collapse: collapse;
            width: 600px;
            margin: 100px auto;
        }
        tr{

            height: 40px;

        }
    </style>


</head>
<body>

<table>
    <tr>
        <td>产品名称</td>
        <td>产品单价</td>
        <td>产品数量</td>
        <td>总价</td>

    </tr>

    <tr>
        <td>Iphone5</td>
        <td>1000</td>
        <td>
            <input type="button" value="-" onclick="jian(this)">
            <span>1</span>
            <input type="button" value="+" onclick="jia(this)">
        </td>
        <td class="money" >1000</td>
    </tr>

    <tr>
        <td>Iphone6</td>
        <td>1000</td>
        <td>
            <input type="button" value="-"  onclick="jian(this)">
            <span>1</span>
            <input type="button" value="+" onclick="jia(this)" >
        </td>

        <td class="money">1000</td>
    </tr>

    <tr>
        <td>Iphone7</td>
        <td>1000</td>
        <td>
            <input type="button" value="-" onclick="jian(this)">
            <span>1</span>
            <input type="button" value="+" onclick="jia(this)">

        </td>
        <td class="money" >1000</td>
    </tr>

    <tr>
        <td colspan="3">total</td>
        <td id="total">3000</td>
    </tr>

</table>

<script>
       function jia(obj){
           var num= parseInt (obj.previousElementSibling.innerHTML);
           console.log(typeof num +num);
           num++;
           obj.previousElementSibling.innerHTML=num;

           var  price=  parseInt(    obj.parentElement.previousElementSibling.innerHTML);
           price=num*price;
           console.log(typeof price+price);

           obj.parentElement.nextElementSibling.innerHTML=price;

           totalPrice();

       }

       function jian(obj){
             var num= parseInt( obj.nextElementSibling.innerHTML );

             if(num>0) {
                 num--;
                 console.log(typeof num +num);
                 obj.nextElementSibling.innerHTML=num;
                 var  price=   parseInt(  obj.parentElement.nextElementSibling.innerHTML) ;
                 price=price-(obj.parentElement.previousElementSibling.innerHTML);
                 console.log(typeof price +price );
                 obj.parentElement.nextElementSibling.innerHTML=price;


                 totalPrice();

              }else {
                 num=0;
                 console.log(typeof num +num);
             }
       }

       function totalPrice(){
           var  total=document.getElementById('total').innerHTML;
           total=parseInt(total);

           var moneys=document.getElementsByClassName('money');

           console.log(typeof moneys+moneys);

           var sum=0;


           for (var i=0;i<moneys.length;i++){
                sum=sum+ parseInt( moneys[i].innerHTML);
           }
           console.log(typeof sum+sum);
           total=sum;


           document.getElementById('total').innerHTML=total;
           console.log(typeof total+total);
       }

</script>


</body>
</html>

标签：total,obj,price,innerHTML,js,num,console,购物车
来源： https://blog.csdn.net/weixin_51847874/article/details/122788630

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js购物车