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

通过JavaScript实现类似与淘宝的购物车效果，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现。实现的效果图：

相应的代码：

shoppingCart.html

<!DOCTYPE html>

<html>

<head>

    <meta charset = "UTF-8">

    <title>JavaScript实现购物车项目实战</title>

    <link rel="stylesheet" type="text/css" href="./css/shoppingCart.css">

    <script type="text/javascript" src="./js/shoppingCart.js"></script>

</head>

<body>

    <table id="cartTable">

        <thead>

            <tr class="order_content">

                <th><input class="check_all check" type="checkbox"></input>&nbsp;全选</th>

                <th>商品</th>

                <th>单价</th>

                <th>数量</th>

                <th>小计</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody>

            <tr class="order_content">

                <td class="check"><input class = "check_one check" type="checkbox"></input></td>

                <td class="goods"><img src="./imgs/apple6s.png"><span>Iphone 6S</span></td>

                <td class="price">5099.88</td>

                <td class="count">

                    <span class="reduce">-</span>

                    <input class="count_input" type="text" value="1"></input>

                    <span class="add">+</span>

                </td>

                <td class="subtotle">5099.88</td>

                <td class="operation"><span class="delete">删除<span></td>

            </tr>

            <tr class="order_content">

                <td class="check"><input class = "check_one check" type="checkbox"></input></td>

                <td class="goods"><img src="./imgs/macbook.png"><span>MacBook Air</span></td>

                <td class="price">1099.99</td>

                <td class="count">

                    <span class="reduce">-</span>

                    <input class="count_input" type="text" value="1"></input>

                    <span class="add">+</span>

                </td>

                <td class="subtotle">1099.99</td>

                <td class="operation"><span class="delete">删除<span></td>

            </tr>

            <tr class="order_content">

                <td class="check"><input class = "check_one check" type="checkbox"></input></td>

                <td class="goods"><img src="./imgs/ipadmini.png"><span>Ipad mini2 银16g WLAN7.9英寸</span></td>

                <td class="price">6599.00</td>

                <td class="count">

                    <span class="reduce">-</span>

                    <input class="count_input" type="text" value="1"></input>

                    <span class="add">+</span>

                </td>

                <td class="subtotle">6599.00</td>

                <td class="operation"><span class="delete">删除<span></td>

            </tr>

            <tr>

                <td class="check"><input class = "check_one check" type="checkbox"></input></td>

                <td class="goods"><img src="./imgs/applewatch.png"><span>IWatch EXTS Min</span></td>

                <td class="price">9998.68</td>

                <td class="count">

                    <span class="reduce">-</span>

                    <input class="count_input" type="text" value="1"></input>

                    <span class="add">+</span>

                </td>

                <td class="subtotle">9998.68</td>

                <td class="operation"><span class="delete">删除<span></td>

            </tr>

        </tbody>

    </table>

    <div class="slected view">

            <div id="selectedViewList" class="clearfix">

                <!-- <div><img src="./imgs/applewatch.png"><span>取消选择</span></div> -->

            </div>

            <span class="arrow">.<span>.</span></span>

    </div>

    <div id = "footer" class="footer">

        <label class="fl select_all" ><input class="check_all check" type="checkbox">&nbsp;全选</input></label>

        <a class="fl delete_all" id="deleteAll" href="javascript:;">删除</a>

        <div class="fr closing">结算</div>

        <div class="fr selected_totle">合计：￥ <span id="priceTotle">0.00</span> </div>

        <div class="fr selectAll" id="selected">已购商品

            <span id = "selectTotle">0</span>件

            <span class="arow up">+++</span>

            <span class="arow  down">---</span>

        </div>

    </div>

</body>

</html>

shoppingCart.js

