js实现购物车(源码)

首先是页面布局html+css部分

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>演示</title>
  <link rel="stylesheet" href="css/style.css">
  <script type="text/javascript" src="js/demo.js"></script>
 </head>
 <body>
  <table id="cartTable">
        <thead>
            <tr>
                <th><label><input class="check-all check" type="checkbox"/>&nbsp;全选<label></th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="images/1.jpg" /><span>Casio/卡西欧 EX-TR350</span></td>
                <td class="price">5999.88</td>
                <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
                <td class="subtotal">5999.88</td>
                <td class="operation"><span class="delete">删除<span></td>
            </tr>
            <tr>
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="images/2.jpg" /><span>Casio/卡西欧 EX-TR350</span></td>
                <td class="price">5999.88</td>
                <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
                <td class="subtotal">5999.88</td>
                <td class="operation"><span class="delete">删除<span></td>
            </tr>
            <tr>
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="images/3.jpg" /><span>Casio/卡西欧 EX-TR350</span></td>
                <td class="price">5999.88</td>
                <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
                <td class="subtotal">5999.88</td>
                <td class="operation"><span class="delete">删除<span></td>
            </tr>
            <tr>
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="images/4.jpg" /><span>Casio/卡西欧 EX-TR350</span></td>
                <td class="price">5999.88</td>
                <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td>
                <td class="subtotal">5999.88</td>
                <td class="operation"><span class="delete">删除<span></td>
            </tr>

</tbody>
  </table>
  <div class="foot" id="foot">
        <label class="f1 select-all"><input type="checkbox" class="check-all check"/>&nbsp;全选</label>
        <a class="f1 delete" id="deleteAll" href="javascript:;">删除</a>
        <div class="fr closing">结算</div>
        <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
        <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>

<div class="selected-view">
            <div id="selectedViewList" class="clearfix">
                <div><img src="images/1.jpg"><span>取消选择</span></div>
            </div>
            <span class="arrow">◆<span>◆</span></span>
            
    </div>
 </body>
</html>

//***************************************************

* {
    margin: 0;
    padding: 0;
}
a {
    color: #666;
    text-decoration: none;
}
body {
    padding: 20px;
    color: #666;
}
.fl{
    float: left;
}
.fr {
    float: right;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
    text-align: center;
    width: 937px;
}
th, td {
    border: 1px solid #CADEFF;
}
th {
    background: #e2f2ff;
    border-top: 3px solid #a7cbff;
    height: 30px;
}
td {
    padding: 10px;
    color: #444;
}
tbody tr:hover {
    background: RGB(238,246,255);
}
.checkbox {
    width: 60px;
}
.goods {
    width: 300px;
}
.goods span {
    width: 180px;
    margin-top: 20px;
    text-align: left;
    float: left;
}
.price {
    width: 130px;
}
.count {
    width: 90px;
}
.count .add, .count input, .count .reduce {
    float: left;
    margin-right: -1px;
    position: relative;
    z-index: 0;
}
.count .add, .count .reduce {
    height: 23px;
    width: 17px;
    border: 1px solid #e5e5e5;
    background: #f0f0f0;
    text-align: center;
    line-height: 23px;
    color: #444;
}
.count .add:hover, .count .reduce:hover {
    color: #f50;
    z-index: 3;
    border-color: #f60;
    cursor: pointer;
}
.count input {
    width: 50px;
    height: 15px;
    line-height: 15px;
    border: 1px solid #aaa;
    color: #343434;
    text-align: center;
    padding: 4px 0;
    background-color: #fff;
    z-index: 2;
}
.subtotal {
    width: 150px;
    color: red;
    font-weight: bold;
}
.operation {
    width: 80px;
}
.operation span:hover, a:hover {
    cursor: pointer;
    color: red;
    text-decoration: underline;
}
img {
    width: 100px;
    height: 80px;
    /*border: 1px solid #ccc;*/
    margin-right: 10px;
    float: left;
}

