JavaScript实现购物车案例

本文实例为大家分享了JavaScript实现购物车功能的具体代码,供大家参考,具体内容如下

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/02-reset.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- 简单写个大盒子分大三栏 -->
    <div class="cart">
        <!-- 购物车头部 -->
        <div class="cart-head clearfix">
            <div class="col col-check u-l">
                <input type="checkbox" id="all" class="check">
                <label for="all">全选</label>
            </div>
            <div class="col col-img u-l">&nbsp;</div>
            <div class="col col-name u-l">商品名称</div>
            <div class="col col-price u-l">单价</div>
            <div class="col col-num u-l">数量</div>
            <div class="col col-sum u-l">小计</div>
            <div class="col col-action u-r">操作</div>
        </div>
        <!-- 购物车列表 -->
        <div class="cart-list">
            <!-- 商品块 -->
            <div class="list-item">
                <div class="item-box ">
                    <div class="col col-check u-l">
                        <input type="checkbox" class="check single">
                    </div>
                    <div class="col col-img u-l">
                        <img src="./images/1.jpg" alt="">
                    </div>
                    <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div>
                    <div class="col col-price u-l">8888元</div>
                    <div class="col col-num u-l ">
                        <div class="change-goods-num">
                            <a href="javascript:;" class="jianhao">-</a>
                            <input type="text" value="1">
                            <a href="javascript:;" class="jiahao">+</a>
                        </div>
                    </div>
                    <div class="col col-sum u-l">8888元</div>
                    <div class="col col-action u-r">删除</div>
                </div>
                <div class="item-box ">
                    <div class="col col-check u-l">
                        <input type="checkbox" class="check single">
                    </div>
                    <div class="col col-img u-l">
                        <img src="./images/1.jpg" alt="">
                    </div>
                    <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div>
                    <div class="col col-price u-l">8888元</div>
                    <div class="col col-num u-l ">
                        <div class="change-goods-num">
                            <a href="javascript:;" class="jianhao">-</a>
                            <input type="text " value="1">
                            <a href="javascript:;" class="jiahao">+</a>
                        </div>
                    </div>
                    <div class="col col-sum u-l">8888元</div>
                    <div class="col col-action u-r">删除</div>
                </div>
                <div class="item-box ">
                    <div class="col col-check u-l">
                        <input type="checkbox" class="check single">
                    </div>
                    <div class="col col-img u-l">
                        <img src="./images/1.jpg" alt="">
                    </div>
                    <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div>
                    <div class="col col-price u-l">8888元</div>
                    <div class="col col-num u-l ">
                        <div class="change-goods-num">
                            <a href="javascript:;" class="jianhao">-</a>
                            <input type="text" value="1">
                            <a href="javascript:;" class="jiahao">+</a>
                        </div>
                    </div>
                    <div class="col col-sum u-l">8888元</div>
                    <div class="col col-action u-r">删除</div>
                </div>
                <div class="item-box ">
                    <div class="col col-check u-l">
                        <input type="checkbox" class="check single">
                    </div>
                    <div class="col col-img u-l">
                        <img src="./images/1.jpg" alt="">
                    </div>
                    <div class="col col-name u-l">8848 移动版 4GB+64GB 千峰蓝</div>
                    <div class="col col-price u-l">8888元</div>
                    <div class="col col-num u-l ">
                        <div class="change-goods-num">
                            <a href="javascript:;" class="jianhao">-</a>
                            <input type="text" value="1">
                            <a href="javascript:;" class="jiahao">+</a>
                        </div>
                    </div>
                    <div class="col col-sum u-l">8888元</div>
                    <div class="col col-action u-r">删除</div>
                </div>
            </div>
        </div>
        <!-- 购物车底部 -->
        <div class="cart-foot">
            <div class="section-left u-l">
                <a href="">继续购物</a>
                <span>已选择 <i id="totalNum">0</i> 件商品</span>
            </div>
            <div class="u-r settlement">去结算</div>
            <div class="u-r total-price">合计: <em id="totalPrice">0</em>元</div>
        </div>
    </div>
 
    <script type="text/javascript" src="./js/script.js"></script>
