图书购买系统，本地添加购物车(不需要登录一样可以添加购物车，结算时需要登录)

来源：互联网发布：暴风影音mac官方下载编辑：程序博客网时间：2024/05/16 11:45

1.category.html页面：显示书籍信息页面

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <script src="../../js/bootstrap/js/jquery-3.1.1.js"></script>        <script src="../../js/bootstrap/js/bootstrap.js"></script>        <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.css" />        <!--导入category.js文件-->        <script src="category.js"></script>        <title></title>    </head>    <body>        <div class="container">            <ol class="breadcrumb">              <li><a href="home.html">首页</a></li>              <li><a  id="navpath" href="#">全部商品</a></li>            </ol>        </div>        <div class="container">            <div style="margin-left: 100px;margin-right: 100px;background: red;">                <img src="../../img/otherimages/productlist.gif" style="width: 100%;height: 40px;" />                <div class="thumbnail text-center pull-left" style="margin: 15px;">                    <img src="../../img/bookimage/20285763-1_b.jpg" />                    <p>书名:JAVA模式</p>                    <p>售价:21.5</p>                    <input type="image" onclick="addCart('10000','Java模式','21.5','100')" src="../../img/otherimages/buybutton.gif"/>                </div>                <div class="thumbnail text-center pull-left" style="margin: 15px;">                    <img src="../../img/bookimage/20412979-1_b.jpg" />                    <p>书名:javascript</p>                    <p>售价:18.5</p>                    <input type="image" onclick="addCart('10001','javascript','18.5','100')" src="../../img/otherimages/buybutton.gif"/>                </div>            </div>        </div>        <div class="container">            <nav class="text-center">              <ul class="pagination text-center" >                <li><a href="#"><span>&laquo;首页</span> </a></li>                <li><a href="#">上一页</a></li>                <li><a href="#">下一页</a></li>                <li><a href="#"> <span>末页&raquo;</span></a></li>                <span  style="line-height: 30px;margin-left: 10px;">3/15</span>              </ul>            </nav>        </div>    </body></html>

2.category.js文件，实现添加购物车功能

//截取url//动态改变路径导航的信息$(function(){    var url = window.location.search;    url = decodeURI(url);    var subs = url.substr(url.indexOf("category=")+9);    $("#navpath").html(subs);})//购物车思路：//1、本地购物车    京东   不要登录一样可以加购物车，结算的时候才需要登录//2、服务器购物车   淘宝   一定要登录才能添加购物车//本地购物车:把添加到购物车的数据保存到浏览器中(localStorage)//方法传参：书的id，书名，书售价，书的库存//在保存到localStorage的时候，需要先把js对象转换为字符串再保存(localStorage只能够保存字符串)function addCart(id,name,price,num){    //1.创建一个js对象    var book = {        "product_id":id,   //书的id        "name":name,       //书名        "price":price,     //售价        "num":num,         //库存        "buynum":1         //购买数量    }    //2.获取已经保存的 数据    var storebooks = localStorage.getItem("carts");    //将已经获取到的字符串数据转换成数组    var bookArr = JSON.parse(storebooks);    //2-1 如果购物车里面数据为空，说明从来没有保存过数据    if(bookArr==null){        //创建一个数组        var books = new Array();        //把要保存的数据存到数组中        books.push(book);        //将数组转换成字符串        var bookstr = JSON.stringify(books);        alert(bookstr);        //将字符串保存到localStorge中        localStorage.setItem("carts",bookstr);    }    //2-2 说明已经保存过数据了    else{        //1.判断我们将要保存的书籍是否已经存在购物车了，如果存在，则让购买数量+1        var isfind = false;        for(var i=0;i<bookArr.length;i++){            var b = bookArr[i];            if(b.product_id==book.product_id){                b.buynum++;                isfind = true;                break;            }        }        //2.如果不存在，则将该书添加到购物车列表中        if(isfind == false){            bookArr.push(book);        }        //3.把bookArr重新转换成字符串保存        var s = JSON.stringify(bookArr);        localStorage.setItem("carts",s);    }    alert("添加成功");}

3.cart.html页面，购物车页面

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8"><br />        <script src="../../js/bootstrap/js/jquery-3.1.1.js"></script>        <script src="../../js/bootstrap/js/bootstrap.js"></script>        <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.css" />        <link rel="stylesheet" href="../common/head.css"/>        <script src="../common/head.js"></script>        <script src="cart.js"></script>        <title></title>    </head>    <body>        <div class="container">            <!--正文内容-->            <div style="margin-left: 100px;margin-right: 100px;">                <img src="../../img/otherimages/buy1.gif" />                <div class="panel panel-info table-responsive" style="margin-top: 30px;">                  <div class="panel-heading text-center"><h4><strong>购物车列表</strong></h4></div>                  <div id="carttable"><!--这里动态添加购物车数据--></div>                  <div class="panel-footer" style="padding-left: 90%;">总计：40</div>                </div>                <form class="form-horizontal">                  <div class="form-group">                    <label for="receiverAddress" class="col-md-1 control-label">地址</label>                    <div class="col-md-4">                      <input type="email" class="form-control" name="receiverAddress" id="receiverAddress" placeholder="请输入收货地址">                    </div>                  </div>                  <div class="form-group">                    <label for="receiverName" class="col-md-1 control-label">收货人</label>                    <div class="col-md-4">                      <input type="text" class="form-control" id="receiverName" name="receiverName" placeholder="请输入收货人姓名">                    </div>                  </div>                  <div class="form-group">                    <label for="receiverPhone" class="col-md-1 control-label">电话</label>                    <div class="col-md-4">                      <input type="text" class="form-control" id="receiverPhone" name="receiverPhone" placeholder="请输入收货人电话">                    </div>                  </div>                  <div class="form-group">                    <div class="col-md-12 text-right">                      <a href="../book/home.html"><img src="../../img/otherimages/gwc_jx.gif"/></a>                      <a href="#"><img src="../../img/otherimages/gwc_buy.gif"/></a>                    </div>                  </div>                 </form>            </div>        </div>    </body></html>

4.cart.js页面实现购物车动态添加数据功能

//购物车表格动态加载本地购物车的信息$(function(){    //1.从localstorge获取所存的购物车的信息    var books = localStorage.getItem("carts");    var bookArr = JSON.parse(books);    //2.声明一个html用来拼接页面    var html = "";    html += "<table class='table table-hover text-center'>";    html += "                <tr class='danger'>";    html += "                   <th class='text-center'>序号</th>";    html += "                   <th class='text-center'>商品名称</th>";    html += "                   <th class='text-center'>价格</th>";    html += "                   <th class='text-center'>购买数量</th>";    html += "                   <th class='text-center'>库存</th>";    html += "                   <th class='text-center'>小计</th>";    html += "                </tr>";    //3.遍历数组    for(var i=0;i<bookArr.length;i++){        //获取到一本书        var abook = bookArr[i];        html += "<tr>";        html += "<td>"+i+"</td>";        html += "<td>"+abook.name+"</td>";        html += "<td>"+abook.price+"</td>";        html += "<td>"+abook.buynum+"</td>";        html += "<td>"+abook.num+"</td>";        html += "<td>"+abook.price*abook.buynum +"</td>";        html += "</tr>";    }    html += "                </table>";    $("#carttable").html(html);})

5.效果显示

0 0