.foot {
    width: 935px;
    margin-top: 10px;
    color: #666;
    height: 48px;
    border: 1px solid #c8c8c8;
    background-color: #eaeaea;
    background-image:linear-gradient(RGB(241,241,241),RGB(226,226,226));
    position: relative;
    z-index: 8;
}
.foot div, .foot a {
    line-height: 48px;
    height: 48px;
}
.foot .select-all {
    width: 100px;
    height: 48px;
    line-height: 48px;
    padding-left: 5px;
    color: #666;
}
.foot .closing {
    border-left: 1px solid #c8c8c8;
    width: 100px;
    text-align: center;
    color: #000;
    font-weight: bold;
    background: RGB(238,238,238);
    cursor: pointer;
}
.foot .total{
    margin: 0 20px;
    cursor: pointer;
}
.foot  #priceTotal, .foot #selectedTotal {
    color: red;
    font-family: "Microsoft Yahei";
    font-weight: bold;
}
.foot .selected {
    cursor: pointer;
}
.foot .selected .arrow {
    position: relative;
    top:-3px;
    margin-left: 3px;
}
.foot .selected .down {
    position: relative;
    top:3px;
    display: none;
}
 .show .selected .down {
    display: inline;
}
 .show .selected .up {
    display: none;
}
.foot .selected:hover .arrow {
    color: red;
}
.foot .selected-view {
    width: 935px;
    border: 1px solid #c8c8c8;
    position: absolute;
    height: auto;
    background: #ffffff;
    z-index: 9;
    bottom: 48px;
    left: -1px;
    display:none;
}
.show .selected-view {
    display: block;
}
.foot .selected-view div{
    height: auto;
}
.foot .selected-view .arrow {
    font-size: 16px;
    line-height: 100%;
    color:#c8c8c8;
    position: absolute;
    right: 330px;
    bottom: -9px;
}
.foot .selected-view .arrow span {
    color: #ffffff;
    position: absolute;
    left: 0px;
    bottom: 1px;
}
#selectedViewList {
    padding: 20px;
    margin-bottom: -20px;
}
#selectedViewList div{
    display: inline-block;
    position: relative;
    width: 100px;
    height: 80px;
    border: 1px solid #ccc;
    margin: 10px;
}
#selectedViewList div span {
    display: none;
    color: #ffffff;
    font-size: 12px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 60px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background: RGBA(0,0,0,.5);
    cursor: pointer;
}
#selectedViewList div:hover span {
    display: block;
}
//js部分

/**
 * Created by double
 */

