pc端添加购物车示例

添加到购物车列表及相关商品推荐.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!--<script type="text/javascript" src="js/tool.js"></script>-->

    <style type="text/css">

        *{margin: 0;padding: 0;}

        ul{list-style: none;}

        a{text-decoration: none;}

        .box{

            width: 1200px;

            border: 1px solid;

            margin: 50px auto 0;

        }

        .box ul{

            overflow: hidden;

        }

        .box ul li{

            width: 260px;

            height: 100px;

            font-size: 12px;

            float: left;

            margin-right: 53px;

            margin-bottom: 15px;

        }

        .box .product a img{

            float: left;

            width: 98px;

            height: 98px;

            border: 1px solid #ccc;

            margin-right: 10px;

        }

        .box .product .txt{

            float: left;

            width: 150px;

            height: 36px;

            line-height: 18px;

            overflow: hidden;

        }

        .box .product .price{

            float: left;

            width: 150px;

            color: #d91f20;

            font-size: 14px;

            margin-top: 5px;

            overflow: hidden;

        }

        .box .product .add_to_cart{

            float: left;

            width: 105px;

            height: 30px;

            border: 1px solid #ccc;

            margin-top: 8px;

            text-align: center;

            line-height: 30px;

        }

        .header{

            width: 1200px;

            /*height: 100px;*/

            border: 1px solid #ccc;

            margin: 0 auto;

        }

        .header .title{

            display: flex;

            justify-content: space-around;

            height: 30px;

            line-height: 30px;

            border: 1px solid #ccc;

            background: #f3f3f3;

        }

        .header .cart_list_box{

            max-height: 306px;

            overflow: auto;

        }

        .header .cart_list{

            border: 1px solid #ccc;

            display: flex;

            justify-content: space-between;

            border-bottom: none;

        }

        .header .cart_list li{

            float: left;

            height: 50px;

            width: 200px;

            font-size: 14px;

            line-height: 50px;

            text-align: center;

            overflow: hidden;

            background: #fff4e8;

        }

        .header .cart_list li .img{

            width: 50px;

            height: 50px;

        }

        .product_total{

            width: 1200px;

            margin: 0 auto;

            overflow: hidden;

            outline: 1px solid #ccc;

        }

        .product_total .fr{

            float: right;

            width: 280px;

            height: 50px;

        }

        .product_total .fr p{

            float: left;

            line-height: 50px;

            color: #ccc;

            font-size: 12px;

        }

        .product_total .fr .calc{

            float: right;

            width: 110px;

            height: 50px;

            background: #e64346;

            color: #fff;

            font-weight: bold;

            text-align: center;

            line-height: 50px;

            font-size: 18px;

        }

        .product_total .fr p #total{

            color: orange;

            font-size: 22px;

        }

        .product_total .fr p i{

            font-size: 20px;

            color: orange;

            font-style: normal;

        }

        .product_total .fl #removeAll{

            float: left;

            margin-left: 500px;

            margin-top: 4px;

            width: 110px;

            height: 40px;

            background: #fff8f8;

            border: 1px solid #ffdfdf;

            color: #999;

            text-align: center;

            line-height: 40px;

            font-size: 16px;

        }

    </style>

</head>

<body>

<div class="header">

    <ul class="title">

        <li>编号</li>

        <li>图片</li>

        <li>标题</li>

        <li>数量</li>

        <li>单价</li>

        <li>操作</li>

    </ul>

    <div class="cart_list_box">

    </div>

</div>

<div class="product_total">

    <div class="fl">

        <button id="removeAll">清空购物车</button>

    </div>

    <div class="fr">

        <p>合计：<i>￥</i><span id="total">00.00</span></p>

        <button class="calc">去结算</button>

    </div>

</div>

<div class="box">

    <h3>购买了该商品的用户还购买了</h3>

    <ul class="con">

    </ul>

</div>

<ul class="conModel">

    <li style="display: none">

        <div class="id" style="display:none">1</div>

        <a href=""><img class="img" src="data:images/01.jpg"></a>

        <p class="txt">益达（Extra）木糖醇无糖口香糖冰凉薄荷70粒98单瓶装</p>

        <span class="price">￥13.90</span>

        <a href="javascript:void(0)"  class="add_to_cart">加入购物车</a>

    </li>

</ul>

