JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

js实现购物车加减以及价格计算功能

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实现购物车加减以及价格计算功能，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

需求说明：

1、单击“半闭”按钮时，关闭当前页面购物车页面
2、单击“移入收藏”弹出收藏提示
3、单击“删除”弹出确认删除提示
4、单击“结算”按钮，弹出结算信息页面窗口
5、自动计算商品总计
6、单击“删除”按钮，使用parentNode访问当前节点的父亲节点等，使用removeChild( )删除当前商品

效果图：

代码：

<!DOCTYPE htML>
<html>
<head lang="en">
    <;meta charset="UTF-8">
    <tITle>完善当当购物车页面</title>
    <style type="text/css">
     body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;}
ul,li,ol{list-style: none;}
.content{width: 810px; margin: 0 auto;  font-family: "微软雅黑";}
.LOGo{margin: 10px 0;}
.logo span{
    display: inline-block;
    float: right;
    width: 60px;
    height: 30px;
    line-height: 30px;
    font-Size: 14px;
    background: #ff0000;
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    margin-top: 5px;
    margin-right: 10px;
    cursor: pointer;
    font-weight: bold;
}
.cartList{
    /*background: url("../image/02.jpg") no-repeat;*/
    /*height: 414px;*/
    overflow: hidden;
}
.cartList ul{
    display: flex;
    justify-content: space-between;
    /*float: right;*/
    /*width: 450px;*/
}
.cartList ul:nth-of-type(1){
    display: flex;
    margin-top: 125px;
}
.cartList ul:nth-of-type(2){
    margin: 20px 0;
}
.cartList ul li{
    font-family: "微软雅黑";
    font-size: 12px;
    color: #666666;
    text-align: center;
    line-height: 25px;
    /*float: left;*/
}
.cartList ul li input[name="PRice"]{
    border: none;
    background: transparent;
    width: 45px;
    text-align: center;
}
.cartList ul li input[name="amount"]{
    width: 45px;
    text-align: center;
    border: 1px solid #999999;
    border-left: none;
    border-right: none;
    height: 21px;
}
.cartList ul li input[name="minus"],.cartList ul li input[name="plus"]{
    height: 25px;
    border: 1px #999999 solid;
    width: 25px;
    text-align: center;
}
.cartList ul li:nth-of-type(1){width: 130px;}
.cartList ul li:nth-of-type(2){width: 100px;}
.cartList ul li:nth-of-type(3){width: 130px;}
.cartList ul li p{cursor: pointer;}
.cartList ol{
    float: right;
    clear: both;
    margin-top: 40px;
}
.cartList ol li{
    float: left;
}
.cartList ol li:nth-of-type(1){
    color: #ff0000;
    width: 80px;
    height: 35px;
    line-height: 35px;
    text-align: center;
}
.cartList ol li span{display: inline-block;
    float: right;
    width: 80px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    font-family: "微软雅黑";
    background: #ff0000;
    color: #ffffff;
    text-align: center;
    /*margin-top: 5px;*/
    /*margin-right: 15px;*/
    cursor: pointer;
    font-weight: bold;}
 
    </style>
</head>
 
<!--onload，在加载时计算好原始金额-->
<body onload="total()">
 
<div class="content">
    <div class="logo">
        <span onclick="javascript:if (confirm('确认要关闭吗'))window.close() ">关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li>商品信息</li>
            <li>商品图片</li>
            <li>单价（元）</li>
            <li>数量</li>
            <li>金额（元）</li>
            <li>操作</li>
        </ul>
        <ul style="display: flex;justify-content: space-between;align-items: center" id="First">
            <li>《平凡的世界》</li>
            <li><img src="./img/1.png" alt="" width="50" height="50"></li>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(0)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0)" ></li>
            <li id="price0">¥21.90</li>
            <li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li>
        </ul>
        <ul style="display: flex;justify-content: space-between;align-items: center; margin: 20px 0;">
            <li>《昆虫记》</li>
            <li><img src="./img/2.png" alt="" width="50" height="50"></li>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(1)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1)"></li>
            <li id="price1">¥24.00</li>
            <li><p onclick="save()">移入收藏</p><p onclick="delete1()">删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice">&amp;nbsp;</li>
            <li><span>结算</span></li>
        </ol>
    </div>
</div>
</body>
</html>
 
<script>
    //减法
    function minus(index) {
        //获取当前数量的值
        VAR amounts=document.getElementsByName("amount");
 
        //得到第一个amount的元素的value属性的值
        var count=parseInt(amounts[index].value); //数量加1
 
        if (count<=1){
            alert("不能再减了，快没了！！");
        } else {
            //得到第一个amount的元素的value属性的值
            var count=parseInt(amounts[index].value)-1; //数量加1
 
            //重新把count的值绑定在数量文本框里
            amounts[index].value=count;
            var prices=document.getElementsByName("price");
            var price=parseFloat(prices[index].value);
            //乘以Math.pow(10,2)的原因为避免失真
            var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
 
            document.getElementById("price"+index).innerHTML="¥："+totalMoney;
        }
 
        total();
 
    }
 
    //加法
    function plus(index) {
 
        //获取当前数量的值
        var amounts=document.getElementsByName("amount");
 
        //得到第一个amount的元素的value属性的值
        var count=parseInt(amounts[index].value)+1; //数量加1
 
        //重新把count的值绑定在数量文本框里
        amounts[index].value=count;
 
        //当前操作端口的价格也要重新计算
        //得到当前端口的单价
        var prices=document.getElementsByName("price");
        var price=parseFloat(prices[index].value);
        //乘以Math.pow(10,2)的原因为避免失真
        var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
 
        //把当前价格显示在文本中
        document.getElementById("price"+index).innerHTML="¥："+totalMoney;
 
        total();
    }
 
 
    //求总金额
 
    function total() {
 
        //得到所有的数量
        var counts=document.getElementsByName("amount");
 
        //得到所有的单价
        var prices=document.getElementsByName("price");
 
        var sumMoney=0;
 
        for (var i=0;i<counts.length;i++){
 
            //乘以Math.pow(10,2)的原因为避免失真
            sumMoney+=(parseFloat(prices[i].value)*Math.pow(10,2)*parseInt(counts[i].value)/Math.pow(10,2));
        }
 
        //把总金额显示再指定的元素中
        document.getElementById("totalPrice").innerHTML="¥："+sumMoney;
 
    }
 
 
    //加入收藏
    function save() {
        if (confirm("确认要收藏吗？")){
            alert("收藏成功！");
        }
 
    }
    //删除
    function delete1() {
        if (confirm("确认要删除吗？")) {
            var del=document.getElementById("first");
            del.parentNode.removeChild(del);
            alert("删除成功！！");
        }
    }
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的js实现购物车加减以及价格计算功能全部内容，希望文章能够帮你解决js实现购物车加减以及价格计算功能所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：js购物车加减
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程