原生js實現購物車結算

CBD發表於2019-11-08
JS

網上有很多這裡的案例，大致相同，只是我自己做完的案例，想保留下來以方便後期檢視而已； 實現效果如下：

原生js實現購物車結算
原生js實現購物車結算
程式碼如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>購物車結算</title>
    <style>
    *{margin: 0;padding: 0;}
    li{list-style: none;}
    .box{
        width:820px;
        margin:5px auto;
    }
    .nav{
        width: 100%;
        height:40px;
        background:#eee;
        border-top: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
    }
    ul li{
        display:inline-block;
        width: 200px;
        text-align: center;
    }
    .nav ul li{
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        height: 40px;
        font-weight: bold;
        line-height: 40px;
    }
    .con1{
        height:220px;
        border-bottom:1px solid #bbb;
        height:220px;
    }
    .con1 li{
       height:220px;
       text-align: center;
       line-height:220px;
       vertical-align:middle;
    }
    input[disabled]{  
    color:red;  
    opacity: 1;  
    border: none;
    background: transparent;
    } 
    input{
        width:40px;
        margin:30px auto;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="nav">
            <ul>
                <li>商品</li>
                <li>單價</li>
                <li>數量</li>
                <li>總計</li>
            </ul>
        </div>
        <div class="con">
            <ul class="con1">
                <li><img src="images/shop1.jpg"></li>
                <li><input type="text" name="price" value="8" disabled/></li>
                <li><input type="button" name="minus" value="-" onclick="minus(0);"><input type="text" name="amount" value="0"><input type="button" name="plus" value="+" onclick="plus(0);"></li>
                <li id="price0">￥8
                </li>
            </ul>
            <ul class="con1">
                <li><img src="images/shop2.jpg"></li>
                <li><input type="text" name="price" value="10" disabled/></li>
                <li><input type="button" name="minus" value="-" onclick="minus(1);"><input type="text" name="amount" value="0"><input type="button" name="plus" value="+" onclick="plus(1);"></li>
                <li id="price1">￥10
                </li>
            </ul>
            <ul class="con1">
                <li><img src="images/shop3.jpg"></li>
                <li><input type="text" name="price" value="12.5" disabled/></li>
                <li><input type="button" name="minus" value="-" onclick="minus(2);"><input type="text" name="amount" value="0"><input type="button" name="plus" value="+" onclick="plus(2);"></li>
                <li id="price2">￥12.5
                </li>
            </ul>
            <ul class="con1">
                <li><img src="images/shop4.jpg"></li>
                <li><input type="text" name="price" value="23" disabled/></li>
                <li><input type="button" name="minus" value="-" onclick="minus(3);"><input type="text" name="amount" value="0"><input type="button" name="plus" value="+" onclick="plus(3);"></li>
                <li id="price3">￥23
                </li>
            </ul>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li id="totalPrice" > 已選<span></span>￥<br>
                    已選<span onclick="accounts();"></span>件
                </li>
            </ul>
        </div>
    </div>
    <script src="js/index.js"></script>
</body>
</html>
複製程式碼

js程式碼如下：

 //減
function minus(num){
    var prices=document.getElementsByName("price")[num].value;
    var count=parseInt(document.getElementsByName("amount")[num].value)-1;
    if(count<0){
        alert("已經沒有了！");
    }
    else{
        document.getElementsByName("amount")[num].value=count;
        var totals=parseFloat(prices*count);
        document.getElementById("price"+num).innerHTML="¥" +totals.toFixed(2);
        total();
    }
}
//增
function plus(num){
    var prices=document.getElementsByName("price")[num].value;
    var count=parseInt(document.getElementsByName("amount")[num].value)+1;
    document.getElementsByName("amount")[num].value=count;
    var totals=parseFloat(prices*count);
    document.getElementById("price"+num).innerHTML="¥" +totals.toFixed(2);
    total();
}
function total(){
    var prices=document.getElementsByName("price");
    var count=document.getElementsByName("amount");
    var sum=0;
    for(var i=0; i<prices.length;i++){
       sum+=prices[i].value*count[i].value;
    }
    document.getElementById("totalPrice").getElementsByTagName("span")[0].innerHTML="¥" +sum.toFixed(2);
}
複製程式碼

新手也容易懂，有問題聯絡哦！QQ：1281308340

相關文章