整理了一下当时学js写的一些案例，觉得购物车功能在一般网站比较常见且基础，现在把它整理出来，需要的小伙伴可以参考一下。

该案例购物车主要功能如下：

1、 商品单选、全选、反选功能

2、 商品添加、删除功能

3、 商品价格自动计算

具体效果：

打开效果



添加商品数量（自动计算价格）：



取消选择：



删除商品：



商品显示与隐藏：



做这个案例呢我用了之前自己封装的框架，所以需要的小伙伴，要到我的另一篇文章里面自己下载喔，链接：https://www.cnblogs.com/xyyl/p/10912037.html

html代码：

<body onselectstart="return false;">

<template id="temp">

    <tr>

        <td>

            <input type="checkbox" class="check" checked>

        </td>

        <td>

            <img src="images/{src}">{txt}

        </td>

        <td>{price}</td>

        <td>

            <span class="reduce">-</span><input class="text" value="1"><span class="add">+</span>

        </td>

        <td>{subtotal}</td>

        <td>

            <span class="del">删除</span>

        </td>

    </tr>

</template>

<div class="box" id="box">

    <table>

        <thead>

        <tr>

            <th>

                <label>

                    <input type="checkbox" class="checkAll check" checked>全选

                </label>

            </th>

            <th>商品</th>

            <th>单价</th>

            <th>数量</th>

            <th>小计</th>

            <th>操作</th>

        </tr>

        </thead>

        <tbody id="tbody">

        </tbody>

    </table>

    <div class="bottom" id="bottom">

        <aside>

        </aside>

        <label>

            <input type="checkbox" class="checkAll check" checked>全选

        </label>

        <span class="delAll">全部删除</span>

        <div>已选商品：

            <span class="selected" id="num">3</span>件

        </div>

        <a href="#" class="show">显示或隐藏</a>

        <div>合计：￥

            <span class="total" id="total">7000</span>

        </div>

        <div class="js">结算</div>

    </div>

</div>

CSS代码

  body {

            background-color: #bcdecf;

        }

        div.box {

            width: 700px;

            margin: 50px auto 0;

        }

        div.box table {

            border-collapse: collapse;

            width: inherit;

            text-align: center;

            background-color: #f6f6f6;

        }

        div.box table td, div.box th {

            border: 1px solid #999;

        }

        div.box th {

            height: 40px;

        }

        div.box table tbody img {

            height: 50px;

        }

        div.box table tbody tr span {

            cursor: default;

        }

        div.box table tbody tr td:nth-child(2) img {

            vertical-align: middle;

        }

        div.box table tbody tr td:nth-child(4) span {

            display: inline-block;

            width: 15px;

            line-height: 30px;

            background-color: #666;

            color: #eee;

            vertical-align: middle;

        }

        div.box table tbody tr td:nth-child(4) input {

            width: 20px;

            height: 20px;

            outline: none;

            vertical-align: middle;

            text-align: center;

        }

        div.box table tbody tr td:nth-child(6) span {

            padding: 4px 10px;

            background-color: #999;

            color: white;

        }

        div.box div.bottom {

            padding: 15px 0;

            margin-top: 15px;

            height: 25px;

            background-color: white;

            display: flex;

            justify-content: space-between;

            position: relative;

        }

        div.box div.bottom span.delAll {

            cursor: default;

        }

        div.box div.bottom div.js {

            padding: 0 6px;

            background-color: #00A5FF;

            color: white;

            margin-right: 10px;

            cursor: default;

        }

        div.box div.bottom aside div {

            display: inline-block;

        }

        div.box div.bottom aside div span {

            position: absolute;

            width: 50px;

            line-height: 20px;

            padding: 0 5px;

            background-color: rgba(255, 255, 255, .4);

            color: #333;

            font-size: 10px;

            margin-left: -60px;

            margin-top: 20px;

            transform: rotate(30deg);

            cursor: pointer;

        }

        div.box div.bottom aside img {

            height: 60px;

            vertical-align: middle;

        }

        div.box div.bottom aside {

            position: absolute;

            background-color: #0a74cb;

            width: 100%;

            top: -70px;

            padding: 5px;

            box-sizing: border-box;

            display: none;

        }

        div.box div.bottom aside.on {

            display: block;

        }

        div.box div.bottom aside:after {

            position: absolute;

            content: "";

            border: 10px solid transparent;

            border-top-color: #0a74cb;

            bottom: -19px;

            right: 280px;

        }

        div.box div.bottom a, div.box div.bottom a:visited {

            color: #0b97ff;

            text-decoration: none;

        }