</body>
</html>

css结构

/* 浏览器和标签都有默认的样式 清除默认样式 */
*{
    margin: 0;padding: 0
}
/* 清除加粗标签的默认样式 */
b,strong{
    font-weight: normal
}
/* 清除倾斜标签的默认样式 */
i,em{
    font-style: normal
}
/* 清除默认下划线 */
a,u{
    text-decoration: none
}
/* 超链接默认颜色为黑色 */
a{
    color: #000;
}
/* 清除列表的默认符号样式 */
ul,ol,li{
    list-style: none
}
/* 左浮动 */
.u-l{
    float: left;
}
/* 右浮动 */
.u-r{
    float: right;
}
/* 清除浮动 */
.clearfix{
    clear: both;
}
.cart{
    margin:0 auto;
    width: 1200px;
} 
/* 购物车头部样式 */
.cart-head{
    height: 70px;
    line-height: 70px;
}
.col{
    width: 120px;
 
}
.col-img img{
    width: 100px;
    height: 100px;
}
.col-name{
    width: 380px;
}
.col-price{
    width: 160px;
    padding-right: 18px;
}
.col-num{
    width: 150px;
    text-align: center;
}
.col-sum{
    text-align: center;
    color: #ff6700;
}
.col-active{
    text-align: center;
}
 
/* 购物车商品样式 */
.item-box{
    overflow: hidden;
    padding: 20px 0;
    border-top: 1px solid #ccc;
}
 
.change-goods-num{
    width: 148px;
    height: 38px;
    border: 1px solid #000;
}
.change-goods-num a{
    float: left;
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 20px;
    color: #000;
    text-align: center;
}
.change-goods-num input{
    float: left;
    width: 72px;
    height: 38px;
    font-size: 18px;
    line-height: 38px;
    text-align: center;
    border-width: 0;
}
 
/* 底部 */
.cart-foot{
    height: 50px;
    line-height: 50px;
    border: 1px solid #ccc;
    
}
.section-left a{
    margin-left: 32px;
    color: #757575;
}
.section-left span{
    margin-left: 16px;
    padding-left: 16px;
    color: #757575;
    border-left: 1px solid #ccc;
}
.section-left i{
    color: #ff6700;
}
.settlement{
    margin-left: 40px;
    padding:0 40px ;
    font-size: 18px;
    background-color: orange;
    color: #fff;
 
}
.total-price{
    color: #ff6700;
}
.total-price em{
    font-size: 30px;
 
}

js结构

//获取到页面中所有复选框check
var check = document.querySelectorAll('.check');
console.log(check.length);
//获取到商品栏复选框
var single = document.querySelectorAll('.single');
console.log(single.length);
//获取每一行商品栏
var itemBox = document.querySelectorAll('.item-box');
console.log(itemBox);
 
