购物车

最新推荐文章于 2022-05-23 07:50:44 发布
最新推荐文章于 2022-05-23 07:50:44 发布
阅读量149 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L8676/article/details/100118218
版权

在这里插入图片描述


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block {
            width: 1000px;
            height: auto;
            min-height: 30px;
            margin: auto;
        }

        .b-top {
            display: flex;
            flex-direction: row;
            line-height: 30px;
            font-size: 14px;
            background: #ffe0cb;
            text-align: center;
        }

        .b-lits {
            flex: 1;
        }

        .b-list {
            flex: 2;
        }

        .b-info {
            display: flex;
            flex-direction: column;
        }

        .b-par {
            height: 70px;
            line-height: 70px;
            display: flex;
            flex-direction: row;
            padding: 15px 0;
            border-bottom: 1px dashed silver;
            text-align: center;
        }

        .b-par > div:nth-child(2), .b-par > div:nth-child(5) {
            flex: 2;
        }

        .b-par > div {
            flex: 1;
        }

        .b-par > div:nth-child(3) > img {
            width: 70px;
        }

        .b-par > div:nth-child(5) > button {
            width: 25px;
            height: 25px;
            border-style: none;
            background: orange;
            outline: none;
            color: blue;
            font-size: 17px;
        }

        .b-par > div:nth-child(5) > input {
            width: 25px;
            height: 25px;
            border-style: none;
            outline: none;
            text-align: center;
        }

        .b-par > div:last-child > button {
            width: 60px;
            height: 25px;
            border-style: none;
            color: blue;
            outline: none;
        }

        .b-go {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .b-go > div {
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
        }

        .b-go > div:last-child {
            background: red;
            color: #fff;
        }

        input[type=checkbox] {
            outline: none;
        }

        .bgcolor {
            background: pink;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="b-top">
        <div class="b-lits"><input id="ckall" type="checkbox"/> 全选</div>
        <div class="b-list">商品名称</div>
        <div class="b-lits">图片</div>
        <div class="b-lits">单价</div>
        <div class="b-list">数量</div>
        <div class="b-lits">小计</div>
        <div class="b-lits">操作</div>
    </div>
    <div class="b-info">

    </div>
    <div class="b-go">
        <div>
            <input id="ckfan" type="checkbox"/>反选
        </div>
        <div>
            去结算>
        </div>
    </div>
</div>
<script>
    /*
     * 模拟购物车数据
     * */
    var cart = [
        {
            "id": "101321XNMNSDJYE6871DAS21",
            "name": "华为nova5 pro",
            "src": "./cartimage/415d8ef0da06eb00.png",
            "price": "1499",
            "totle": "1499",
            "num": 1
        },
        {
            "id": "101321XNMNSDJYE6871DAS21",
            "name": "华为nova5 pro",
            "src": "./cartimage/415d8ef0da06eb00.png",
            "price": "1499",
            "totle": "1499",
            "num": 1
        },
        {
            "id": "101321XNMNSDJYE6871DAS21",
            "name": "华为nova5 pro",
            "src": "./cartimage/415d8ef0da06eb00.png",
            "price": "1499",
            "totle": "1499",
            "num": 1
        },
        {
            "id": "101321XNMNSDJYE6871DAS21",
            "name": "华为nova5 pro",
            "src": "./cartimage/415d8ef0da06eb00.png",
            "price": "1499",
            "totle": "1499",
            "num": 1
        }
    ]
    var binfo = document.getElementsByClassName("b-info")[0];
    //遍历数据进行动态创建dom元素
    for (var index in cart) {
        /*
         var str = "<div class='b-par'> <div ><input type='checkbox'/></div> <div >商品名称</div> <div>图片</div> <div>单价</div> <div>数量</div> <div>小计</div> <div>操作</div> </div>";
         binfo.innerHTML+=str;*/
        //1创建div
        var par = document.createElement("div");
        par.className = "b-par";
        binfo.appendChild(par);
        //创建行里面的列
        var parchild = document.createElement("div");
        var ckbox = document.createElement("input");
        ckbox.type = "checkbox";
        ckbox.className = "cklist";
        parchild.appendChild(ckbox);

        var parchildname = document.createElement("div");
        parchildname.innerHTML = cart[index].name;

        var parimg = document.createElement("div");
        var img = document.createElement("img");
        img.src = cart[index].src;
        parimg.appendChild(img);

        var parchildprice = document.createElement("div");
        parchildprice.innerHTML = cart[index].price + "￥";
        parchildprice.className = "price";
        parchildprice.setAttribute("data-price", cart[index].totle)


        //数量
        var parchildnumber = document.createElement("div");
        var leftbtn = document.createElement("button");
        leftbtn.innerHTML = "-";
        leftbtn.className = "leftbtn";
        var num = document.createElement("input");
        num.value = cart[index].num;
        num.className = "ipt";
        var rightbtn = document.createElement("button");
        rightbtn.innerHTML = "+";
        rightbtn.className = "rightbtn";
        parchildnumber.appendChild(leftbtn);
        parchildnumber.appendChild(num);
        parchildnumber.appendChild(rightbtn);

        var smalltotle = document.createElement("div");
        smalltotle.innerHTML = cart[index].totle + "￥";
        smalltotle.className = "smalllist";

        var deletepar = document.createElement("div");
        var btndelete = document.createElement("button");
        btndelete.innerHTML = "删除";
        deletepar.appendChild(btndelete);


        par.appendChild(parchild);
        par.appendChild(parchildname);
        par.appendChild(parimg);
        par.appendChild(parchildprice);
        par.appendChild(parchildnumber);
        par.appendChild(smalltotle);
        par.appendChild(deletepar);
    }

    window.onload = function () {
        var ckall = document.querySelector("#ckall");
        var ckfan = document.querySelector("#ckfan");
        var cklist = document.getElementsByClassName("cklist");
        var leftbtn = document.getElementsByClassName("leftbtn");
        var rightbtn = document.getElementsByClassName("rightbtn");
        var price = document.getElementsByClassName("price");
        var ipt = document.getElementsByClassName("ipt");
        var smalllist = document.getElementsByClassName("smalllist");
        var bpar = document.getElementsByClassName("b-par");

        //全选反选
        ckall.onclick = function () {
            if (this.checked) {
                for (var i = 0; i < cklist.length; i++) {
                    cklist[i].checked = true;
                    bpar[i].className = "b-par bgcolor"
                }
            }
            else {
                for (var i = 0; i < cklist.length; i++) {
                    cklist[i].checked = false;
                    bpar[i].className = "b-par"
                }
            }

        }
        ckfan.onclick = function () {
            for (var i = 0; i < cklist.length; i++) {
                cklist[i].checked = !cklist[i].checked;
                if (cklist[i].checked) {
                    bpar[i].className = "b-par bgcolor"
                }
                else {
                    bpar[i].className = "b-par"
                }
            }
        }

        //后边按钮的相关功能
        for (var i = 0; i < leftbtn.length; i++) {
            //每行前面的ckbox 的事件
            cklist[i].index = i;
            cklist[i].onclick = function () {
                if (this.checked) {
                    bpar[this.index].className = "b-par bgcolor"
                }
                else {
                    bpar[this.index].className = "b-par"
                    ckall.checked = false;
                }
            }
            leftbtn[i].index = i;
            leftbtn[i].onclick = function () {
                var val = ipt[this.index].value;
                val--;
                if (val < 1) {
                    val = 1;
                }
                ipt[this.index].value = val;
                smalllist[this.index].innerHTML = smallTotale(price, this.index, val) + "￥";
            }
            rightbtn[i].index = i;
            rightbtn[i].onclick = function () {
                var val = ipt[this.index].value;
                val++;
                ipt[this.index].value = val;
                smalllist[this.index].innerHTML = smallTotale(price, this.index, val) + "￥";
            }
            ipt[i].onkeydown = function (e) {
                if (e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode == 8) {
                    if (e.keyCode == 8 && this.value == 1) {
                        alert("该宝贝不能删除");
                        return false;
                    }
                    else if (e.keyCode == 8 && this.value != 1) {
                        this.value = 1;
                        return false;
                    }
                }
                else {
                    return false;
                }
            }
            ipt[i].index = i;
            ipt[i].onkeyup = function () {
                smalllist[this.index].innerHTML = smallTotale(price, this.index, this.value) + "￥";
            }
        }
    }

    //小计
    function smallTotale(obj, index, num) {
        return obj[index].getAttribute("data-price") * num;
    }
</script>
</body>
</html>
Study 365 Always
关注
专栏目录
Js实现淘宝购物车类似功能(DOM综合应用)
Carrywill的博客
02-18 1万+
ShoppingCart 购物车这个前端Deom中的很多功能是使用js脚本实现的。 具体效果有：1.可以全选，全不选商品。2.选中的商品，点击下面“删除所选”按钮可以批量删除3.每个商品，可以在该商品信息栏最后的“删除”按钮删除该商品4.每个商品，可以在该商品信息栏增加或减少商品的数量，改变后该商品的小计价格及最后的商品总价自动发生变化。阅读提示：html是网上练习的模板，css部分也没有什么好说...
js--实现购物车
weixin_44892520的博客
08-06 185
动态创建/添加元素
jQuery 和DOM 实现的简易购物车
梁甜田的博客
04-24 414
1、DOM版 <html> <head> <meta charset="UTF-8"> <title>DOM版我的购物车</title> <style> #tb{ border:1px solid #000; width: 600px; ...
js中的DOM模拟购物车功能
10-20
本篇文章主要介绍了js中的DOM模拟购物车功能的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
dom版购物车
mylove_non的博客
08-20 582
dom版购物车的实现 html: <table border="1" cellspacing="0" id="table"> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> </tr> </thead>
购物车_购物车_
10-03
在IT行业中，购物车功能是电子商务网站不可或缺的一部分。在C#编程语言中，实现购物车功能通常涉及到ASP.NET框架，这是一个用于构建Web应用程序的强大工具。本文将深入探讨如何使用C#和ASP.NET来创建一个简单的...
当当购物车页面_当当购物车页面_html网页购物车_js当当购物车_
10-01
下面将详细阐述这两个技术在实现购物车功能中的应用及其相关知识点。 1. HTML（超文本标记语言）：HTML是网页设计的基础，用于定义网页的结构和内容。在购物车页面中，HTML元素如`<table>`、`<tr>`、`<td>`用于创建...
一个简单的当当网购物车页面，可以实现简单购物
05-29
【标题】：“一个简单的当当网购物车页面”是指一种基于网页技术实现的模拟当当网购物车功能的示例项目。这个项目旨在帮助初学者理解购物车逻辑以及相关前端和后端技术的运用。 【描述】：这个简单购物车页面能够...
HTML简单的实现购物车
07-27
购物车是电商网站的核心组成部分，它允许用户选择商品并存储这些选择，以便于后续结算。在这个场景中，我们将探讨如何使用HTML和JavaScript来简单实现一个购物车功能。 首先，HTML用于构建页面的基本结构。在创建...
微信小程序Demo-购物车-附完整源代码.rar
最新发布
03-20
微信小程序Demo-购物车是一款专为微信小程序开发者打造的购物车功能示例项目。该项目包含了完整的购物车功能实现，包括商品的添加、删除、修改数量以及结算等功能。同时，该项目还提供了丰富的界面设计和用户体验...
js前端开发案例教程之DOM购物车（动手实践：购物车）
aka_xyz的博客
12-09 4075
js前端开发案例教程 之 DOM购物车（动手实践：购物车） html和css <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <style> .cart{width: 700px;padding: 0 10px 10px;border: 1px solid #D5E5F5;} .
DOM简易购物车实例
xingkong_333的博客
06-29 819
Title table{ border-spacing:0; border:1px solid #aaa; } th,td{ width:100px; border:1px solid #aaa; }
Dom编程（购物车 全选及金额总计、仿css手册实例效果）
程序员
08-12 882
购物车 全选及金额总计
js DOM应用---购物车
weixin_45494667的博客
07-04 191
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table, th
5.21 制作一个简易的购物车效果 JS的这些Dom基础内容快来学习吧
qq_15832739的博客
05-23 444
前言：目前正在学习JS的一些基础内容，会将学习到的持续分享到博客，欢迎萌新观看 一、节点关系 1.父节点 parentElement // 获取到父节点 var parent = document.getElementById("parent"); 2.所有子节点 children // 获取到所有的子节点 console.log(parent.children); 3.第一个子节点 firstElementChild // 第一个子节点 var fir...
用DOM写购物车的添加商品以及全选功能
keep_xiao的博客
11-06 383
在这里插入代码片在这里插入代码片 # 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了![在这里插入图片描述](https://img-blog.csdnimg.cn/20201106160547673.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG
DOM四步来写购物车效果
chen_c_的博客
03-20 647
一、用DOM四步来写购物车效果 1.DOM四步 a. 先查找触发事件的元素 b. 为元素绑定事件处理函数 c. 再查找要修改的元素 d. 修改元素 代码如下（示例）： <script> //1.1 先查找id为data的table var table=document.getElementById("data"); //1.2 再查找table下所有button元素 var buttons=table.getElementsByTagName("button");
DOM 实现购物车的实时变化
HeWar_的博客
10-13 170
<!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" /> &...
DOM表格 简单购物车、表格隔行变色、表格行颜色随鼠标移动变色
Birdlun的博客
07-06 438
目录 DOM访问表格元素 常用属性和方法 rows[index]返回表格指定的行为对应属性 cells[index]返回表格指定的列所对应的属性 表格的增删改查 表格添加删除常用方法 表格行添加删除方法 列：实现购物车 列：设置表格颜色并实现隔行变色 DOM访问表格元素 常用属性和方法 caption 返回表格的标题对象 rows 返回该表格里的所有表格行 tbo...
使用Cookie实现购物车功能
"本文主要介绍了如何使用Cookie技术来实现一个购物车功能，包括将商品添加到购物车、显示购物车中的商品信息、计算购物车商品总数和总金额等步骤。" 在网页应用中，购物车功能是用户交互的重要部分，而使用Cookie...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值