导航首页 »  JavaScript代码  » js实现购物车加减和价格运算

js实现购物车加减和价格运算

王朝235网址导航 2021-10-17 69 ℃

本文实例为大家分享了js实现购物车加减和价格运算的具体代码,供大家参考,具体内容如下


主要实现功能:购物车的加减,单件商品价格的运算,总价格的运算。价格保留两位小数。

202181990511189.jpg

<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span onclick="guan()">关闭</span>
    </div>
    <div class="cartList" id="zong">
        <ul>
            <li >¥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>¥<input type="text" name="price" value="21.90" id="yiqian"></li>
            <li><p onclick="shou()">移入收藏</p><p onclick="shan()">删除</p></li>
        </ul>
        <ul>
            <li >¥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>¥<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>
    <h3 id="shijian">现在是:</h3>
</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;
}

用的是最基本的方式,便于初学者看懂,特别是知识点有短板的额,基本上都能看懂。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持王朝235网址导航。

免责声明
文章内容由王朝235网址导航整理发布,仅供学习交流使用,不代表本站的观点和立场,具体内容请自行甄别。
加入好处
简单来说就是可以给您的网站提升权重排名,增加外链和网站流量!如果细分的话那么有如下几个好处!
让您的网站更快、更多地被搜索引擎收录
让您的网站名称的关键词在搜索引擎的搜索结果的第一页甚至第一个
通过本站这个分类目录平台从而给您的网站带来巨大流量
如您网站被搜索引擎屏蔽,王朝235网址导航永久缓存贵站信息,通过这个页面浏览者照样借助王朝235网址导航进入您的网站!
温馨提示:如果贵站想上百度,希望贵站能添加本页面为友情链接,感谢您对本站的支持!
<a href="http://www.wc235.com" target="_blank">王朝235网址导航</a>