简要模仿淘宝购物车功能

一主要功能：

实现通过点击、拖动添加购物车，购物金额自动结算，以及删减物品的功能。

有待改进之处：还未实现在购物车内实现+1，-1功能。

二、效果图

三、相关代码

1,HTML+JS

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>模仿淘宝购物车</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="interface.js"></script><link rel="stylesheet" type="text/css" href="index.css">
</head>
<body><div class="main"><h1>服装样式</h1><div id="products" class="products"><div id="product1" class="product"><img src="data:images/yi1.jpg"><h2>服装1</h2><p>价格: <span>49.95</span>$   </p><a href="">加入购物车</a></div><div id="product2" class="product"><img src="data:images/yi2.jpg"><h2>服装2</h2><p>价格: <span>49.95</span>$   </p><a href="">加入购物车</a></div><div id="product3" class="product"><img src="data:images/yi4.jpg"><h2>服装3</h2><p>价格: <span>49.95</span>$   </p><a href="">加入购物车</a></div><div id="product4" class="product"><img src="data:images/yi4.jpg"><h2>服装4</h2><p>价格: <span>49.95</span>$   </p><a href="">加入购物车</a></div><div id="product5" class="product"><img src="data:images/yi5.jpg"><h2>服装5</h2><p>价格: <span>49.95</span>$   </p><a href="">加入购物车</a></div><div id="product6" class="product"><img src="data:images/yi6.jpg"><h2>服装6</h2><p>价格: <span>49.95</span>$   </p><a href="">加入购物车</a></div></div><div class="cart" id="cart"><h3>我的购物车</h3><div id="cartProducts"></div><p style="color:red;">总计金额： <span id=cartTotal> 0.0</span> $</p></div></div><script type="text/javascript">$(document).ready(function(){$('#products a').bind("click",function(){$(this.parentNode).TransferTo({to:addProductToCart(this.parentNode),className:"transferProduct",duration:400});return false;});$("div.product").Draggable({revert:true,fx:300,ghosting:true,opacity:0.4});$("#cart").Droppable({accept: "product",activeclass: "activecCart",hoverclass: "hoverCart",tolerance:"intersect",onActivate:function(dragged){if(!this.shakeFirst){$(this).Shake(1);this.shakeFirst = true;}},onDrop: addProductToCart});});var addProductToCart = function(dragged){var cartItem;var productName = $("h2",dragged).html();var productPrice = parseFloat($("span",dragged).html());var productId = $(dragged).attr("id");var isInCart = $("#"+productId+"_cart");if (isInCart.size() == 1) {var quantity = parseInt(isInCart.find("span.quantity").html())+1;isInCart.find("span.quantity").html(quantity+"").end().Pulsate(600,2);}else{$("#cartProducts").append('<div class = "productCart" id = "'+productId+'_cart">' +productName+ '<a href = "#">remove</a><br/>数量：<span class = "quantity">1</span><br/>价格：<span class = "price">'+productPrice+ '$</span> </div> ').find("div.productCart:last").fadeIn(400).find("a").bind("click",function(){$(this.parentNode).DropOutDown(400,function(){$(this).remove();calculateCartTotal();});return false;});}calculateCartTotal();};var calculateCartTotal = function(){var total = 0;$("#cartProducts .productCart").each(function(){var price = parseFloat($("span.price",this).html());var quantity = parseInt($("span.quantity",this).html());total += price*quantity;});$("#cartTotal").html(formatNr(total));$("#cart p").Highlight(1000,"#ff0",function(){$(this).css("backgroundColor","transparent");});};var formatNr = function(nr){thousands = parseInt(nr/1000);hundreds = parseInt((nr-thousands*1000)/100);tens = parseInt((nr-thousands*1000-hundreds*100)/10);gewei = parseInt(nr-thousands*1000-hundreds*100-tens*10);xiaoshu = parseInt((nr-parseInt(nr))*100);return thousands*1000+hundreds*100+tens*10+gewei+"."+xiaoshu ;}</script>
</body>
</html>