window.onload = function (){
    if(!document.getElementsByClassName)
        document.getElementsByClassName = function(cls){
            var ret = [];
            var els = document.getElementsByTagName(‘*‘);
            for(var i = 0, len = els.length; i < len; i++){
                if(els[i].className === cls
                    ||els[i].className.indexOf(cls) >=0
                    ||els[i].className.indexOf(‘ ‘ + cls) >=0
                    ||els[i].className.indexOf(‘ ‘ + cls + ‘ ‘) >=0){
                        ret.push(els[i]);
                }
            }
            return ret;
    }

var table = document.getElementById(‘cartTable‘); // 购物车表格
    var selectInputs = document.getElementsByClassName(‘check‘); // 所有勾选框
    var checkAllInputs = document.getElementsByClassName(‘check-all‘) // 全选框
    var tr = table.children[1].rows; //行
    var selectedTotal = document.getElementById(‘selectedTotal‘); //已选商品数目容器
    var priceTotal = document.getElementById(‘priceTotal‘); //总计
    var deleteAll = document.getElementById(‘deleteAll‘); // 删除全部按钮
    var selectedViewList = document.getElementById(‘selectedViewList‘); //浮层已选商品列表容器
    var selected = document.getElementById(‘selected‘); //已选商品
    var foot = document.getElementById(‘foot‘);

// 更新总数和总价格，已选浮层
    function getTotal(){
        var selected = 0,price = 0, html = ‘‘;
        for(var i = 0; i < tr.length; i++){
            if(tr[i].getElementsByTagName(‘input‘)[0].checked){
                tr[i].className = ‘on‘;
                selected += parseInt(tr[i].getElementsByTagName(‘input‘)[1].value);
                price += parseFloat(tr[i].getElementsByTagName(‘td‘)[4].innerHTML);
                 html += ‘<div><img src="‘+tr[i].getElementsByTagName(‘img‘)[0].src+‘"><span class="del" index="‘+i+‘">取消选择</span></div>‘;// 添加图片到弹出层已选商品列表容器
            }
            else{
                tr[i].className = ‘‘;
            }
        }
        selectedTotal.innerHTML = selected; // 已选数目
        priceTotal.innerHTML = price.toFixed(2); // 总价
        selectedViewList.innerHTML = html;
        if (selected==0) {
            foot.className = ‘foot‘;
        }
    }

// 计算单行价格
    function getSubtotal(tr) {
        var cells = tr.cells;
        var price = cells[2]; //单价
        var subtotal = cells[4]; //小计td
        var countInput = tr.getElementsByTagName(‘input‘)[1]; //数目input
        var span = tr.getElementsByTagName(‘span‘)[1]; //-号
        //写入HTML
        subtotal.innerHTML = (parseInt(countInput.value) * parseFloat(price.innerHTML)).toFixed(2);
        //如果数目只有一个，把-号去掉
        if (countInput.value == 1) {
            span.innerHTML = ‘‘;
        }else{
            span.innerHTML = ‘-‘;
        }
    }

// 点击选择框
    for(var i = 0; i < selectInputs.length; i++ ){
        selectInputs[i].onclick = function () {
            if (this.className.indexOf(‘check-all‘) >= 0) { //如果是全选，则吧所有的选择框选中
                for (var j = 0; j < selectInputs.length; j++) {
                    selectInputs[j].checked = this.checked;
                }
            }
            if (!this.checked) { //只要有一个未勾选，则取消全选框的选中状态
                for (var i = 0; i < checkAllInputs.length; i++) {
                    checkAllInputs[i].checked = false;
                }
            }
            getTotal();//选完更新总计
        }
    }

// 显示已选商品弹层
    selected.onclick = function () {
        if (selectedTotal.innerHTML != 0) {
            foot.className = (foot.className == ‘foot‘ ? ‘foot show‘ : ‘foot‘);
        }
    }

//已选商品弹层中的取消选择按钮
    selectedViewList.onclick = function (e) {
        var e = e || window.event;
        var el = e.srcElement;
        if (el.className==‘del‘) {
            var input =  tr[el.getAttribute(‘index‘)].getElementsByTagName(‘input‘)[0]
            input.checked = false;
            input.onclick();
        }
    }

//为每行元素添加事件
    for(var i = 0; i < tr.length; i++){
        //将点击事件绑定到tr元素
        tr[i].onclick = function(e){
            var e = e || window.event;
            var el = e.target || e.srcElement; //通过事件对象的target属性获取触发元素
            var cls = el.className; //触发元素的class
            var countInout = this.getElementsByTagName(‘input‘)[1]; // 数目input
            var value = parseInt(countInout.value); //数目
            //通过判断触发元素的class确定用户点击了哪个元素
            switch(cls){
                case ‘add‘://点击了加号
                    countInout.value = value + 1;
                     getSubtotal(this);
                    break;
                case ‘reduce‘:
                    if (value > 1) {
                        countInout.value = value - 1;
                        getSubtotal(this);
                    }
                    break;
                case ‘delete‘: //点击了删除
                    var conf = confirm(‘确定删除此商品吗？‘);
                    if (conf) {
                        this.parentNode.removeChild(this);
                    }
                    break;
            }
            getTotal();
        }

// 给数目输入框绑定keyup事件
        tr[i].getElementsByTagName(‘input‘)[1].onkeyup = function () {
            var val = parseInt(this.value);
            if(isNaN(val) || val <=0){
                val = 1;
            }
            if(this.value != val){
                this.value = val;
            }
            getSubtotal(this.parentNode.praentNode);//更新小计
            getTotal();//更新总数
        }

// 点击全部删除
        deleteAll.onclick = function () {

if(selectedTotal.innerHTML !=0) {
                var conf = confirm(‘确定删除所选商品吗？‘);
                if(conf){
                    for(var i = 0; i < tr.length; i++){
                        // 如果被选中，就删除相应的行
                        if(tr[i].getElementsByTagName(‘input‘)[0].checked){
                            tr[i].parentNode.removeChild(tr[i]);//删除节点
                            i--;//回退下标位置
                        }
                    }
                }
            }
            else{
                alert(‘请选择商品！‘);
            }
            getTotal(); //更新总数
        }

// 默认全选
    checkAllInputs[0].checked = true;
    checkAllInputs[0].onclick();
}
 }

