购物车效果

已于 2022-10-09 17:42:37 修改
阅读量86 收藏
点赞数
文章标签： javascript 前端 开发语言
于 2022-08-18 21:56:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c_l_a_n_n_d/article/details/126414555
版权

HTML代码 

<div class="box3">

            <div class="box3-top">

                <table>

                    <tr class="tr1">

                        <td>

                            <input type="checkbox" id="checkall">

                            <label for="checkall">全选</label>

                        </td>

                        <td>商品信息</td>

                        <td>规格</td>

                        <td>单价(元)</td>

                        <td>数量</td>

                        <td>小计(元)</td>

                        <td>操作</td>

                    </tr>

                    <tr class="tr"></tr>

                    <tr class="tr2">

                        <td class="td1"><input type="checkbox" id="checkall" class="checkone">

                        </td>

                        <td class="td2"><img class="left" src="img/list1.png" alt="">

                            <p class="left"><a href="">苹果(Apple) iPhone 13 256GB 星光色 移动联通电信5G全网通手机 双卡双待 苹果iphone13

                                </a></p>

                        </td>

                        <td class="td3">

                            <p>颜色:星光色</p>

                            <p>版本:iPhone 13 (256GB)</p>



                        </td>

                        <td class="td4">

                            <span>$6159.00</span>

                        </td>

                        <td class="td5">

                            <div class="num">

                                <span class="jian left">-</span>

                                <span class="num1">1</span>

                                <span class="jia right">+</span>

                            </div>

                        </td>

                        <td class="td6">$6159.00</td>

                        <td class="td7">

                            <p>移入关注</p>

                            <p class="del">删除</p>

                        </td>

                    </tr>

                    <tr class="tr2">

                        <td class="td1"><input type="checkbox" id="checkall" class="checkone">

                        </td>

                        <td class="td2"><img class="left" src="img/list2.png" alt="">

                            <p class="left"><a href=""> [苏宁官旗]3M厨下式家用直饮净水器<br> 净滋CDW7101V母婴型净水直饮机 无桶无废水

                                </a></p>

                        </td>

                        <td class="td3">

                            <p>型号：7101型母婴全效款</p>

                            <p></p>



                        </td>

                        <td class="td4">

                            <span>$1249.00</span>

                        </td>

                        <td class="td5">

                            <div class="num">

                                <span class="jian">-</span>

                                <span class="num1">1</span>

                                <span class="jia">+</span>

                            </div>

                        </td>

                        <td class="td6">$1249.00</td>

                        <td class="td7">

                            <p>移入关注</p>

                            <p class="del">删除</p>

                        </td>

                    </tr>

                    <tr class="tr"></tr>

                    <tr class="tr2">

                        <td class="td1"><input type="checkbox" id="checkall" class="checkone">

                        </td>

                        <td class="td2"><img class="left" src="img/list3.png" alt="">

                            <p class="left"><a href="">

                                    苏泊尔(SUPOR)电饭煲5升电饭锅 迷你触屏智能IH电磁精铁球釜内胆高端家用煮饭锅黑色5L

                                </a></p>

                        </td>

                        <td class="td3">

                            <p>容量：专柜SF50HC32</p>

                            <p></p>



                        </td>

                        <td class="td4">

                            <span>$799.00</span>

                        </td>

                        <td class="td5">

                            <div class="num">

                                <span class="jian">-</span>

                                <span class="num1">1</span>

                                <span class="jia">+</span>

                            </div>

                        </td>

                        <td class="td6">$799.00</td>

                        <td class="td7">

                            <p>移入关注</p>

                            <p class="del">删除</p>

                        </td>

                    </tr>

                    <tr class="tr2">

                        <td class="td1"><input type="checkbox" id="checkall" class="checkone">

                        </td>

                        <td class="td2"><img class="left" src="img/list4.png" alt="">

                            <p class="left"><a href="">百雀羚草本水嫩精纯明星美肌水100ml 补水保湿滋润肌肤淡化细纹长效锁水 </a></p>

                        </td>

                        <td class="td3">

                            <p>水嫩精纯：明星美肌</p>

                            <p></p>



                        </td>

                        <td class="td4">

                            <span>$79.00</span>

                        </td>

                        <td class="td5">

                            <div class="num">

                                <span class="jian">-</span>

                                <span class="num1">1</span>

                                <span class="jia">+</span>

                            </div>

                        </td>

                        <td class="td6">$79.00</td>

                        <td class="td7">

                            <p>移入关注</p>

                            <p class="del">删除</p>

                        </td>

                    </tr>

                    <tr class="tr"></tr>

                    <tr class="tr"></tr>



                </table>

                <table>

                    <tr class="tr3">

                        <td class="jieshuan">

                            <div class="quanxuan  left">

                                <input type="checkbox" id="checkall1">

                                <label for="checkall1">全选</label>

                                <span id="del1">删除选中商品</span>

                            </div>

                        </td>

                        <td>

                            <div class="jiage left">

                                <p>总价（含运费）：

                                    <span class="sum">¥0.00</span>

                                </p>



                            </div>

                        </td>

                        <td>

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

                        </td>

                    </tr>

                </table>

            </div>

        </div>