<script src="jquery-3.2.1.min.js"></script>

<script>

    var json = [

        {"id":"1","img":"images/01.jpg","txt":"益达（Extra）木糖醇无糖口香糖冰凉薄荷70粒98单瓶装","price":"￥13.90"},

        {"id":"2","img":"images/02.jpg","txt":"益达（Extra）尊享护齿56g*3瓶京东定制装（草本精华+冰","price":"￥24.90"},

        {"id":"3","img":"images/03.jpg","txt":"绿箭（DOUBLEMINT）无糖薄荷糖冰柠薄荷味35粒23.8g","price":"￥7.50"},

        {"id":"4","img":"images/04.jpg","txt":"益达（Extra）木糖醇无糖口香糖香浓蜜瓜40粒56g单瓶装","price":"￥8.80"},

        {"id":"5","img":"images/05.jpg","txt":"益达（Extra）无糖口香糖沁凉薄荷12片32g单盒装","price":"￥5.50"},

        {"id":"6","img":"images/06.jpg","txt":"益达木糖醇无糖口香糖瓶装56g/瓶 益达口香糖 休闲零食","price":"￥8.80"},

        {"id":"7","img":"images/07.jpg","txt":"益达木糖醇无糖口香糖瓶装56g/瓶*9口味组合休闲零食","price":"￥75.60"},

        {"id":"8","img":"images/08.jpg","txt":"益达 无糖口香糖70粒摇一摇四口味合装 赠益达西瓜味24","price":"￥52.90"}

    ];

    var parent = $(".con",$(".box")[0])[0];

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

        var clone = $("li",$(".conModel")[0])[0].cloneNode(true);

        if((i+1) % 4 === 0){

            clone.style.marginRight = "0";

        }

        clone.style.display = "block";

        clone.className = "product";

        clone.children[0].innerHTML = json[i].id;

        clone.children[1].children[0].src = json[i].img;

        clone.children[2].innerHTML = json[i].txt;

        clone.children[3].innerHTML = json[i].price;

        parent.appendChild(clone);

    }

    // 动态添加购物车列表

    var add_to_cart = $(".add_to_cart",$(".con")[0]);

    for(var j = 0,cartLen = add_to_cart.length; j < cartLen; j++){

        add_to_cart[j].onclick = function(){

            var cart_list = $(".cart_list",$(".header")[0]);

            for(var k =0, cart_list_len = cart_list.length; k < cart_list_len; k++){

                if(this.parentNode.children[0].innerHTML === $("li",$(".cart_list")[k])[0].innerHTML ){

                    var num = ++cart_list[k].children[3].innerHTML;

                    var prices2 = Number(cart_list[k].children[4].innerHTML.slice(1));

                    $("#total").text((Number($("#total").text()) + prices2).toFixed(2));

                    return;

                }

            }

            var clone = $(".title",$(".header")[0])[0].cloneNode(true);

            clone.className = "cart_list";

            clone.children[0].innerHTML = this.parentNode.children[0].innerHTML;

            clone.children[1].innerHTML = this.parentNode.children[1].innerHTML;

            clone.children[2].innerHTML = this.parentNode.children[2].innerHTML;

            clone.children[3].innerHTML = "1";

            clone.children[4].innerHTML = this.parentNode.children[3].innerHTML;

            clone.children[5].innerHTML = "<a href='javascript:void(0)' class='remove'>删除</a>";

            $(".cart_list_box",$(".header")[0])[0].appendChild(clone);

            var prices1 = Number(clone.children[4].innerHTML.slice(1));

            $("#total").text((Number($("#total").text()) + prices1).toFixed(2));

            // 删除购物车列表内指定商品

            for(var l = 0,remove_len = $(".remove").length; l < remove_len; l++){

                $(".remove")[l].onclick = function(){

                    if(confirm("确认删除该商品？")){

                        var price = (this.parentNode.parentNode.children[4].innerHTML).slice(1);

                        var num = this.parentNode.parentNode.children[3].innerHTML;

                        var removePrices = price * num;

                        $("#total").text( (Number($("#total").text()) - removePrices).toFixed(2));

                        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

                    }

                }

            }

        }

    }

    // 清空购物车

    $("#removeAll").click(function(){

        for(var i = 0,len = $(".cart_list_box")[0].children.length; i < len; i++){

            $(".cart_list_box")[0].removeChild($(".cart_list_box")[0].children[0]);

        }

        $("#total").text("00.00");

    })

    //去结算

    $(".calc").click(function () {

        window.location.href='http://www.baidu.com';

    })