时间： 2024-12-29 09:20:11

js实现购物车(源码)的相关文章

js调试系列: 源码定位与调试[基础篇]

js调试系列目录: - 如果看了1, 2两篇,你对控制台应该有一个初步了解了,今天我们来个简单的调试.昨天留的三个课后练习,差不多就是今天要讲的内容.我们先来处理第一个问题:1. 查看文章下方 推荐 这个功能所调用的函数源码其实非常简单,点放大镜选中那个推荐即可.这个  votePost(cb_entryId,'Digg')  就是推荐按钮所调用的函数了,是不是非常简单. 第二个问题,定位到函数所在文件位置.其实也是非常简单的,当然,不熟悉控制台的朋友也许不知道怎么看.我在控制台输入 voteP

基于wke封装的duilib的webkit浏览器控件，可以c++与js互交，源码及demo下载地址

转载请说明原出处,谢谢~~ 前些日子用wke内核封装了duilib的webkit浏览器控件,好多群里朋友私聊我希望可以我公布源码,今天把这个控件的源码和使用demo公布.其实这个控件封装起来没什么难度,我只是按照原来作者的demo,把相应的消息封装成duilib对应的. 在此首先要感谢wke内核的作者BlzFans以及soui2界面库的作者flyhigh,BlzFans精简了webkit内核后封装为wke并公布了源码,flyhigh对wke进行处理让他更容易移植到dui工程中.wke内核10M大

KRPano JS 场景编辑器源码

KRPano JS编辑器,可以运行在Node环境中. 源码地址:https://github.com/xxweimei/krpano-editor-js 或者下载zip包:http://pan.baidu.com/s/1c2Il5Pu 使用说明: clone项目到本地: git clone https://github.com/xxweimei/krpano-editor-js 安装nodejs: https://nodejs.org/dist/v6.11.1/node-v6.11.1-win-

深入理解 Node.js 中 EventEmitter源码分析(3.0.0版本)

events模块对外提供了一个 EventEmitter 对象,即:events.EventEmitter. EventEmitter 是NodeJS的核心模块events中的类,用于对NodeJS中的事件进行统一管理,使用events可以对特定的API事件进行添加,触发和移除等.我们可以通过 require('events')来访问该模块. 比如如下代码: // 引入 events 模块 const events = require('events'); console.log(events)

16款购物商城添加购物车源码特效

jquery仿天猫商城点击加入购物车按钮商品动画飞到购物车里面效果 jquery文本框选择器_商品尺寸选择和商品价格选择添加到购物车 jQuery商品购物车自动计算金额总数表单提交 jquery添加购物车复选框,全选,反选,取消,商品数量统计价格 jquery商品飞入购物车动画效果代码 jquery数量加减插件_购物车商品数量加减_商品数字加减效果代码 html5弹出窗口点击购物车弹出商品清单列表代码 jquery数量加减插件制作购物车数量加减功能代码 jQuery仿天猫加入购物车代码点击商品飞

js贪吃蛇源码

1.注意,自己引入jquery,这个demo基于jquery的,我的jquery是写的本地的 2.没有写注释,看不懂的再问我吧, <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } div.w

Node.js开发 ---- ejs源码转译

使用了ejs的 <%= code %>,ejs会自动帮我们转义 解决办法 <%- code %>就不会转义了. <% code %>用于执行其中JavaScript代码: <%= code %>会对code进行html转义: <%- code %>将不会进行转义 ejs.compile(str, options); 将返回内部解析好的Function函数 ejs.render(str, options); 返回经过解析的字符串

js模拟接口源码

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <script> var reg={ string:/^[\D]+/ } interfaces.interfacee=[]; interfaces.is=true; function interfaces

js 高手进阶之路：underscore源码经典（二）

网址:http://web.jobbole.com/83872/ underscore 源码版本 1.8.2 起因 很多人向我推荐研究js,可以看看一些第三方js类库的源码,而源码之中最好解读也最简短的就是underscore,它也是我平常比较喜欢的一个库,因为它性价比高:体积小.能力强.打开一看,才1000多行,试着读了一下,确实很值得一看,所以对精彩部分做了一下整理. 闭包 整个函数在一个闭包中,避免污染全局变量.通过传入this(其实就是window对象)来改变函数的作用域.和jquery