js怎么實現購物車加減和價格運算功能

本篇內容介紹了“js怎么實現購物車加減和價格運算功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

主要實現功能：購物車的加減，單件商品價格的運算，總價格的運算。價格保留兩位小數。

<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span onclick="guan()">關閉</span>
    </div>
    <div class="cartList" id="zong">
        <ul>
            <li >&yen;21.90</li>
            <li><input type="button" name="minus" value="-" onclick="jian()"><input type="text" name="amount" value="1" id="shang"><input type="button" name="plus" value="+" onclick="jia()"></li>
            <li>&yen;<input type="text" name="price" value="21.90" id="yiqian"></li>
            <li><p onclick="shou()">移入收藏</p><p onclick="shan()">刪除</p></li>
        </ul>
        <ul>
            <li >&yen;24.00</li>
            <li><input type="button" name="minus" value="-" onclick="jian1()"><input type="text" name="amount" value="1" id="shang1"><input type="button" name="plus" value="+" onclick="jia1()"></li>
            <li>&yen;<input type="text" name="price" value="24.00"id="erqian" ></li>
            <li><p onclick="shan()">移入收藏</p><p onclick="shan()">刪除</p></li>
        </ul>
        <ol>
            <li id="totalPrice" > 0.00</li>
            <li><span onclick="jie()">結 算</span></li>
        </ol>
    </div>
    <h4 id="shijian">現在是：</h4>
</div>

上邊是html頁面

以下是JS腳本

var price = 0.00;
var price1 = 0.00;
var price2 = 0.00;

function jian() {
    var i = parseInt(document.getElementById("shang").valueOf().value) - 1;
    if (i <= 0) {
        i = 0;
    }
    document.getElementById("shang").valueOf().value = i;
    price1 = 21.90 * i;
    document.getElementById("yiqian").value=suan(price1);
    zong();
}
function jia() {
    var i = parseInt(document.getElementById("shang").valueOf().value) + 1;
    document.getElementById("shang").valueOf().value = i;
    price1 = 21.90 * i;
    document.getElementById("yiqian").value=suan(price1);
    zong();
}
function jian1() {
    var i = parseInt(document.getElementById("shang1").valueOf().value) - 1;
    if (i <= 0) {
        i = 0;
    }
    document.getElementById("shang1").valueOf().value = i;
    price2 = 24.00 * i;
    document.getElementById("erqian").value=suan(price2);
    zong();
}
function jia1() {
    var i = parseInt(document.getElementById("shang1").valueOf().value) + 1;
    document.getElementById("shang1").valueOf().value = i;
    price2 = 24.00 * i;
    document.getElementById("erqian").value=suan(price2);
    zong();
}

function suan(number) {
    price = price1 + price2;
    if (isNaN(number)) {
        return false;
    }
    number = Math.round(number * 100) / 100;
    var s = number.toString();
    var rs = s.indexOf(".");
    if (rs < 0) {
        rs = s.length;
        s += ".";
    }
    while (s.length <= rs + 2) {
        s += "0";
    }
    return s;
}
function zong() {
    price = price1 + price2;
    if (isNaN(price)) {
        return false;
    }
    price = Math.round(price * 100) / 100;
    var s = price.toString();
    var rs = s.indexOf(".");
    if (rs < 0) {
        rs = s.length;
        s += ".";
    }
    while (s.length <= rs + 2) {
        s += "0";
    }
    document.getElementById("totalPrice").innerHTML=s;
}

“js怎么實現購物車加減和價格運算功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！