　　2,css代码

*{margin:0;padding: 0;
}
.main{position:relative;margin:10px;font-size:14px;
}
h1{color:green;/*border:1px solid gray;*/margin:0px 0px 15px 15px;
}
h2,h3{color:rgb(65,117,5);
}
.products{position:absolute;top:20px;left:0;width:70%;
}
.product{float:left;margin:15px;
}
.cart{position:absolute;top:20px;right:0;width:30%;text-align: center;
}
#cart H3 {padding:4px;font-size:12px;color:#fff;background-color: #6caf00;}#cart P {padding:4px;}
.activeCart {background-color: #daff9f}.hoverCart {background-color: #ffffcc}
.productCart {font-size: 10px;margin: 10px}.productCart a {float: right;color: #f00;}.transferProduct {border: #6caf00 1px solid;}

　　部分代码参考网上下载的文件制作而成。

转载于:https://www.cnblogs.com/1833lljy/p/8664953.html

简要模仿淘宝购物车功能相关推荐

2020用vue实现仿美团导航切换功能和淘宝购物车功能，实现默认第一个导航显示效果?
总结:之前一直未写过同时实现跳转当前页面和跳转新页面的项目,要么是当前,要么是新页面,今天更新一个两个同时实现的项目. :相信很多人都遇到过router-link通过to跳转页面有时候会不显示内容的b ...
淘宝购物车功能的实现
json串 shop.json { "code" : 200 , "orderData" : [ { "shopId": 1, " ...
高仿淘宝购物车分分钟让你集成
前言做商城类电商app购物车确实一直是一个难点,为什么难呢? 主要原因呢是他里面的逻辑复杂,然后百度的资源好像都不太理想,好多就是一个简单的listView来实现根本就达不到开发的需求.然后一般 ...
淘宝购物车前端（JS和Angularjs版本)
今天用HTML和JS实现以下购物车,然后再用Angualrjs再去实现一下购物车的前端实现. 功能页面分析: 既然是做模仿淘宝购物车,肯定要先去分析一下淘宝的购物车页面,自己去淘宝卖了两件东西,看了下 ...
面试高频问题——“淘宝购物车”怎么测试
面试高频问题--"淘宝购物车"怎么测试测试思维依然附上测试任何事物的测试思路: 第一步:梳理产品的核心业务流程:明白这是个什么项目,实现了什么业务,以及是怎么实现的? 这个步骤 ...
你能说说“淘宝购物车”怎么测试么？
前言之前我有整理过一系列文章"支付功能如何测试?","抖音直播要如何测试","微信红包如何测试",很多学生说是及时雨,帮助了他们的测试面试 ...
互联网晚报 | 12月8日星期三 | 淘宝购物车上线“好友买单”功能；英超联赛正式入驻视频号；中国联通成立5G消息生态联盟...
今日看点 ✦ 中国联通成立5G消息生态联盟,已搭建300余项示范应用 ✦ 淘宝购物车双12上线"好友买单"功能,将支持填写双地址 ✦ 百度百家号宣布创作者突破460万,2022年将 ...
互联网晚报 | 10月28日星期四 | 农夫山泉钟睒睒首次成为中国首富；淘宝购物车分享功能上线；段永平否认牵头OV联合造车...
‍ ‍今日看点 ✦ 荣耀打响重回海外第一枪:多国市场发布荣耀50系列 ✦ 段永平否认牵头OPPO.vivo联合造车,称绝不会"重出江湖" ✦ 淘宝购物车分享功能正式上线,可以分享至 ...
仿淘宝购物车实现功能：滚动页面到【结算操作】不可视时，浏览器底部出现固定栏
最近在做一个电商平台,做到购物车的时候,就脑洞大开要模仿淘宝实现一个非常人性化的用户体验性效果.觉得很不错,非常好玩就很大家分享了. 先附上效果图实现的效果就是这个小东西,哈哈 1.整个页面结算操作 ...

简要模仿淘宝购物车功能

简要模仿淘宝购物车功能相关推荐

最新文章

热门文章