js classic case ideas

Disable the button for 3s after sending the SMS (the same is true for the jump after 5s, use location.href)
1. Use the timer, the parameter is 1000, set the time to 3 seconds
2. In the timer, if the time is equal to 0, then Button disabled is equal to false, otherwise, the time is reduced by one

Simulate Jingdong key input
1. Add a keyup monitoring event to the input box. If the input value is not empty, the bar above will be displayed, if it is not empty, the bar will be hidden.
2. If you lose focus, you also need to hide the bars

The angel following the mouse
1. Get the value of pagex and pagey
2. Add the mousemove of the document, and give the value obtained above to the style.lfet and style.top of the picture, and it’s fine

Event delegation,
1. If you want to register one by one in the li in the ul, it will be a waste of space, but using bubbling events,
2. You only need to register the ul and use the e.target.style.backgroundcolor-related statement. You can make li change the style

Post message case and form information delete
1. If added, add a node
2. If there is information, judge whether it is empty, and then assign
3. Use the parent node. appendchild (child node), so that the child can be at the end of the parent node Add the
parent node. insertBefore (the point to be added, the position to be added)

Parent node.removechild (child node to be deleted)

Sina drop-down menu
1. Register events for the small li cycle
2. Add events, mouseover and mouseout, the former display: block, the latter display: none.

Time-sharing greetings are the same as Baidu skinning
1. Get the time to determine when, replace the src attribute of img

Imitate Jingdong hidden password
1. Through the click event and flag combination, change the type attribute of the picture and input

Taobao QR code is closed
1. Set the click monitoring event, click to hide the picture, pass display: none

Cycle wizard Figure
1. Get li, and then move the position of the picture to show it

Another routine of Baidu skinning, switch lights case

  1. className, set the click event, then change the value of className, put different pictures in different classes

Imitation Sina registration page
1. Register to get the focus event
2. The length is wrong, change the picture through className, and change the text
3. The length is right, and change accordingly

Mobile development
. Drag the element on the mobile terminal.
1. Div register the touchstart event, get the offset (the distance between the div box and the parent box), and the page value
2. Register the touchmove event to get the amount of movement
3. In the touchmove event, move Add the amount to the initial offset, and give this value to div.style.left, etc.

The
principle of easing animation : Write a timer in animate, write a step size (the target value minus the offset and divide by 10), and assign the value to obj.style.left, if the target value is equal to 0, it will be destroyed .
Callback function, passing the function as a parameter to another function. If there is a callback function, it will be called, if not, it will not be called.

Taobao returns to the top to
register the scroll event. Note: The value of pageYoffset is equal to the value of scrollTop. When the scrolled head reaches a certain value, the block will not move. If it does not reach that value, the block will follow. When it reaches a certain level, the block display shows the bars back to the top, and the bars are written in the block.

Somersault Cloud Navigation
registers mouseenter and mouseleave events for each li, and takes the position of each small li as the target value (the offset of the small li). If the mouse leaves, it will return to the original position. If the mouse clicks, it will not move. Up, fix the position

Tab switching, using exclusive thinking

Guess you like

Origin blog.csdn.net/qq_44073682/article/details/115263114