window.onload = function(){

    //低版本的IE浏览器不支持getElementByClassName方法，考虑兼容性,重写方法。

    if (!document.getElementByClassName) {

        document.getElementByClassName =function(cls){

            var ret = [];

            var clsElments = document.getElementsByTagName('*');

            for (var i = 0, len = clsElments.length; i < len; i++) {

                //考虑一个标签有多个class的情况,这里用正则表达式会好一点

                if (clsElments[i].className == cls

                    || (clsElments[i].className.indexOf(cls + " ") >= 0)

                    || (clsElments[i].className.indexOf(" " + cls + " ") >= 0)

                    || (clsElments[i].className.indexOf(" " + cls) >= 0))

                {

                    ret.push(clsElments[i]);

                }

            }

            return ret;

        }

    }

    var cartTable = document.getElementById("cartTable");

    var tr = cartTable.children[1].rows;  //table标签特有的属性，rows可以获得表格元素的所有tr行。

    var checkInput = document.getElementByClassName('check');//获得所有的单选框

    var checkAllInput = document.getElementByClassName('check_all');//获得所有的单选框

    var priceTotle = document.getElementById("priceTotle");//总价

    var selectTotle = document.getElementById("selectTotle");//已选商品

    var selected = document.getElementById("selected");

    var footer = document.getElementById("footer");//底部标签

    var selectedViewList = document.getElementById("selectedViewList");//底部标签

    var deleteAll = document.getElementById("deleteAll");

    //计算总价格和数量

    function getTotle(){

        var selectNum = 0;//数量

        var priceNum = 0;//价格

        var HTMLstr = ""; //缩略图的字符串拼接

        for (var i = 0,len = tr.length; i < len; i++) {

            if (tr[i].getElementsByTagName("input")[0].checked) {

                tr[i].className ="on";

                selectNum += parseInt(tr[i].getElementsByTagName("input")[1].value);

                priceNum += parseFloat(tr[i].cells[4].innerHTML);

                //拼接字符串显示已经选择的商品

                HTMLstr += '<div><img src="'+ tr[i].getElementsByTagName('img')[0].src +'"><span class ="del" index ="'+ i +'">取消选择</span></div>';

            }

            else{

                tr[i].className = "";

            }

        }

        selectTotle.innerHTML = selectNum;

        priceTotle.innerHTML = priceNum.toFixed(2);//保留两位小数

        selectedViewList.innerHTML = HTMLstr;

    }

    //计算小计价格

    function getSubTotle(tr){

        var tds = tr.cells;

        var price = parseFloat(tds[2].innerHTML);

        var num = parseInt(tr.getElementsByTagName("input")[1].value);

        var subTotle = parseFloat(price * num).toFixed(2);

        tds[4].innerHTML = subTotle;

    }

    //复选框绑定单击事件

    for (var i = 0, len = checkInput.length; i < len; i++){

        checkInput[i].onclick =function (){

            //判断全选按钮，变更

            if (this.className == "check_all check") {

                for (var j = 0; j < len; j++){

                    checkInput[j].checked = this.checked;

                }

            }

            if (this.checked == false) {

                for (var k = 0,len2 = checkAllInput.length; k < len2; k++){

                    checkAllInput[k].checked = false;

                }

            }

            getTotle();

        }

    }

    //控制底部标签的显示

    selected.onclick = function(){

        if (footer.className == "footer") {

            footer.className == "footer show";

        } else {

            footer.className == "footer";

        }

    }

    //图片缩略图的取消选择按钮功能,e为事件对象

    selectedViewList.onclick = function(e){

        //兼容低版本的IE

/*      if (e){

            e = e;

        }else{

            e = window.event;

        } */

        var e = e || window.event;

        var el = e.srcElement;

        if (el.className == "del") {

            var index = el.getAttribute("index");

            var input = tr[index].getElementsByTagName("input")[0];

            input.checked = false;

            input.onclick();

        }

    }

    //实现加减、删除操作。同样用事件代理的方法实现

    for (var i = 0, len3 = tr.length; i < len3; i++){

        tr[i].onclick = function(e){

            var e = e || window.event;

            var el = e.srcElement;

            var clsName = el.className;

            var input = this.getElementsByTagName("input")[1];

            var inputValue = parseInt(input.value);

            var reduce = this.getElementsByTagName("span")[1];

            switch (clsName){

                case "add":

                    /*parseInt(inputValue) ++;*/

                    input.value = inputValue + 1;

                    reduce.innerHTML ="-";

                    getSubTotle(this);

                    break;

                case "reduce":

                    if(inputValue >= 1){

                        input.value = inputValue - 1;

                    }else{

                        reduce.innerHTML ="";

                    }

                    getSubTotle(this);

                    break;

                case "delete":

                    var conf = confirm("确定删除这个商品？");

                    if (conf) {

                        this.parentNode.removeChild(this);

                    }

                    break;

                default:

                    break;

            }

            getTotle();

        }

        //处理从手动输入商品数量

        tr[i].getElementsByTagName("input")[1].onkeyup = function(){

            var val = this.value;

            var tr = this.parentNode.parentNode;

            if (isNaN(val) || val < 0 ) {

                val = 1;

            }

            this.value = val;

            getSubTotle(tr);

        }

    }

    //全选删除

    deleteAll.onclick = function(){

        if (selectTotle.innerHTML !="0") {

            var conf = confirm("确定删除这些商品？");

            if (conf) {

                for (var i = 0, len = tr.length; i < len; i++) {

                    var input = tr[i].getElementsByTagName("input")[0];

                    if(input.checked){

                        tr[i].parentNode.removeChild(tr[i]);

                    }

                }

            }

        }

    }

}

//取消选择--采用事件代理---放到父元素上。

shoppingCart.css

.count_input{

    width: 39px;

    height: 15px;

    line-height: 15px;

    border: 1px solid #aaa;

    color: #343434;

    text-align: center;

    padding: 4px 0;

    background-color: #fff;

}