css代码

body .box3 {

  color: #666;

}

body .box3 table {

  width: 1190px;

  font-size: 12px;

}

body .box3 table .tr {

  height: 30px;

}

body .box3 table .tr1 {

  width: 1190px;

  height: 32px;

  line-height: 32px;

  border: 1px solid #ddd;

  border-top: 3px solid #ddd;

}

body .box3 table .tr2 {

  height: 134px;

  border: 1px solid #ddd;

}

body .box3 table .tr2 img {

  width: 80px;

  margin-right: 10px;

}

body .box3 table .tr2 a {

  color: #333;

}

body .box3 table .tr2 a:hover {

  color: #f70;

}

body .box3 table .tr2 td {

  vertical-align: top;

  padding-top: 15px;

}

body .box3 table .tr2 .td1 {

  width: 120px;

}

body .box3 table .tr2 .td2 {

  width: 400px;

}

body .box3 table .tr2 .td2 p {

  width: 240px;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

body .box3 table .tr2 .td3 {

  width: 180px;

}

body .box3 table .tr2 .td3 p {

  color: #999;

  width: 100px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

body .box3 table .tr2 .td4 {

  width: 130px;

  color: #333;

}

body .box3 table .tr2 .td5 {

  width: 140px;

}

body .box3 table .tr2 .td5 .num {

  display: flex;

  width: 80px;

  height: 22px;

  line-height: 22px;

  justify-content: space-evenly;

  border: 1px solid #ddd;

  text-align: center;

}

body .box3 table .tr2 .td5 .num span {

  width: 30px;

  line-height: 20px;

  cursor: pointer;

}

body .box3 table .tr2 .td5 .num .jian,

body .box3 table .tr2 .td5 .num .jia {

  line-height: 18px;

  background-color: #ccc;

}

body .box3 table .tr2 .td6 {

  width: 130px;

  color: #333;

  font-weight: 600;

}

body .box3 table .tr2 .td7 {

  color: #666;

}

body .box3 table .tr2 .td7 p {

  line-height: 20px;

  cursor: pointer;

}

body .box3 table .tr2 .td7 p:hover {

  color: #f70;

}

body .box3 table .tr3 {

  height: 60px;

  width: 1190px;

  border: 1px solid #ddd;

}

body .box3 table .jieshuan {

  line-height: 60px;

}

body .box3 table .jieshuan span {

  margin-left: 50px;

  cursor: pointer;

}

body .box3 table .jieshuan input {

  vertical-align: middle;

}

body .box3 table .jiage {

  line-height: 56px;

  flex-wrap: wrap;

  font-size: 14px;

  color: #333;

}

body .box3 table .jiage .sum {

  font-size: 22px;

  color: #f60;

}

body .box3 table button {

  height: 60px;

  width: 120px;

  font-weight: 700;

  font-size: 18px;

  border: none;

  color: #fff;

  background-color: #f60;

  cursor: pointer;

}

body .box3 table button:hover {

  background-color: #f50;

}

js代码

var ckAll = document.getElementById("checkall");

var ckAll1 = document.getElementById("checkall1");

var ckOnes = document.querySelectorAll(".checkone");

var _jian = document.querySelectorAll('.jian')

var _jia = document.querySelectorAll('.jia');

var _num1 = document.querySelectorAll('.num1');

var _td6 = document.querySelectorAll('.td6');

var _banjia = document.querySelectorAll('.td4 span')

var _del1 = document.getElementById('del1');

//选择效果

ckAll.onchange = function () {

    for (var i = 0; i < ckOnes.length; i++) {

        ckOnes[i].checked = this.checked;

    }

    ckAll1.checked = ckAll.checked;

    getSum();

    checkPro();

}

ckAll1.onchange = function () {

    for (var i = 0; i < ckOnes.length; i++) {

        ckOnes[i].checked = this.checked;

    }

    ckAll.checked = ckAll1.checked;



    getSum();

}

ckOnes.forEach(item => {

    item.onchange = function () {

        checkPro();

        getSum();

    }



})

function checkPro() {

    ckOnes = document.querySelectorAll(".checkone");

    if (ckOnes.length === 0) {

        ckAll.checked = false;

        return;

    }

    ckAll.checked = ckAll1.checked = Array.from(ckOnes).every(item => item.checked === true);

    console.log(ckOnes);

}

//商品数量更改及小计



for (let i = 0; i < _jia.length; i++) {

    _jia[i].onclick = function () {

        let j = parseInt(_num1[i].innerHTML)

        j += 1;

        let n = _banjia[i].innerHTML.replace(/[^0-9.0-9]/ig, "")

        _num1[i].innerHTML = j;

        _td6[i].innerHTML = '$' + (j * n).toFixed(2)

        getSum();

    }

}

for (let i = 0; i < _jian.length; i++) {

    let n = _banjia[i].innerHTML.replace(/[^0-9.0-9]/ig, "")

    _jian[i].onclick = function () {

        let j = _num1[i].innerHTML

        if (j == 1) {

            alert('商品数量至少为1件')

        } else {

            j -= 1;

            _num1[i].innerHTML = j;

            _td6[i].innerHTML = '$' + (j * n).toFixed(2)

        }

        getSum();

    }

}



//删除

var tab = document.querySelector('table');

var _tr2 = document.querySelectorAll('.tr2')

var _del = document.querySelectorAll('.del')

for (let i = 0; i < _tr2.length; i++) {

    _del[i].onclick = function () {

        let f = confirm('是否删除该商品')

        if (f == true) {

            _tr2[i].remove()



        }



        getSum();

        checkPro();

    }

}

// 删除选中

_del1.onclick = function () {

    let f = confirm('是否删除该商品')

    if (f == true) {

        ckOnes.forEach(item => {

            if (item.checked) {

                item.parentElement.parentElement.remove();

                ckAll1.checked = false;

            }

        });

    }



    getSum();

    checkPro();

}

//结算

var _sum = document.querySelector('.sum')

function getSum() {

    ckOnes = document.querySelectorAll(".checkone");

    var s = 0, t = 0;

    ckOnes.forEach((item, i) => {//遍历所有单个商品的复选框

        if (item.checked) { //如果单个商品的复选框是选中状态

            s += +item.parentElement.parentElement.getElementsByClassName("td6")[0].innerText.replace(/[^0-9.0-9]/ig, ""); //单个商品的总价进行叠加求和

        }

    });

    _sum.innerText = '$' + s.toFixed(2);

}

getSum()

效果图


 

 

wendongsheng1
关注
vue购物车效果
as_long_的博客
10-07 453
一、介绍 vue购物车效果实现了全选
Vue实现商品飞入购物车效果(电商项目)
10-15
在实现商品飞入购物车效果的Vue电商项目中，主要涉及到Vue框架的使用，以及对动画效果、组件化开发等知识点的运用。以下是对该实现过程所需知识点的详细解读： 1. Vue框架基础：Vue是前端开发中非常流行的渐进式...
淘宝购物车效果
weixin_30418341的博客
01-21 196
淘宝购物车效果 　　今天给大家带来的是淘宝购物车效果，写的不怎么好，请大家多多指教。 　　效果： 　　　　1.点击全选前的选择框，选择所有的选择框。 　　　　2.点击商品的加号或者减号可以改变商品的数量值，并且改变商品的小计和他的积分，同时在最下方的总积分和总金额会改变 　　　　3.在商品的数量值可以直接更改他的值，并且商品的小计和他的积分可以改变，同时在最下方的总积分和总金额会改变 ...
购物车的效果
qq_38674970的博客
03-21 255
var rating=(function(){ // 点亮 var init=function(el,num){ var $rating =$(el), $item=$rating.find('.rating-item'); var l
购物车完整效果（上）
da_caoyuan的博客
01-17 2375
这里写自定义目录标题左右列表的联动右边列表标题的悬停效果（粘性标签）[源码git地址](https://gitee.com/dacaoyuan/ShopCatDemo) 看到 饿了么，美团 的添加商品到购物车的效果，一直觉得很不错，虽然网上有很多博客已经实现了相似的效果，但是良莠不齐，有的也只是侧重一些效果的实现，然而用到自己的项目中，并没有那么实用。在此，系统的整理的一下，争取全面实用些！希望对...
JavaScript做简单的购物车效果（增、删、改、查、克隆）
weixin_44519496的博客
07-08 2700
比如有时候遇到下面这种情况，点击加入购物车，然后在上方的购物车中动态的添加商品以及商品的信息，我们就可以通过JavaScript实现简单的这些操作。 首先我们需要在html文档中，通过css对页面的布局做一些简单的设置。并创建两个模板，其display属性设为隐藏。后面再通过克隆的方法往指定的位置添加元素。大致css样式如下： .buy { width: 200px; height: 300px; display: inline-blo
购物车效果demo
06-10
在Android应用开发中，实现一个类似美团或饿了么的购物车效果是一项常见的需求，它涉及到用户选择商品、数量增减、总价计算以及本地数据存储等多个功能模块。本项目"购物车效果demo"旨在提供一个基础的实现方案，...
js加入购物车抛物线动画与购物车效果特效
05-23
js加入购物车抛物线动画与购物车效果特效，亲测可用， 当您在电商购物网站浏览中意的商品时，您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件，点击加入...
Web前端-（原生JS）购物车效果
最新发布
04-04
在本文中，我们将深入探讨如何使用原生JavaScript实现一个简单的购物车效果，这通常涉及到页面交互、DOM操作、事件处理以及动态计算等多个方面。购物车功能是电子商务网站中不可或缺的一部分，它允许用户选择商品并...
小程序加入购物车动画效果（飞入购物车）
08-22
小程序加入购物车动画效果实现，飞入购物车。从点击处飞往购物车位置。
手机web加入购物车特效展示资源
12-16
此处核心实现的是加入购物车的动画特效，至于切换编辑模式等其他特效未做更好的处理，如果您有其他的需求可以自行研究或与我讨论都可以，很高兴能有更多人与我讨论前端知识。
JS实现购物车效果
qq_42739776的博客
08-27 849
1.效果 1.效果图： 2.功能描述 1.全选时，总价为商品价格和 2.反选时，总价为0 3.任意点击商品栏前的选中时，当所有商品前的选框选中时， 全选按钮变为选中，当商品前的任意一个选框未被选中时， 全选为未选中状态。 4.商品数量：点击+时，数量增加，单个商品总价随之变化 的同时，总价随之变化。点击-时，商品数量-1，单个商品 总价和所有商品合计减少对应价格，当数量为减为0时，移除 该产品。 5.删除：点击删除时，删除该商品，所有商品总计变化。 3.目的的意义： 熟悉javascript对dom元素
实现电商项目购物车的效果（类似京东商城）
鲨鱼不会飞的博客
12-20 794
前言部分 电商一直是一个比较热门的项目，以前没有接触过最近正好事情不多，所以决定学习一个电商的项目，零散的做了一些基础的准备工作，比如：首页的多类型列表，分类页面，购物车页面。 花了几天的时间做了这些东西，由于第一次做走了一些弯路，这里记录一下，防止以后同样的问题。 这里放出一些截图，如果后续时间上还允许的话计划把这个项目做的完整一些，争取能做到放出来给大家参考的程度。 图片1 图片2 图片3...
js实现购物车案例（全选，反选，加入，删除，加减，总价，数量）
m0_62309118的博客
09-26 5569
1.购物车效果展示 2.代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0px; padding:0px; }.shop{ width:900px; height:300px; border:1px solid red; margin:0 au
html购物车效果,模拟加入购物车效果
weixin_29913191的博客
06-04 274
html>模拟加入购物车效果*{margin:0pxauto;padding:0px;}.top{width:402px;height:35px;line-height:35px;text-align:center;margin-top:50px;background:#C40000;color:#fff;}.main{width:400px;height:400p...
vue——实现飞入购物车效果(重点在于获取元素的位置)
yehaocheng520的博客
07-30 5570
昨天项目负责人问我能否在电商项目中加入购物车时，加一个飞入购物车的功效。 这个效果其实是比较常见的，之前我也有遇到这种需求，因为不太熟，直接拒绝。现在还是想办法实现一下吧。 效果图如下： 当点击购物车动画按钮时，在商品图部分出现一个图片，这个图片会沿一定的轨迹，飞到购物车中，此时会调取加入购物车接口，购物车中的数值会加1。 基本功能就是这样： 飞入购物车最重要的就是获取元素的位置 其实对于动画，我们已知的就是：animation和transition，都可以实现动画，现在的重点就是如何获取元素的位置。 1
利用jquery.fly实现仿淘宝购物车飞入特效
少吃点肉的博客
11-23 9003
学习在于积累，今天利用jquery.fly实现仿淘宝购物车飞入特效，虽然实现起来简单，但实际使用时有一堆坑需要注意。结合实际项目经验，我简单的总结了一下到底有哪些坑需要去填。参考网址：github：https://github.com/amibug/fly从以上网址下载js文件即可使用。一：载入页面 <script src="../lib/jquery/dist/jquery.min.js"
把商品添加到购物车的动画效果（贝塞尔曲线）
热门推荐
Android_Study_OK的博客
05-30 1万+
如图：参考：Android补间动画，属性动画实现购物车添加动画思路： 确定动画的起终点 在起终点之间使用二次贝塞尔曲线填充起终点之间的点的轨迹 设置属性动画，ValueAnimator插值器，获取中间点的坐标 将执行动画的控件的x、y坐标设为上面得到的中间点坐标 开启属性动画 当动画结束时的操作 难点：PathMeasure的使用 - getLength() - boolea
jQuery实现移动端购物车效果详解
"这篇文章主要展示了如何使用jQuery在移动端创建一个购物车效果，通过实例代码详细讲解了购物车功能的实现，包括数值计算、界面布局和显示效果。" 在移动设备上构建购物车功能是电子商务应用的关键组成部分。jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值