实现购物车动态效果代码

最新推荐文章于 2022-07-25 00:23:07 发布
最新推荐文章于 2022-07-25 00:23:07 发布
阅读量820 收藏
点赞数
文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36278639/article/details/52899995
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_实现购物车动态操作</title>
    <script src="jquery-1.11.3.js"></script>
    <style>
        table{width:600px; text-align:center;
            border-collapse:collapse;
        }
        td,th{border:1px solid black}
        td[colspan="3"]{text-align:right;}
    </style>
</head>
<body>
    <table id="data">
        <thead>
        <tr>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>iPhone6</td>
            <td>&yen;<span>4488</span></td>
            <td>
                <button>-</button>
                <span>1</span>
                <button>+</button>
            </td>
            <td>&yen;<span>4488</span></td>
        </tr>
        <tr>
            <td>iPhone6 plus</td>
            <td>&yen;<span>5288</span></td>
            <td>
                <button>-</button>
                <span>1</span>
                <button>+</button>
            </td>
            <td>&yen;<span>5288</span></td>
        </tr>
        <tr>
            <td>iPad Air 2</td>
            <td>&yen;<span>4288</span></td>
            <td>
                <button>-</button>
                <span>1</span>
                <button>+</button>
            </td>
            <td>&yen;<span>4288</span></td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="3">Total:</td>
            <td>&yen;<span>14064</span></td>
        </tr>
        </tfoot>
    </table>


    <script>
        // 1. 为button绑定click事件
$("button").click(function(event){
// 判断当前是-还是+
var elem = event.target;
if($(elem).text() == "+"){
// 修改span元素的文本内容
var num = parseInt($(elem).prev().text());
$(elem).prev().text(num+1);
}else{
var num = parseInt($(elem).next().text());
$(elem).next().text(num-1);
// num=0
if(num == 0){
$(elem).next().text("0");
}
}
// 修改小计的值
// 数量

// 单价
var price  = parseInt($(elem).parent().prev().children("span").text());
// 修改小计
$(elem).parent().next().children("span").text((num+1)*price);
// 合计
var $spans = $("#data>tbody>tr :last-child>span");
// 遍历
var total = 0;
for(var i=0;i<$spans.length;i++){
var span = $spans[i];
var num = parseInt($(span).text());
total += num;
}


$("#data>tfoot>tr>td:last>span").text(total);
});
    </script>
</body>
</html>
ATFunction
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
达内项目 购物车 shoppingcart
02-16
达内项目 购物车 shoppingcart 有研究或探讨或开源的请加群:37424970 或联系本人MSN或邮箱:zhuseahui@yahoo.com.cn
购物车项目静态页面
09-22
达内购物车项目静态页面，包括建表语句、静态页面。
jQuery购物车完整功能实现，全代码详解（有动态效果图）
周百万的博客
07-25 8615
jQuery购物车 实现购物车完整功能全代码详解（有gif动态效果图）
javascript购物车实现详细代码讲解
热门推荐
小圣贤君的博客
09-27 10万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。 现在，笔者对购物车进行了简单实现，能够实现真实购物车当中的大部分功能。在本示例当中，用到了javascript中BOM操作，DOM操作，表格操
商品添加购物车实现动画效果
Raymon、浅忆。
07-28 1165
在应用商场的时候,发现淘宝和京东在往购物车添加商品时,会有商品缩略图跑到购物车的效果,特此做了个小Demo,便于学习和应用 在controller的.h文件中 @interface ViewController () @property (nonatomic,strong) UIBezierPath *path; @end @implementation ViewController {
CSS3实现动态购物车图标特效代码
03-20
CSS3实现动态购物车图标是一款基于HTML5+CSS3实现的带动画效果购物车图标特效代码。
jQuery实现购物车数字加减效果
12-10
像京东提交订单时目前使用的是左右加减数字的效果，这个效果直接明了，操作简单。我们使用jquery.spinner.js插件实现左右加减数字，调用方法非常简单，请看演示示例1。 代码如下: <input type=”text” class=”...
vue购物车商品累加结算代码
04-25
在这个特定的项目中，“vue购物车商品累加结算代码”提供了一个完整的解决方案，用于实现购物车功能，包括商品选择、数量累加以及结算过程。这个代码实例是针对电商应用或者任何需要处理商品购买流程的网站设计的。 ...
jQuery手机端购物车结算代码
06-24
`jQuery手机端购物车结算代码`是一个专为移动端设计的购物车应用示例，它实现了用户在手机上选择商品、增删商品以及进行总价结算的功能。这个项目的核心是利用jQuery库来优化交互体验，提高用户操作的便捷性。 首先...
购物车全过程html+css+js
qq_275487025的博客
08-10 2万+
html: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;购物车&amp;lt;/
购物车的简单实现
04-06
达内课堂购物车的增删查改，不过蛮有CSS样式，只是简单的页面
基于html和css的仿京东静态页面代码
12-15
这是一个简单的京东静态页面布置，希望对大家有帮助，
鼠标指针点击的动画click-gif-4.gif
05-18
鼠标指针点击的动画 可以放在PPT里，十分的酷炫， 也可以放在网页友情链接的地方，十分的酷炫 也可以放在电脑硬盘里，不是很酷炫
jQuery HTML5 CSS3 加入购物车飞入动画特效
09-21
1.本案例是仿京东加入购物车飞入动画特效； 2.使用 jQuery + HTML5 + CSS3 前端开发技术； 3.下载源码即可运行查看效果； 4.源码运行环境：VS2012；
html购物车
12-06
很简单的html购物车，适合刚开始学习html的同学，非常实用。
vue购物车的动态功能实现
JJJJ的博客
07-31 431
基于vue,购物车的实现 1.css代码 table{ border:1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th,td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-align: left; } th{ background-color: #f7f7f7; color:#5c6b77; font-weight: 600; } a
css3的animation实现购物车小球飞入效果
guxiansheng1991的博客
04-01 1万+
一.思路 1.在body下添加5个元素并绝对定位,且display:none;(5个元素是防止用户连续点击) 2.单机页面的某一处位置,并将第一个dispaly:none;的dom定位到单机位置 3.使用css3将定位后的dom运动到目标,并去除style,设置display:none; 二.实现 html &lt;body&gt; &lt;p&gt;在页面的任何位置点击,...
购物车飞入的动画效果
kakaxiD的博客
12-28 2332
网盘下载地址：链接: https://pan.baidu.com/s/1kVwNYPD 密码: dyda<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>懒人原生模拟移动APP飞入购物车动画效果</title> <meta content="width=device-width, ini
js添加到购物车动画效果实现
ITzhongzi的博客
12-31 7601
方法一： 用js控制购车的的位置实现 原理解析： 通过js动态生成一个过度元素（就是一个可以移动的小球），并控制该元素的位置移动，从点击按钮dom元素移动大购物车的dom元素，实现添加到购物车的动态效果。 核心js代码 github代码地址 /* * 添加到购物车动画 脚本 * */ /*** * 动画轨迹控制 * @param addBtnDom 增加按钮的dom元素或者选择器...
javascript购物车实现的效果
最新发布
08-13
JavaScript购物车实现的效果可以非常丰富和实用。通过使用JavaScript编写的购物车功能...总之，通过使用JavaScript实现购物车功能，我们可以实现一个用户友好、交互性强的购物车系统，为用户提供便捷、高效的购物体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值