JavaScript write a simple shopping cart feature _javascript tips

Online about the implementation of the shopping cart code is very much, today read some knowledge points, decided to write their own hands, so wrote a simple shopping cart, then explain the specific implementation.

1, using HTML to achieve content;

2, with CSS cosmetic appearance;

3, using JS (JQ) design dynamic effect.

First step: The first is the design of HTML page, I use a large div will be all the products included, and then use different div will be different products for encapsulation, the list of goods I used the UL Li implementation, the specific implementation code as follows (the code involved in the goods are online casually copy, Does not have reference value):

<div id= "goods" > <div class= "Goodsitem" > <ul class= "Goditem" > <li class= "godpic" ></li> <li class= "Godprice" >￥25.00</li> <li class= "Godinfo" > "Bird Set" in many The poem was written in Bengali, which was first translated into China by Mr. Zheng Zhenduo's. </li> <li class= "Godadd" ><a href= "javascript:;" 
    > Add Shopping Cart </a></li> </ul> </div> <div class= "Goodsitem" > <ul class= "Goditem" >
    <li class= "Godpic" ></li> <li class= "Godprice" >￥56.00</li> <li class= "Godinfo" > This book mainly describes how to build an Android application using existing Web-related technologies. </li> <li class= "Godadd" ><a href= "javascript:;" 
    > Add Shopping Cart </a></li> </ul> </div> <div class= "Goodsitem" > <ul class= "Goditem" >
    <li class= "Godpic" ></li> <li class= "Godprice" >￥37.00</li> <li class= "Godinfo" > Beat time with words. Fengtang mostBest-selling works, essays are the best sales, the most popular works. </li> <li class= "Godadd" ><a href= "javascript:;" 
    > Add Shopping Cart </a></li> </ul> </div> <div class= "Goodsitem" > <ul class= "Goditem" >
    <li class= "Godpic" ></li> <li class= "Godprice" >￥25.00</li> <li class= "Godinfo" > "Bird Collection" Many of the poems are written in Bengali, this book was first translated by Mr. Zheng Zhenduo's to China. </li> <li class= "Godadd" ><a href= "javascript:;" 
    > Add Shopping Cart </a></li> </ul> </div> <div class= "Goodsitem" > <ul class= "Goditem" >
    <li class= "Godpic" ></li> <li class= "Godprice" >￥56</li> <li class= "Godinfo" > This book mainly describes how to build an Android application using existing Web-related technologies. </li> <li class= "Godadd" ><a href= "javascript:;" 
    > Add Shopping Cart </a></li> </ul> </div> <div class= "Goodsitem" > <ul class= "Goditem" > <li class= "Godpic" ></li> <li class= "Godprice" >￥37.00</li> <li class= "Godinfo" > Use words to defeat time. Fengtang's best-selling works, essays are the best selling and most popular works. </li> <li class= "Godadd" ><a href= "javascript:;" > Add Shopping Cart </a></li> </ul> </div> </div> <div id= "Godcar" > <div class= "dnum
 ">0</div> <div class=" Dcar ">  </div> </div>

Which involves a knowledge point: in <li class= "Godadd" ><a href= "javascript:;" > Add to Cart </a></li>, I use javascript:; This means not to jump, to execute an empty event.

Step Two: for the design, for better display, I set the width and height of the div that contains the list of each item, and border, it's worth noting that I set the shopping cart to be fixed in a certain position, so that I position it to fixed, Then set top and left so that it is anchored where you want it. In addition, we should learn to use margin and padding flexibly to make the display more beautiful.

Note: If you want to set the width and height of the inline element and the properties of other block-level elements, you need to set the Display:block.

The specific design code is as follows:

* {padding:0px;
 margin:0px;
font-family: "Microsoft Ya Hei";
 }. goodsitem{width:280px;
 height:400px;
 Float:left;
 border:1px solid #ccc;
margin:5px;
 } #goods {width:910px}. goditem{list-style:none; 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;}

The first * represents setting properties for all elements, and setting margin and padding at the outset is a good habit.

The third step: the implementation of the static page, the next need to go through the JQ shopping cart specific implementation, such as adding a shopping cart, the number of shopping cart changes. I spent some time designing: How to make a product into a shopping cart, the picture can slowly move to the cart, then smaller, and finally disappear. Among them, I used the animate function to implement this process. The difficulty with this feature is how the picture moves and how it changes.

Here's how to implement this process:

1 first need to obtain a picture of the product, and then copy the captured picture;

var img = $ (this). Parent (). Find (". Godpic"). FIND ("img");
 var cimg = Img.clone ();

2 Get the top and left values of the merchandise picture, the top and left values of the shopping cart, so that it can be moved through the animate function; var imgtop = Img.offset (). Top;

var imgleft = Img.offset (). Left;
var cartop = $ ("#godcar"). Offset (). Top;
var carleft = $ ("#godcar"). Offset (). Left; 

3 Write animate function to realize the concrete effect;
Cimg.appendto ($ ("body")). CSS ({

    "Position": "absolute",//Absolute positioning
    "opacity": "0.7",
    "top": Imgtop, "left
    ": Imgleft
   }). Animate ({
    " Top ": Cartop,
    " left ": Carleft,
    " width ":" 40px ",
    " height ":" 40px ",
    " opacity ":" 0.3 "//Transparency
   }, 1000 , function () {
    cimg.remove ();//Picture disappears
    $ (". Dnum"). text (i);//Shopping Cart quantity change
   });

Simple moves and changes are achieved.

But then think again, each refresh the number of shopping cart back to 0 seems to be inconsistent with the facts, so I think how to achieve refreshing the page, do not let the number of shopping cart changes, check the data, summed up three ways:

(1) Save to database;
(2) through the cookie method;
(3) The Localstorage method through H5;

Finally I decided to adopt the third method, because want to try H5 new method (out of curiosity ~ ~, also because just see this method, try), the Localstorage method stored data has no time limit. Data is still available after the next day, the second week, or the following year. My code is specifically implemented: Localstorage.getitem.

All right, all the talk is finished, attached JQ all the code, like a point of praise:

var i = 0;
$ (function () {
 var inum = 0;
 if (Localstorage.getitem ("Inum")!==null) {
  inum = Localstorage.getitem ("Inum");
 }
 $ (". Dnum"). Text (inum);

 $ (". Godadd"). Click (function () {
  if (!$). 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 () {
    cimg.remove ();
    $ (". Dnum"). text (i);
    Localstorage.setitem ("Inum", I);
   });
  }

 }
); 

Effect Chart:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.