span.add, span.reduce{

    height: 23px;

    width: 27px;

    border: 1px solid #e5e5e5;

    background: #f0f0f0;

    line-height: 23px;

    color: #444;

}

.closing{

    display: inline-block;

    width: 120px;

    height: 50px;

    line-height: 50px;

    background: #f40;

    text-align: center;

    font-family: 'Microsoft Yahei';

    font-size: 20px;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    -ms-border-radius: 2px;

    border-radius: 2px;

    text-decoration: none;

    cursor: pointer;

}

.fr{

    float: right;

}

.selected_totle, .selectAll, .select_all, .delete_all{

    margin-top: 15px;

}

.footer{

    height: 50px;

    background: #e5e5e5;

    font-family: 'Microsoft Yahei';

}

#selectTotle, #priceTotle,.subtotle {

    color: #f40;

    font-weight: 700;

    font-size: 18px;

    font-family: tohoma,arial;

    padding: 5px;

}

javascript项目实战之原生js模拟淘宝购物车的更多相关文章

原生js仿淘宝手机购买选项代码
这是一款基于原生js实现仿淘宝手机信息购买选项效果源码,界面整体效果仿照淘宝购物选项设计,点击不同选项还可实时显示不同的价格计算结果,界面简洁大方.美观实用.可兼容目前最新的各类主流浏览器. 在线演示 ...
jquery模拟淘宝购物车
今天要实现的一个功能页面就是利用jquery代码模拟一个淘宝网的购物车结算页面总体页面效果如图: 首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选 ...
Vue(小案例_vue+axios仿手机app)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）
一.前言在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变 ...
原生JS实现淘宝无缝轮播
<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content=& ...
用jQuery模拟淘宝购物车
首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中"全选"复选框时,所有商品前的复选框被选中,否则所有商品的复选框取消选中. 2.当所有商品前的复选框选中时,&qu ...
js 实现淘宝无缝轮播图效果，可更改配置参数带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果需求分析: ...
js 实现淘宝放大镜功能，可更改配置参数带完整版解析代码[magnifier.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝放大镜效果基本功能: 运 ...
php单点登录之模拟淘宝天猫同步登录
说到单点登录大家都很了解,一个站点登录其他域会自动登录. 单点登录SSO(Single Sign On)的方法有很多,比如:p3p.共享session.共享cookice.第三方OAuth认证. 这里 ...
淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...

随机推荐

使用Material Design 应用主题
自从去年Google推出Material Design这款设计语言后,新的设计规范越来越受开发者们的喜爱,这篇文章包括后续文章就是慢慢的介绍在App中使用Material Design界面主题.动画. ...
hbase mlockall
mlockall 头文件:#include <sys/mman.h> 函数原型:int mlockall(int flags); flags: MCL_CURRENT --Lo ...
Unity Socket TCP
using UnityEngine; using System.Collections; using System.Collections.Generic; using System.Net.Sock ...
M1卡区块控制位详解
M1卡区块控制位详解 Mifare 1S50/Mifare 1S70 每个扇区的密码和存取控制都是独立的,可以根据实际需要设定各自的密码及存取控制.存取控制为4个字节,共32位,扇区中的每个块(包括 ...
CDH安装系统环境准备——系统版本和安装包下载地址指南
由于Hadoop深受客户欢迎,许多公司都推出了各自版本的Hadoop,也有一些公司则围绕Hadoop开发产品.在Hadoop生态系统中,规模最大.知名度最高的公司则是Cloudera.接下来的日子里, ...
Spring Boot通过命令行启动发生FileNotFoundException
Spring Boot + Jersey 通过命令行启动会发生错误FileNotFoundException异常异常信息如下: ERROR o.a.c.c.C.[Tomcat].[localhost ...
快递单号查询免费api接口（PHP示例）
快递单号查询API,可以对接顺丰快递查询,邮政快递查询,中通快递查询等.这些快递物流企业,提供了快递单号自动识别接口,快递单号查询接口等快递物流服务.对于电商企业,ERP服务企业,集成此接口到自己的软 ...
用js来实现那些数据结构15（图01）
其实在上一篇介绍树结构的时候,已经有了一些算法的相关内容介入.而在图这种数据结构下,会有更多有关图的算法,比如广度优先搜索,深度优先搜索最短路径算法等等.这是我们要介绍的最后一个数据结构.同时也是本系 ...
go 实现struct转map
从python转golang大约一个月了,对struct的使用还算顺手,但是很多时候还是会想念python的便捷.比如同时遍历两个字典,python使用for (x, y) in zip(map1, ...
python编码详解--转自(Alex的博客)
原文地址:http://www.cnblogs.com/alex3714/articles/7550940.html 编码回顾在备编码相关的课件时,在知乎上看到一段关于Python编码的回答这哥们 ...

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

javascript项目实战之原生js模拟淘宝购物车的更多相关文章

随机推荐

热门专题