for(var i=0;i<check.length;i++){
    //给所有复选框添加事件
    check[i].onclick = function(e){
        //判断是否全选
        var count = 0;
        //判断全选框
        if(e.target.getAttribute('id') == 'all'){
            //把全选状态赋值给每一个checkbox
            for(j=0;j<single.length;j++){
                single[j].checked = this.checked
            }
        }
        for(var k = 0; k<single.length;k++){
            if(single[k].checked){
                count++;
            }
            if( count == single.length){
                check[0].checked = true; 
            }else{
                check[0].checked = false;
            }
        }
 
        fTotal();
    }
}
//给商品每一行添加事件
for(var i = 0;i<itemBox.length;i++){
    itemBox[i].onclick = function(e){
 
        var input = this.getElementsByTagName('input')[1];
 
        switch(e.target.className){
            case 'jiahao':
                // alert('加');
                input.value = parseInt(input.value)+1;
                fTotalSum(this);
            break;
            case 'jianhao':
                // alert('减');
                input.value = parseInt(input.value)-1 <=1 ? 1:parseInt(input.value)-1;
                fTotalSum(this);
            break;
            case 'col col-action u-r':
                var con = confirm('确定删除吗?');
                if( con ){
                    this.parentNode.removeChild(this);
                }
                break;
        }
        //调用 计算总数量和总价
        fTotal()
    }   
}
// 定义一个函数计算 小计 That === this 就是商品每一行
function fTotalSum(That){
 
    //获取当前行的数量
    var num = That.getElementsByTagName('input')[1].value;
    //获取当前行的单价  取整是为了省略掉'元'字符串,方便计算
    var price = parseInt(That.querySelector('.col-price').innerHTML);
    // 最终小计值为数量乘以单价
    That.querySelector('.col-sum').innerHTML = num * price+'元';
};
//定义一个函数 方便调用总数量  和 合计
function fTotal(){
    //获取到总价节点
    var totalPrice = document.getElementById('totalPrice');
    //总价
    var price = 0;
    //获取到总件节点
    var totalNum = document.getElementById('totalNum');
    //数量总和
    var Num = 0;
    //获取每一行商品盒子
    var itemBox = document.querySelectorAll('.item-box');
 
    for(var i = 0; i<itemBox.length;i++){
        itemBox[i].getElementsByTagName('input')[1].value;
        //选中了,才拿数量和价格
        if( itemBox[i].getElementsByTagName('input')[0].checked ){
           Num += parseInt(itemBox[i].getElementsByTagName('input')[1].value);
           price += parseInt(itemBox[i].querySelector('.col-sum').innerHTML);
        }
        
    }
    //合并把总和数量写到标签里
    totalNum.innerHTML = Num;
    totalPrice.innerHTML = price;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2022-01-13

Jsp+Servlet实现购物车功能

本文实例为大家分享了Servlet实现购物车功能的具体代码,供大家参考,具体内容如下 (1)用servlet实现简单的购物车系统,项目结构例如以下:(新建web Project项目  仅仅须要AddItemServlet , ListItemServlet.exam403.jsp三个文件就可以.其它的不用管) (2)exam403.jsp代码例如以下: <%@ page contentType="text/html; charset=gb2312" language="

js实现仿购物车加减效果

效果图:  代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ overflow-y: auto; } ul{ margin-top: 20px; border-top: 1px solid #666; } h1{ widt

js实现简单的购物车有图有代码

如图:  全选按钮的实现为: 复制代码 代码如下: <input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input t

JavaScript编写一个简易购物车功能

网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现. 1.用html实现内容: 2.用css修饰外观: 3.用js(jq)设计动效. 第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中涉及到的商品都是网上随便copy的,不具有参考价值): <div id="goods"> <div c

js购物车实现思路及代码(个人感觉不错)

复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer

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

本文实例讲述了原生js模拟淘宝购物车实现代码.分享给大家供大家参考.具体如下: 通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项

Javascript实现购物车功能的详细代码

我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算.购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车中的某一项或几项商品,最后商品总价也会随着消费者的操作随着变化. 现在,笔者对购物车进行了简单实现,能够实现真实购物车当中的大部分功能.在本示例当中,用到了javascript中BOM操作,DOM操作,表格操作,cookie,json等知识点,同时,采用三层架构方式对购物车进行设计,对javascript的

简单的前端js+ajax 购物车框架(入门篇)

今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: 复制代码 代码如下: //为了省事,就没写自己的js ajax了 用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { AJAX: function (urlparm, d, beforecall, successc

vuejs手把手教你写一个完整的购物车实例代码

由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选 下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=

Javascript操纵Cookie实现购物车程序

