原生js实现购物车相关功能

原创 2018年04月17日 14:46:37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现购物车的相关功能</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        table{
            width: 600px;
            border-collapse: collapse;
        }
        th,td{
            border:1px solid #000;
            width: 150px;
            /*padding:5px 40px;*/
            text-align: center;
        }
        #chart{
            width: 800px;
            margin:100px auto;
        }
        button{
            width: 20px;
            height: 20px;
        }
        thead{
            background-color: aquamarine;
        }
        tfoot{
            background-color: transparent;
        }
    </style>
</head>
<body>
    <div id="chart">
        <table>
            <thead>
                <tr>
                    <th>商品名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td>iPhone6</td>
                <td>¥4488</td>
                <td>
                    <button onclick="calc(this)">-</button>
                    <span>0</span>
                    <button onclick="calc(this)">+</button>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>iPhone7</td>
                <td>¥7488</td>
                <td>
                    <button onclick="calc(this)">-</button>
                    <span>0</span>
                    <button onclick="calc(this)">+</button>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>iPhone8</td>
                <td>¥8488</td>
                <td>
                    <button onclick="calc(this)">-</button>
                    <span>0</span>
                    <button onclick="calc(this)">+</button>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>iPhoneX</td>
                <td>¥9488</td>
                <td>
                    <button onclick="calc(this)">-</button>
                    <span>0</span>
                    <button onclick="calc(this)">+</button>
                </td>
                <td>
                </td>
            </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" align="right">Total</td>
                    <td>0.00</td>
                </tr>
            </tfoot>
        </table>
    </div>



<script src="js/jquery-3.2.1.min.js"></script>
<script>
//    创建函数 calc
    function calc(btn) {
//        第一步:修改数量
//        获得btn的父节点保存在变量td中
        var td=btn.parentNode;
        console.log(td);
//        获取td下的唯一一个span元素,保存在变量span中
        var span=td.querySelector("span");
        console.log(span);
//        获得span的内容,保存在变量n中,并转化其string形式为number形式
        var n=parseInt(span.innerHTML);
        console.log(typeof(n));
//        判断:如果btn是+,就+1;否则,如果已经是1,就为0,否则就—1;
        n+=btn.innerHTML=="+"?1:n==0?0:-1;
//        设置span的内容为n
        span.innerHTML=n;
//        计算小计
//获得td的前一个兄弟元素的内容,从?位截取,转为浮点数后,保存在变量price中
        var price=parseFloat(td.previousElementSibling.innerHTML.slice(1));
        console.log(typeof (price));
//        设置td的后一个兄弟元素的内容为"&yen;"+price*n,要求小计要按2位小数四舍五入
        var total=td.nextElementSibling.innerHTML="&yen;"+price*n.toFixed(2);
//        计算总和
//        获得id为chart下的tbody下的每个tr下的最后一个td,保存在变量tds中
        var data=document.getElementById("chart");
        console.log(data);
        var tds=data.querySelectorAll("tbody>tr>td:last-child");
        console.log(tds);
        for(var i=0,sum=0;i<tds.length;i++){
            //        遍历tds中每一个td,同时声明变量sum为0
            sum+=parseFloat(tds[i].innerHTML.slice(1));
        }//遍历结束
//        设置id为chart下的tfoot下的tr下的最后一个td的内容为:
//        "&yen;"+sum.toFixed(2);
        data.querySelector("tfoot>tr>td:last-child").innerHTML="&yen;"+sum.toFixed(2);
    }

</script>

</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yingleiming/article/details/79974716

原生JS实现购物车结算

http-equiv="Content-Type" content="text/html; charset=utf-8"/>   原生JS实现购物车结算功能代码   ...
  • J_1221
  • J_1221
  • 2017-04-04 23:19:26
  • 2316

原生JS实现购物车结算功能代码

  • 2015年11月11日 16:24
  • 92KB
  • 下载

原生js实现简易购物车效果

Document *{margin: 0;padding: 0;} ul{list-style: none;} a{text-decoration: none;} .box{ widt...
  • qwe502763576
  • qwe502763576
  • 2018-01-21 14:36:58
  • 167

javascript项目实战之原生js模拟淘宝购物车

通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现。实现的效果图: 相应的代码: shoppingCart.html ...
  • i10630226
  • i10630226
  • 2015-10-05 23:14:00
  • 2277

Android实现购物车功能

main     android:layout_width="match_parent"     android:layout_height="match_parent"     android:...
  • qq_39792005
  • qq_39792005
  • 2017-10-22 20:36:06
  • 198

原生JS实现购物车的添加删除,以及总价计算的功能

add方法,传入一个参数items。items是一个数组,数组元素为{name:String,price:Number}。通过add方法可以在在购物车列表新增商品 bind方法,实现点击删除,能够删除...
  • qq_30604453
  • qq_30604453
  • 2017-09-09 11:19:11
  • 1732

Ejb in action(四)——购物车实例演示有状态会话Bean

前面,我们介绍了一个入门实例,其实那就是无状态回话Bean的常用情况。 上一篇文章中,我们介绍了无状态会话Bean和有状态会话Bean的相关概念。为了加深大家对它们的理解,我们一起来实现一个有状态会...
  • liu765023051
  • liu765023051
  • 2014-05-13 15:33:50
  • 2644

javascript购物车实现详细代码讲解

我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算。购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车中的某一...
  • zhongguohaoshaonian
  • zhongguohaoshaonian
  • 2016-09-27 21:13:37
  • 43624

商城项目实战35:购物车功能实现

1 需要实现 1、 实现淘淘商城的购物车功能 2 购物车功能 2.1 功能说明 1、商品加入购物车时,不是必须要求登录。京东不需要登录,淘宝需要登录。各有好处。 2、计算购物车中商品的总价。...
  • xxssyyyyssxx
  • xxssyyyyssxx
  • 2017-06-06 11:25:59
  • 5359

JSP+javabean实现购物车功能

简单的小程序,java后台 + Web前端,可以实现购物车的添加,删除等功能,并没有用到数据库。而是用到的session存取功能。                                   ...
  • qq_28306215
  • qq_28306215
  • 2016-12-05 20:24:34
  • 6166
收藏助手
不良信息举报
您举报文章:原生js实现购物车相关功能
举报原因:
原因补充:

(最多只允许输入30个字)