<a href="#0" class="btn btn-success add-button" data-price="3669.00" data-proid="1" data-proname="华为P9" data-proimg="img/huawei_p9.jpg">添加到购物车</a>

<div class="cd-cart-container empty"> 
<a href="#0" class="cd-cart-trigger"> 
购物车 
<ul class="count"> <!-- cart items count --> 
<li>0</li> 
<li>0</li> 
</ul> 
</a> 
<div class="cd-cart"> 
<div class="wrapper"> 
<header> 
<h2>购物车</h2> 
<span class="undo">已删除 <a href="#0">恢复</a></span> 
</header> 
<div class="body"> 
<ul> 
<!-- 此部分是购物车商品部分，由javascript动态插入 --> 
</ul> 
</div> 
<footer> 
<a href="#0" class="checkout"><em>结算 - ￥<span>0</span></em></a> 
</footer> 
</div> 
</div> 
</div>

<div class="body"> 
<ul> 
<li class="product"> 
<div class="product-image"> 
<a href="#0"><img src="/UploadFiles/2021-04-02/pro.jpg">

CSS部分在本文不展示了，大家可以下载源码中的css/style.css查看。
Javascript
本实例代码是基于jQuery，因此需要提前加载jQUery库文件。
当用户点击按钮.add-button后，触发函数addProduct()，将商品信息插入到 .body > ul中。


function addProduct(proname,proid,price,proimg) { 
var quantity = $("#cd-product-"+proid).text(); 
var select='',productAdded=''; 
if(quantity==''){ 
var select = '<span class="select">x<i id="cd-product-'+proid+'">1</i></span>'; 
var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="/UploadFiles/2021-04-02/'+proimg+'">

以上所述是小编给大家介绍的基于JavaScript实现添加到购物车效果附源码下载，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！