JavaScript编写⼀个简易购物车功能
⽹上关于购物车实现的代码⾮常多，今天看了⼀些知识点，决定⾃⼰动⼿写写，于是写了⼀个简易购物车，接下来讲解⼀下具体的实现。
1、⽤html实现内容；
2、⽤css修饰外观；
3、⽤js(jq)设计动效。
第⼀步：⾸先是进⾏html页⾯的设计，我⽤⼀个⼤的div将所有商品包含，然后⽤不同的div将不同的商品进⾏封装，商品列表中我⽤了ul li实现，具体实现代码如下（代码中涉及到的商品都是⽹上随便copy的，不具有参考价值）：
<div id="goods">
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="images/1.png"></li>
<li class="godprice">￥25.00</li>
<li class="godinfo">《飞鸟集》中很多诗歌是⽤孟加拉⽂创作的，这部诗集最早由郑振铎先⽣译介到中国。</li>
<li class="godadd"><a href="javascript:;">加⼊购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="images/2.png"></li>
<li class="godprice">￥56.00</li>
<li class="godinfo">本书主要介绍了如何使⽤现有的Web 相关技术构建Android 应⽤程序。</li>
<li class="godadd"><a href="javascript:;">加⼊购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="images/3.png"></li>
<li class="godprice">￥37.00</li>
<li class="godinfo">⽤⽂字打败时间。冯唐最畅销作品，杂⽂才是其销量最好、最受欢迎的作品。</li>
<li class="godadd"><a href="javascript:;">加⼊购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="images/1.png"></li>
<li class="godprice">￥25.00</li>
<li class="godinfo">《飞鸟集》中很多诗歌是⽤孟加拉⽂创作的，这部诗集最早由郑振铎先⽣译介到中国。</li>
<li class="godadd"><a href="javascript:;">加⼊购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="images/2.png"></li>
<li class="godprice">￥56</li>
<li class="godinfo">本书主要介绍了如何使⽤现有的Web 相关技术构建Android 应⽤程序。</li>
<li class="godadd"><a href="javascript:;">加⼊购物车</a></li>
</ul>
</div>
<div class="goodsItem">
<ul class="goditem">
<li class="godpic"><img src="images/3.png"></li>
<li class="godprice">￥37.00</li>
<li class="godinfo">⽤⽂字打败时间。冯唐最畅销作品，杂⽂才是其销量最好、最受欢迎的作品。</li>
<li class="godadd"><a href="javascript:;">加⼊购物车</a></li>
</ul>
</div>
</div>
<div id="godcar">
<div class="dnum">0</div>
<div class="dcar">
<img src="images/car.jpg">
</div>
</div>
其中涉及到⼀个知识点：在 <li class="godadd"><a href="javascript:;">加⼊购物车</a></li>中，我⽤到了javascript:；这个的意思表⽰不进⾏跳转，执⾏⼀个空事件。
第⼆步：进⾏外观设计，为了更好的显⽰，我将包含每个商品列表的div设置了width和height，以及border，值得注意的是，我为了让购物车固定在某个位置，将其position设置为fixed，然后通过设置top和left让其固定在你想要的位置上。另外，要学会灵活使⽤margin和padding，让显⽰更美观。
注：如果想给⾏内元素设置width和height或者其他块级元素的属性，那么需要设置display:block才可以。
具体设计代码如下：
* {
padding: 0px;
margin: 0px;
font-family: "微软雅⿊";
}
.goodsItem{
width:280px;
height: 400px;
float: left;
border: 1px solid #ccc;
margin:5px;
}
#goods{
width:910px;
}
.goditem{
list-style: none;
}
用html设计一个疫情网页代码.godpic img{
display: block;
width:250px;
height: 250px;
margin:0px auto;
}
.godprice,.godinfo,.godadd{
display: block;
width:220px;
margin:0px auto;
text-align: center;
}
.godprice{
font-size: 20px;
color: #f00;
}
.godinfo{
text-align: center;
font-size: 14px;
margin: 10px 0px;
}
.
godadd a{
display: block;
width: 150px;
height: 36px;
background-color: #fd6a01;
border-radius: 10px;
margin: 0px auto;
text-decoration: none;
color:#fff;
line-height: 36px;
}
#godcar{
position: fixed;
right: 0px;
top:40%;
width: 72px;
height: 64px;
}
#godcar .dnum{
width:24px;
height: 24px;
border-radius: 12px;
background-color: #f00;
text-align: center;
line-height: 24px;
position: absolute;
font-size: 12px;
top:0px;
}
.godadd .bg {
background-color: #808080;
}
第⼀个*表⽰为所有元素设置属性，在⼀开始就设置margin和padding是⼀个很好的习惯。
第三步：实现了静态页⾯，接下来需要通过jq进⾏购物车具体的实现，⽐如加⼊购物车，购物车数量变化等。我花了⼀些时间在设计：如何让商品加⼊购物车时，图⽚能够慢慢移动到购物车，然后变⼩，最后消失。其中，我⽤到了animate函数实现这个过程。要实现这个功能的难点在于：图⽚要怎么移动，怎么变化。
接下来讲解如何实现这个过程：
1）⾸先需要获取到商品的图⽚，然后将获取到的图⽚复制⼀份；
var img = $(this).parent().find(".godpic").find("img");
var cimg = img.clone();
2）得到商品图⽚的top和left值，购物车的top和left值，这样才可以通过animate函数实现移动；var imgtop = img.offset().top;
var imgleft = img.offset().left;
var cartop = $("#godcar").offset().top;
var carleft = $("#godcar").offset().left;
3）编写animate函数，实现具体的效果；
cimg.appendTo($("body")).css({
"position": "absolute",//绝对定位
"opacity": "0.7",
"top": imgtop,
"left": imgleft
}).animate({
"top": cartop,
"left": carleft,
"width": "40px",
"height": "40px",
"opacity": "0.3" //透明度
}, 1000, function () {
$(".dnum").text(i); //购物车数量变化
});
简单的移动和变化就实现了。
但是后⾯⼜想，每次刷新购物车的数量重新归0好像不符合事实，于是就想着如何实现刷新页⾯时，不让购物车的数量发⽣变化，查了资料，总结了三种⽅法：
（1）保存到数据库；
（2）通过cookie⽅法；
（3）通过h5的localStorage⽅法；
最后我决定采⽤第三种⽅法，因为想试试h5的新⽅法（出于好奇⼼理~~，也是因为刚好看到这个⽅法，就试试看），localStorage ⽅法存储的数据没有时间限制。第⼆天、第⼆周或下⼀年之后，数据依然可⽤。我的代码具体实现：Item。
好了，所有该讲的都讲完了，附上jq的所有代码，喜欢的就点个赞：
var i = 0;
$(function(){
var inum = 0;
Item("inum")!==null){
inum = Item("inum");
}
$(".dnum").text(inum);
$(".godadd").click(function(){
if (!$(this).find("a").hasClass("bg")) {
i++;
$(this).find("a").addClass("bg");
var img = $(this).parent().find(".godpic").find("img");
var cimg = img.clone();
var imgtop = img.offset().top;
var imgleft = img.offset().left;
var cartop = $("#godcar").offset().top;
var carleft = $("#godcar").offset().left;
cimg.appendTo($("body")).css({
"position": "absolute",
"opacity": "0.7",
"top": imgtop,
"left": imgleft
}).animate({
"top": cartop,
"left": carleft,
"width": "40px",
"height": "40px",
"opacity": "0.3"
}, 1000, function () {
$(".dnum").text(i);
localStorage.setItem("inum", i);
});
}
});
});
效果图：
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论