table of Contents
3. Encrypt mobile phone number
5. Select text to replace content
7. Sorting of objects in the array
8. Click the Sort Smallest to Largest or Random Sort button to switch pictures
9. Add and delete form, select all
1. Carousel
Requirements: 1. The picture is automatically switched every 2s 2. The left and right arrow click event to switch the previous/next picture 3. The small dot corresponds to the current picture with a background style
Ideas: 1. Page layout box>ul>li>img, picture switching, moving ul, using interval timer to achieve seamless carousel, the last picture is the same as the first picture
2. When the mouse is moved into the box, the picture stops rotating and the timer is turned off, and when the mouse is moved out, the timer is turned on
3. Left and right arrow events, the previous picture n--, the next picture n++
4. Set custom attributes for each dot to get the subscript, uniformly set the initial style of the dot, and then set the current dot style
2. Countdown
Requirement: Click the start button to count the time countdown for the value entered by the user
Ideas: 1. Create the current time and create the future time to get the time entered by the user
2. Calculated by milliseconds, countdown = future time-current time; cha = future.getTime()-current.getTime();
3. The number of milliseconds all = parseInt(cha / 1000); the number of seconds s = all% 60; the number of minutes m = parseInt(all / 60% 60);
Hours h = parseInt(all / 60/60% 24); days: d = parseInt(all / 60/60 / 24);
3. Encrypt mobile phone number
Requirement: Some digits of the mobile phone number are *, which is not allowed to be displayed
Idea: Use the string .splice (start subscript, end subscript) to intercept certain digits of the mobile phone number, and then use str.replace() to replace it with *
4. Text scrolling
Requirements: 1. Turn on the timer every 1 second, intercept the first word in before and add it to the second after, and keep the before from the second word to the last
2. When there is no text in the above text, the timer will stop 
Idea: The following text receives the character and intercepts the first character in the above text through substring, and the content of the above text becomes the remaining characters after the interception. If there is no character, the timer stops.
5. Select text to replace content
Requirements: 1. Click the replace button 2. Get the content to be replaced and the content to be replaced 3. Find the replacement content in the text and replace it with the new content
Idea: Store the user input value as a separator in the array (split), then connect the replacement value with join and set the span tag to add a background color to it
6. Array de-duplication
Requirement: delete duplicates in the array
Idea: Method 1 1. Delete duplicate items, compare each item in the array with any subsequent item, remove duplicate items, double-layer for loop
2. Splice (starting subscript, the number of items to be deleted, item 1, item 2, item n)-realize adding, deleting, and replacing
Method two 1. Traverse the array and add unique items to a new array
2. indexOf finds the item you are looking for, returns the index of the element if it finds it, and returns -1 if it is not found
7. Sorting of objects in the array
Requirement: Sort the objects in the array in descending order by date. If the date values are the same, compare the values of DIU and sort them in descending order
The result is
Idea: 1. Use the sort method to pass the object in arr as a parameter to arr.sort(function(x, y) {}; console.log(x, y);//The parameter is every two adjacent items, Object
2. The date value is the time. Use Date.parse (string formatting time) to get the timestamp-milliseconds for comparison. If the date value is the same, compare the DIU value
8. Click the Sort Smallest to Largest or Random Sort button to switch pictures
Requirements: 1. Click to sort from big to small, the page content is sorted from beauty 8 to beauty 1, and the button text becomes from small to big
2. Click to sort from small to large, the page is sorted from beauty 1 --> beauty 8, and the button text becomes from large to small
3. Click Random Sort, the pictures are sorted randomly
Ideas: 1. Store the picture address and corresponding description in an array
2. Sort by size: var tag = 1; //Assuming 1 is displayed in order from small to large, the text displayed by the button is from large to small
3. Random sorting: use random to generate random numbers and remove duplicates
9. Add and delete form, select all
Requirement: add the input value of the user form to the form, click the select all check box to select all, and be able to delete the row selected by the check box
Ideas: 1. Page layout table>tbody>tr>td, create a td node, add node content, create tr, add td to tr
2. After deleting the row, i-- will be set in the subsequent row subscripts in advance to remove duplicate subscript values to ensure that the subscripts of the row are not repeated
3. Select all ① Click the select all button to let all the check boxes below follow the select all state
②When the last input check box is selected, the select all button is selected, if an input is not selected, the select all button is not selected