Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge points about how to achieve a simple shopping cart with HTML. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

The first step is to design the html page. I use a large p to include all the products, and then use different p to encapsulate different products. I use ulli to implement the list of goods. The specific implementation code is as follows (all the products involved in the code are casually copy online and have no reference value):

¥25.00

Many of the poems in the Collection of Flying Birds are written in Bengali, which was first translated and introduced to China by Mr. Zheng Zhenduo.

add to cart

¥56.00

This book mainly introduces how to use existing Web-related technologies to build Android applications.

add to cart

¥37.00

Beat time with words. Feng Tang's best-selling works, essays are his best-selling and most popular works.

add to cart

¥25.00

Many of the poems in the Collection of Flying Birds are written in Bengali, which was first translated and introduced to China by Mr. Zheng Zhenduo.

add to cart

¥56

This book mainly introduces how to use existing Web-related technologies to build Android applications.

add to cart

¥37.00

Beat time with words. Feng Tang's best-selling works, essays are his best-selling and most popular works.

add to cart

0

One point of knowledge is involved: in

add to cart

I used the word _ javascript:; to mean not to jump, but to execute an empty event.

Step 2: carry on the appearance design, in order to better display, I will include each item list p set width and height, as well as border, it is worth noting that in order to keep the shopping cart fixed in a certain position, set its position to fixed, and then set top and left to make it fixed in the position you want. In addition, learn to use margin and padding flexibly to make the display more beautiful.

Note: if you want to set the attributes of width and height or other block-level elements to inline elements, you need to set display:block.

The specific design code is as follows:

* {

Padding:0px

Margin:0px

Font-family: Microsoft Yahei

}

.goodsItem {

Width:280px

Height:400px

Float:left

Border:1pxsolid#ccc

Margin:5px

}

# goods {

Width:910px

}

.goditem {

List-style:none

}

.godpicimg {

Display:block

Width:250px

Height:250px

Margin:0pxauto

}

.godprice, .godinfo, .godadd {

Display:block

Width:220px

Margin:0pxauto

Text-align:center

}

.godprice {

Font-size:20px

Color:#f00

}

.godinfo {

Text-align:center

Font-size:14px

Margin:10px0px

}

.godadda {

Display:block

Width:150px

Height:36px

Background-color:#fd6a01

Border-radius:10px

Margin:0pxauto

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 * means to set properties for all elements, and it's a good habit to set margin and padding in the first place.

Step 3: realize the static page, and then need to implement the shopping cart through jq, such as adding the shopping cart, changing the number of shopping carts and so on. I spent some time designing: how to add an item to a shopping cart, the picture can slowly move to the shopping cart, then get smaller, and finally disappear. Among them, I used the animate function to implement this process. The difficulty to achieve this function is: how to move the picture, how to change.

Next, let's talk about how to implement this process:

1) first, you need to get a picture of the product, and then make a copy of the obtained picture.

Varimg=$ (this) .parent () .find (".godpic") .find ("img")

Varcimg=img.clone ()

2) get the top and left values of the commodity picture and the top and left values of the shopping cart, so that you can move through the animate function.

Varimgtop=img.offset () top

Varimgleft=img.offset () left

Varcartop=$ ("# godcar"). Offset (). Top

Varcarleft=$ ("# 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 times function () {

Cimg.remove (); / / the picture disappears

$(".dnum") .text (I); / / Shopping cart quantity change

})

Simple movements and changes are achieved.

But then I thought, it doesn't seem to be true that the number of shopping carts is returned to zero each time I refresh the page, so I think about how to refresh the page without changing the number of shopping carts. I checked the data and summed up three methods:

(1) Save to database

(2) through cookie method

(3) through the localStorage method of h6

In the end, I decided to use the third method because I wanted to try the new method of H6 (out of curiosity, and because I happened to see this method, try it), the data stored by the localStorage method has no time limit. After the next day, the second week, or the next year, the data is still available. My code is specifically implemented: localStorage.getItem.

All right, all that needs to be said is done, attach all the jq code, and click on what you like:

Vari=0

$(function () {)

Varinum=0

If (localStorage.getItem ("inum")! = = null) {

Inum=localStorage.getItem ("inum")

}

$(".dnum") .text (inum)

$(".godadd") .click (function () {

If (! $(this). Find ("a") .hasClass ("bg")) {

ITunes +

$(this) .find ("a") .addClass ("bg")

Varimg=$ (this) .parent () .find (".godpic") .find ("img")

Varcimg=img.clone ()

Varimgtop=img.offset () top

Varimgleft=img.offset () left

Varcartop=$ ("# godcar"). Offset (). Top

Varcarleft=$ ("# 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 times function () {

Cimg.remove ()

$(".dnum") .text (I)

LocalStorage.setItem ("inum", I)

})

}

})

})

These are all the contents of the article "how to implement a simple Shopping cart in HTML". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.