technology used
- jQuery
- Bootstrap
- localstorage
Specific ideas
Use Bootstrap to select the modal frame, style map, and build the frame.
Put the information of each hero into a li, and then use the flex layout to arrange them. The specific hero li is generated by jQuery and added to the ul as hero display page
Preparation
-
Put the hero picture into a folder, and the picture name is uniformly in the hero name.jpg format
-
Name.png format for background image and hero position image
It is convenient to use the name entered by the user in the input box to match the .jpg/png string to find the corresponding picture
increase
By adding hero information to localstorage, use the push method to add the name of the hero and the corresponding photo to the local, and then get the local content and generate it in li and render it on the page
delete
Get the index corresponding to li directly through the mouse click event, delete this data from the local, and then re-render
check
Find out if there is any data that the user wants locally, and then make other data invisible
change
Obtain the corresponding id through the click event, then change the object data corresponding to the id, and re-render the page after the change
Implementation code
Link: https://pan.baidu.com/s/1-Iq9556TOGguAedvHUqzoQ?pwd=ae69
Extraction code: ae69