JS代码

   function $(exp){//获取元素

        var el;

        if (/^#\w+$/.test(exp)){

            el=document.querySelector(exp);

        } else {

            el=document.querySelectorAll(exp);

        }

        return el;

    }

    var arr = [];/*表单的数据*/

    arr[arr.length] = {src: '1.jpg', txt: 'Casio/卡西欧 EX-TR350', price: 5999.88};

    arr[arr.length] = {src: '2.jpg', txt: 'Canon/佳能 PowerShot SX50 HS', price: 3888.50};

    arr[arr.length] = {src: '3.jpg', txt: 'Sony/索尼 DSC-WX300', price: 1428.50};

    arr[arr.length] = {src: '4.jpg', txt: 'Fujifilm/富士 instax mini 25', price: 640.60};

    var temp=$('#temp').innerHTML;

    var tbody=$('#tbody');

    arr.forEach(function (el) {//把数据插入到HTML中

        tbody.innerHTML += temp.replace("{src}", el.src).replace("{txt}", el.txt).replace("{price}", el.price)

            .replace("{subtotal}", el.price);

    });

    var trs=$('#tbody tr');

    var box=$('#box');

    var aside=$('#bottom aside')[0];

    box.onclick=function (ev) {

        //利用事件冒泡的原理，把事件添加给父级box

        var e=ev||event;

        var target=e.target||e.srcElement;//获取当前点击对象

        var cls=target.className;

        if (cls.indexOf("check")!=-1)cls='check';

        switch (cls) {

            case 'add'://添加商品数量

                var tr=target.parentNode.parentNode;//找到点击过那一行

                var tds=tr.cells;

                target.previousSibling.value++;//数量那一栏的数字加一

                tds[4].innerText=(tds[2].innerText*target.previousElementSibling.value).toFixed(2);

                //修改小计里面的价格

                break;

            case 'reduce'://减少商品数量

                var tr=target.parentNode.parentNode;//找到点击过那一行

                var tds=tr.cells;

                if (target.nextElementSibling.value!=1) target.nextElementSibling.value--;

                //数量那一栏减一

                tds[4].innerText=(tds[2].innerText*target.nextElementSibling.value).toFixed(2);

                //修改小计里面的价格

                break;

            case 'text'://直接修改数量那一栏input的值

                var tr=target.parentNode.parentNode;

                var tds=tr.cells;

                target.onblur=function () {//失去焦点时执行

                    tds[4].innerText=(tds[2].innerText*this.value).toFixed(2);

                    this.onblur=null;//销毁事件

                };

                break;

            case 'del': //删除商品

                var tr=target.parentNode.parentNode;

                if (confirm('你确定要删除吗？'))

                    tbody.removeChild(tr);

                break;

            case 'check'://复选框选择商品

                chk(target);//执行复选框函数

                break;

            case 'delAll'://删除全部商品

                if (confirm('你确定要删除吗？'))

                    tbody.innerHTML='';

                break;

            case 'show'://显示、隐藏商品

                aside.classList.toggle('on');

                break;

            case 'cancel':

                var index=target.getAttribute('data-index');

                trs[index].cells[0].children[0].checked=false;

        }

        total();//计算价格

    };

    var total_all=$('#total');

    var num=$('#num');

    total();

    function total() {//计算价格

        var sum=0,number=0;

        trs=$('tbody tr');

        var str='';

        trs.forEach(function (tr,i) {

            //遍历每一行判断，将已选择商品添加到显示隐藏里面

            var tds=tr.cells;

            if (tds[0].children[0].checked){

                sum+=parseFloat(tds[4].innerText);

                number+=parseInt(tds[3].children[1].value);

                str+=`<div><img src="images/${i+1}.jpg"><span class="cancel" data-index="${i}">取消选择</span></div>`

            }

            total_all.innerText=sum.toFixed(2);

            num.innerText=number;

            aside.innerHTML=str;

        })

    }

    var checkAll=$('#box .checkAll');

    function chk(target) {//复选框判断

        var cls=target.className;

        var flag = true;

        if (cls==='check'){//点击非全选复选框

            /*当存在一个复选框未选中，全选框为false*/

            for (var i = 0; i < trs.length; i++) {

                var checkbox = trs[i].cells[0].children[0];

                if (!checkbox.checked) {

                    flag = false;

                    break

                }

            }

            checkAll[0].checked = checkAll[1].checked = flag;

        }else {//点击全选复选框，所有复选框的状态保持一致

            for (var i = 0; i < trs.length; i++) {

                var checkbox = trs[i].cells[0].children[0];

                checkbox.checked = target.checked;

            }

            checkAll[0].checked = checkAll[1].checked = target.checked;

        }

    }

