homework

1: What did you learn

  • In this project, I learned to use JavaScript to realize the combination of cross-domain, API interface data traversal rendering and CSS style, use localStorage (localstorage.setitem) to store data after the call, and call to delete localStorage (localstorage.removeitem) initiated The server requests and invokes its API to render the data page.

2: What is your progress

  • Understand and use various applications in JavaScript, service requests and cross-domain value transfer between data, local storage retains value transfer and then calls stored data for processing
  • The use of Ajax makes cross-domain requests for data and renders it to a page for processing

3: What’s wrong with you

There is an error in the round cast graph, not familiar with SOME of the JS attributes do not rememberCopy the code

4: Summarize the business in the project that you are in line with the implementation

  • 1; Scroll bar bottom event
Scroll the viewport height of the current element (that is, the real height) let scrollHeight visible region height let clientHeightdocument. Body. ClientHeight; Let scrollTopscrollTop; Return to the top when the scrollbar scrolls to the bottom. The scrollarea is set to a fixed height. Set overflow-y: auto. Get the height scrollTop by getBoundingClientRect() : In the scroll event, it is obtained by e.target. ScrollTop, which represents the actual px height between the scroll bar and the top (scrollHeight) : It is obtained by DOM's scrollHeight, which represents the height of all contents in the area (including the scrolling distance), namely the actual heightCopy the code
  • 3. The lazy loading
The lazy loading image rendering to replace the original images and then set the timer, page scrolling display the original image to a certain place A picture is an < img > tag, the browser if the initiating picture is according to the < img > SRC attribute, so the key is to realize a lazy loading, did not enter the image viewing area, not to give the < img > SRC assignment, The browser will not send the request until the image is in the viewable area before assigning SRC. -4. Magnifying Glass Effect 1 When the mouse is placed, a semi-transparent mask will appear and a large picture will appear on the right. Figure 2 When the mouse moves, the large picture on the right will also partially moveCopy the code

The key principle of the magnifying glass: when the mouse moves on the small picture, the corresponding position of the large picture is located by capturing the position of the mouse on the small picture; The moving direction of the magnifying glass and the moving direction of the large picture: horizontal and vertical are opposite, to ensure synchronization; Page elements: Need elements: small pictures and large pictures, containers for small pictures and large pictures, a magnifying glass; Technical points involved: (1) Capture of mouse events: Onmouseover (enter), onMouseout (remove), onMousemove (move) (2) offsetLeft, offsetTop, offsetWidth, offsetHeight, Event. clientX, Event. clientY offsetLeft left displacement offsetWidth relative to the parent element, OffsetHeight Specifies the width and height of an element. The width and height do not include scroll bars. The X and Y axes of the event.clientX and event.clientY mouse are compared relative to the coordinates of the entire page, not the child elements offsetLeft and style.left: (1) style.left returns a string, such as 30px, offsetLeft returns 30; (2) Style. left is read-write, offsetLeft is read-only, so to change the position of the div, you can only change the style.left; (3) The style.left value must be defined in advance, otherwise the value is null

  • 6. Shopping cart page

-1. Find the shopping cart data,getShopCar(token); -2. Run request. get(“/shopList,{params:{token:token, username:username}}) to obtain the cross-domain REQUEST

5: Summarize the technical highlights of your project and elaborate

The user name and password are verified using regular expressions. 1. Write the INPUT and CSS styles in HTML. 2. Assign the input value to 3. ForEach (function(item,index){item is the input element. Index is the number of timesCopy the code

} 4. Verify the user name: verify its permission on the user name. -1. Var userReg=/^[a-za-z0-9_ \u4e00-\u9fa5]{6,15}$/; Verify the password /\w{6,15}/ display the text with if else the input format is correct. Enter the password. Enter the password in green. Both the user name and password are correct