前端学习代码实例-JavaScript商城购物车价格自动计算功能

短命女 2022-10-01 13:51 63阅读 0赞

[为什么80%的码农都做不了架构师？>>> ][80_]  ![hot3.png][]

分享一段代码实例，它实现购物车价格自动计算功能。

代码实例如下:

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>web前端开发学习qq-u-n-：731771211   详细教程讲解</title>
    <style type="text/css">
    #imgtest{
      position:absolute;
      top:100px;
      left:400px;
      z-index:1;
    }
    table{
      left:100px;
      font-size:20px;
    }
    </style>
    <script>
    function total(id){
      /*计算单个的价格*/
      var quantity=document.getElementById("quantity"+id).value;
      var price=document.getElementById("price"+id).value;
      var smallTotal=quantity*price;
      var smallT=document.getElementById("smallTotal"+id);
      smallT.innerHTML=smallTotal;
       
      /*计算总价格*/
      var totalPrice=0;
      for(var a=1;a<3;a++){
        var quantity=document.getElementById("quantity"+a).value;
        var price=document.getElementById("price"+a).value;
        var smallTotal=quantity*price;
        totalPrice=totalPrice+smallTotal;
      }
      var total=document.getElementById("total");
      total.innerHTML=totalPrice;
    }
    function initialize(){
      var totalPrice=0;
      for(var a=1;a<3;a++){
        var quantity=document.getElementById("quantity"+a).value;
        var price=document.getElementById("price"+a).value;
        var smallTotal=quantity*price;
        totalPrice=totalPrice+smallTotal;
        var smallT=document.getElementById("smallTotal"+a);
        smallT.innerHTML=smallTotal;
      }
      /*取出购物车的所有商品的价格总和*/
      var total=document.getElementById("total");
      total.innerHTML=totalPrice;
    }
    window.onload=function(){
      initialize();
    }
    </script>
     </head>
     <body>
      <div id="imgtest"></div>
      <table border="1" style="text-align:center;" align="center">
       <thead style="height:50">
        <td style="width:300px">商品名称</td>
        <td style="width:170px">数量</td>
        <td style="width:170px">价格</td>
        <td style="width:250px">小计</td>
       </thead>
       <tbody>
        <tr>
         <td class="name">我的帅气一</td>
         <td class="quantity"><input id="quantity1" value="1"/></td>
         <td class="price"><input type="hidden" id="price1" value="20"/>20</td>
         <td class="total"><span id="smallTotal1"></span> 元</td>
        </tr>
        <tr>
         <td class="name">我的智慧二</td>
         <td class="quantity"><input id="quantity2" value="2"/></td>
         <td class="price"><input type="hidden" id="price2" value="30"/>30</td>
         <td class="total"><span id="smallTotal2"></span> 元</td>
        </tr>
        <tr>
         <td colspan="3" class="cart_total"></td>
         <td><span class="red">总计:</span><span id="total"></span>  元</td>
        </tr>
       </tbody>
      </table>
    </body>
    </html>

转载于:https://my.oschina.net/zybc/blog/3039556

[80_]: https://my.oschina.net/u/2663968/blog/3051541
[hot3.png]: /images/20220118/783f755cbc324a8a96784481659da29c.png