JS实现购物车动态功能的更多相关文章

  1. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  3. 用vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  4. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  5. Github Page+Bmob实现简单动态功能

    Github Page基于jekyll能够实现简单的静态网站,但是没有提供后端服务.目前国内外也有很多提供后台服务,特别是云服务.譬如国外有AWS,记得好像是注册免费使用一年:再如Heroku,支持N ...

  6. JS实现购物车02

    需求使用JS实现购物车功能02 具体代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. JS实现购物车01

    需求 使用JS实现购物车功能01 具体代码 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. Vue node.js商城-购物车模块

      一.渲染购物车列表页面 新建src/views/Cart.vue获取cartList购物车列表数据就可以在页面中渲染出该用户的购物车列表数据 data(){   return {      car ...

  9. 利用scrapy-splash爬取JS生成的动态页面

    目前,为了加速页面的加载速度,页面的很多部分都是用JS生成的,而对于用scrapy爬虫来说就是一个很大的问题,因为scrapy没有JS engine,所以爬取的都是静态页面,对于JS生成的动态页面都无 ...

随机推荐

  1. cerery

    cerery http://docs.celeryproject.org/en/latest/userguide/index.html

  2. java使用ftp局域网内多线程上传图片过慢

    多线程ftp上传文件时候,图片上传很慢,调试和查询资料发现主要在:storeFile方法 解决方案如下: FTPClient fc设置setBufferSize 可以根据内存大小适当设置大点的缓冲区: ...

  3. SAP bseg 使用注意点:1.不要使用；2.有主键再用，

    粗表-簇表 cluster-table BSEGRFBLG 池表 pool-table 我記的沒錯的話,在21天學會ABAP中有一節是專門在講Cluster table,另外在 www.sapfans ...

  4. 【C++基础学习】Vector

    代码练习: #include <iostream> #include <vector> using namespace std; int main(){ cout <&l ...

  5. 关于node.js的安装与删除

    安装node.js 先切换到root用户安装 openssl-devel su - yum install openssl-devel 下载源代码自己编译以下代码中的tar.gz包根据node.js官 ...

  6. 一篇文章搞明白CORS跨域

    面试问到数据交互的时候,经常会问跨域如何处理.大部分人都会回答JSONP,然后面试官紧接着就会问:"JSONP缺点是什么啊?"这个时候坑就来了,如果面试者说它支持GET方式,然后面 ...

  7. VK Cup 2012 Qualification Round 1 E. Phone Talks —— DP

    题目链接:http://codeforces.com/contest/158/problem/E E. Phone Talks time limit per test 3 seconds memory ...

  8. html5--5-15 绘制阴影

    html5--5-15 绘制阴影 实例 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  9. php函数的参数引用变量

    在php.ini中将allow_call_time_pass_reference的值改为'on'.

  10. nyoj 86 --位标记

    nyoj 86 --位标记 点击打开题目链接 :                        找球号(一)  这道题目很多解法,其他解法请参考 http://www.cnblogs.com/play ...