复制代码 代码如下: /***************************************************************************************************** Name 购物车 Version 1.1 Author Vanni(凡林) url:www.27sea.com QQ:303590170 CreateDate 2005-05-31 Description 此类是基于JavaScript和客户端Cookie,请保证客户端开

JavaScript使用cookie

cookie概述 在上一节,曾经利用一个不变的框架来存储购物栏数据,而商品显示页面是不断变化的,尽管这样能达到一个模拟全局变量的功能,但并不严谨.例如在导航框架页面内右击,单击快捷菜单中的[刷新]命令,则所有的JavaScript变量都会丢失.因此,要实现严格的跨页面全局变量,这种方式是不行的,JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求. cookie是浏览器提供的一种机制,它将document对象的cookie属性提供给JavaScript.可以由JavaS

Cookie的使用及保存中文并用Cookie实现购物车功能

Cookie是服务器存放在客户端的一些数据,比如密码,以及你曾经访问过的一些数据. 设置Cookie 复制代码 代码如下: //设置cookie Cookie cookie = new Cookie("TOM","111"); //设置有效期,默认秒为单位 cookie. setMaxAge(7*24*60*60); //添加cookie到客户端 response.addCookie(cookie); 获取Cookie 复制代码 代码如下: <% //获取co

原生js+cookie实现购物车功能的方法分析

本文实例讲述了原生js+cookie实现购物车功能的方法.分享给大家供大家参考,具体如下: 这里使用js+cookie实现简单的购物车功能. 首先是简单的HTML结构,只是为了演示下功能. <ul> <li><span>a0001</span><span>shdfi</span><span>¥98.00</span> <input type="button" value="加

Javascript操作cookie的函数代码

javascript操作cookie简单版本 复制代码 代码如下: function setCookie(name, value, iDay) { var oDate = new Date(); oDate.setDate(oDate.getDate() + iDay); document.cookie = name+'='+value+';expires='+oDate; } function getCookie(name) { var arr = document.cookie.split(

javascript 中Cookie读、写与删除操作

 javascript 中Cookie读.写与删除操作 前言: 在这个前端横行的时候,页面之间的交互需要数据的传递,有的数据通过url传参的形式可以很好地解决,但是对于部分需要改变的参数,你如说从页面A到页面B选择数据,然后从页面B将数据再传到页面A(典型的栗子就是收货地址的选择),针对这一块我是通过存储cookie来解决的. 对于cookie的操作我给出了一些简单的封装,当然也借鉴了前辈们经验,自己糅合了一下,对于cookie的操作,无非是读写和删除,我们首先来看一下写的操作,有写才有读,进而

jQuery基于json与cookie实现购物车的方法

本文实例讲述了jQuery基于json与cookie实现购物车的方法.分享给大家供大家参考,具体如下: json 格式: [{'ProductID':ABC','Num':'1'},{'ProductID':DEF,'Num':'2'}] 这里使用到了 $.cookie这个插件.这个插件的代码在文章的最后 /* 添加商品及数量到购物车cookie中,返回当前商品在cookie中的总数 */ function AddToShoppingCar(id, num) { var _num = 1; if

基于javascript的COOkie的操作实现只能点一次

我知道很多人在网站开发的时候其实需要这个功能的,就是控制用户一直点顶什么的!所以我在这里简单写一下,基于javascript的COOkie的操作! 复制代码 代码如下: //设置cookie function setCookie(key, value) {         document.cookie = key + "=" + escape(value); } //获取cookie的值     function getCookie(key) {         if (docume

JavaScript实现cookie的写入、读取、删除功能

在没介绍正文之前,先给大家介绍Cookie的基础知识 首先了解什么是cookie "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值." cookie 是访问过的网站创建的文件,用于存储浏览信息,例如个人资料信息. 从JavaScript的角度看,cookie 就是一些字符串信息.这些信息存放在客户端的计算机中,用于客户端计算机与服务器之间传递信息. 在

JavaScript操作Cookie方法实例分析

本文实例讲述了JavaScript操作Cookie方法.分享给大家供大家参考.具体如下: // My methods for setting, reading and deleting cookies. // I have methods to check for the existence of cookie names or values, // to retrieve by name or value, and to create a formatted string of // all