</script>

</body>

</html>

pc端添加购物车示例的更多相关文章

淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
Ext-JS-Classic-Demo 面向pc端示例
基于Ext Js 6.5.1 面向pc端示例,低于此版本可能存在兼容问题,慎用已忽略编译目录,请自行编译运行 Sencha Cmd 版本:v6.5.1.240 git地址:https://githu ...
C#--图片上传（PC端和APP）保存及跨域上传说明
手动跨域操作文件补录:跨域访问文件夹文件是一种常见的需求,下面主要介绍的的通过代码使用具有权限账号的人来达到跨域操作文件的能力. 现在补充一下普通的一些需求场景,今天就遇到了一种需要经常需要登录远程 ...
pygame开发PC端微信打飞机游戏
pygame开发PC端微信打飞机游戏一.项目简介 1. 介绍本项目类似曾经火爆的微信打飞机游戏.游戏将使用Python语言开发,主要用到pygame的API.游戏最终将会以python源文件gam ...
PC端Web项目开发流程
从前一直再做前端,突然想到如果有一天领导让自己独立承担一个web 项目的话是否有足够的能力去接这个任务,要学会自己去搭建一些基础的工具信息.所有的这一切在心里都要有个大致的流程,不然真正做的时候难免会 ...
使用rem配置PC端自适应大屏
效果如下使得大屏不论在什么宽高比例依然能展示全部数据安装 npm install -S postcss-pxtorem rem配置思路原先的rem函数是能解决大部分的问题的,如果展示不全,也可以 ...
第 31 章项目实战-PC 端固定布局[3]
学习要点: 1.搜索区 2.插入大图 3.搜索框主讲教师:李炎恢本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．搜索区本节课 ...
第 31 章项目实战-PC端固定布局[2]
学习要点: 1.大纲算法 2.section和div 3.结构分析主讲教师:李炎恢本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端固定布局来实现. 一．大纲算法 ...
第 31 章项目实战-PC端固定布局[1]
学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航主讲教师:李炎恢本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端固定布局来实现 ...

随机推荐

Bumped!【最短路】（神坑
问题 B: Bumped! 时间限制: 1 Sec 内存限制: 128 MB 提交: 351 解决: 44 [提交] [状态] [命题人:admin] 题目描述 Peter returned fr ...
mvc 之配置EF+oralce
只需要在项目中加载nuGet包就可以了操作:工具--nuGet包管理器--程序包管理器控制台在 PM>处输入 install-package entityframework 加载sqlser ...
ef core一个数据库多个dbcontext
如一个项目存在多个DbCcontext且使用同一个数据库,关系: 无关联:donetcli指定具体的dbcontext类名生成migration classes 有关联:子dbcontext继承父db ...
不错的redis文章
参考: https://www.cnblogs.com/itdragon/tag/redis/
java去除表达符号的正则表达式
java 去标点符号正则表达式博客分类: 小功能正则表达式标点符号 public static void main(String[] args) {String s = "哈哈!@#W ...
『TensorFlow』读书笔记_AlexNet
网络结构创新点 Relu激活函数:效果好于sigmoid,且解决了梯度弥散问题 Dropout层:Alexnet验证了dropout层的效果重叠的最大池化:此前以平均池化为主,最大池化避免了平均池 ...
jquery获取选中值
1.获取一组radio被选中项的值:var item = $('input[name=items][checked]').val(); 2.获取select被选中项的文本 :var item = $( ...
html5（二）
*{ margin:0px; padding:0px;} h1{ font:bold 20px verdana,sans-serif;} h1{ font:bold 14px verdana,sans ...
MVC跨域API
API using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Ne ...
Linux中修改环境变量及生效方法（永久、临时）环境变量查看
参考link:https://blog.csdn.net/u011630575/article/details/49839893 在项目中有一次帮忙组里搭环境时遇见了这部分的相关操作,记录一下.

pc端 添加购物车示例

pc端 添加购物车示例的更多相关文章

随机推荐

热门专题

pc端添加购物车示例

pc端添加购物车示例的更多相关文章