購物車實例

時間 2019-11-13
標籤購物車實例简体版
原文原文鏈接
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>購物車</title>
    <style>
table{
    margin: 0 auto;
    width:600px;
    height: auto;
   /* border: 1px solid black;*/
   border-collapse: collapse;
}
td{
    border: 1px solid black;
    line-height: 40px;
    font-size: 25px;
    text-align: center;
}
.btnl,.btnr{
    border-style: none;
    outline: none;
}
.txt{
    border-style: none;
    text-align: center;
    width: 15px;
}
    </style>
</head>
<body>
<table>
    <tr>
        <td><button  class="btn">全選</button></td>
        <td>序號</td>
        <td>名稱</td>
        <td>價錢</td>
        <td>數量</td>
        <td>小計</td>
        <td>操做</td>
    </tr>
    <tr class="trde">
        <td><input  class="box"type="checkbox"></td>
        <td>1</td>
        <td>毛衣</td>
        <td><span class="price">99</span>￥</td>
        <td><button class="btnl">-</button><input class="txt" type="text" value="1"><button class="btnr">+</button></td>
        <td style="width: 150px;" ><span class="smallprice">99</span>￥</td>
        <td><button class="btndelte">刪除</button></td>
    </tr>
    <tr class="trde">
        <td><input  class="box" type="checkbox"></td>
        <td>2</td>
        <td>羽毛球</td>
        <td><span class="price">199</span>￥</td>
        <td><button class="btnl">-</button><input class="txt"type="text" value="1"><button class="btnr">+</button></td>
        <td><span class="smallprice">99</span>￥</td>
        <td><button class="btndelte">刪除</button></td>
    </tr>
    <tr class="trde">
        <td><input  class="box"type="checkbox"></td>
        <td>3</td>
        <td>運動鞋</td>
        <td><span class="price">899</span>￥</td>
        <td><button class="btnl">-</button><input class="txt" type="text" value="1"><button class="btnr">+</button></td>
        <td><span class="smallprice">899</span>￥</td>
        <td><button class="btndelte">刪除</button></td>
    </tr>
    <tr class="trde">
        <td><input  class="box"type="checkbox"></td>
        <td>4</td>
        <td>籃球</td>
        <td><span class="price">699</span>￥</td>
        <td><button class="btnl">-</button><input class="txt"type="text" value="1"><button class="btnr">+</button></td>
        <td><span class="smallprice">699</span>￥</td>
        <td><button class="btndelte">刪除</button></td>
    </tr>
    <tr>
        <td><button class="btnf">反選</button></td>
        <td colspan="6"><span>總計：<span class="tottal">0</span></span><button class="jiesuan">去結算</button></td>
    </tr>
</table>
<script>
    var btnleft=document.getElementsByClassName("btnl");
    var btnright=document.getElementsByClassName("btnr");
    var txt=document.getElementsByClassName("txt");
    var price=document.getElementsByClassName("price");
    var smallprice=document.getElementsByClassName("smallprice");
    var tottal=document.getElementsByClassName("tottal")[0];
    var totta=0;
    var btn=document.getElementsByClassName("btn")[0];
    var btnf=document.getElementsByClassName("btnf")[0];
    var box=document.getElementsByClassName("box");
    var btndelte=document.getElementsByClassName("btndelte");
    var trde=document.getElementsByClassName("trde");
    //1.先獲取數量的左右按鈕
    //利用for循環來遍歷全部按鈕
    for(var i=0;i<btnleft.length;i++){
        //得到每個按鈕的索引 因爲按鈕 數量文本框的索引值都是相同的 於是經過索引對索引來改變數量
        btnleft[i].index=i;
        btnleft[i].onclick=function(){
            var val=txt[this.index].value;
            val--;
            if(val<=1){
                val=1;
            }
            txt[this.index].value=val;
            addsmall(this.index);
            tottalprice();
        };
        btnright[i].index=i;
        btnright[i].onclick=function(){
            var val=txt[this.index].value;
            val++;
            txt[this.index].value=val;
            addsmall(this.index);
            tottalprice();
        };
        box[i].onclick=function(){//5.當點擊box時計算總價
            tottalprice();
        };
        btndelte[i].index=i;
        btndelte[i].onclick=function(){
            trde[this.index].remove();//6.刪除不要的物品
            for(var k=0;k<trde.length;k++){
                trde[k].index=k;
                btndelte[k].index=k;//更新索引 ：刪除一行，索引必須從新賦值
                
            }
        }
    }
    //2.經過數量與price來計算小計
    function addsmall(index){
         smallprice[index].innerText=(txt[index].value*price[index].innerText)
    }
    //3.計算總價 讓全部小計相加賦值給totta
    function tottalprice(){
        totta=0;
        for(var i=0;i<smallprice.length;i++){
            if(box[i].checked){
                totta+=parseFloat (smallprice[i].innerText);
            }
        }
        tottal.innerText=totta;
    }
    //4.全選，反選計算總價
    btn.onclick=function(){
      for(var i=0;i<box.length;i++){
        box[i].checked=true;
      }
        tottalprice()
    };
    btnf.onclick=function(){
        for(var i=0;i<box.length;i++){
            box[i].checked=!box[i].checked;
        }
        tottalprice()
    };
</script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。