table of Contents
1. Nine-nine multiplication table-for double loop
2. Sequence cycle button to switch pictures
4. The overall page color change
8. Ads that can't be turned off
10. The box moves to the right/the box moves to the left/the box moves back and forth
1. Nine-nine multiplication table-for double loop
Idea: Outer for loop--represents rows, inner for loop—represents columns
2. Sequence cycle button to switch pictures
Requirements: 1. Select the order button and click the left and right arrows. When the first picture is reached, it prompts "it is the first one", and when the last picture is the last one, it prompts "it is the last one".
2. Select the cycle button, the left arrow will connect to the last picture when the left arrow reaches the first picture, and the right arrow will connect to the first picture when the right arrow reaches the last picture.
3. The description of the upper and lower parts corresponds to the current picture one by one. (Four pictures in total)
Ideas: 1. var tag = 1; // tag is 1 to switch pictures in order, and tag is 2 to switch pictures in a cycle. Click the cycle button to set the tag value and mark the current state.
2. Right arrow event-there are two states (choose order or cycle-if-else), n=1 set the current picture to be the first, right arrow n++, the picture is incremented, set the relative address of the picture: img.src ='images /'+ n +'.jpg';①If you choose the order, if (n> 4), alert('is the last picture');②If you choose to cycle, if (n> 4) {n = 1 ;}The last picture is connected to the first picture.
3. Left arrow event-analogy to right arrow event.
4. Top and bottom description-set values through .innerHTML: top1.innerHTML = n +'/4'; bottom.innerHTML ='anime' + n;
3. QQ list
Requirements: Click on the title to display the corresponding list information
Idea: Custom attributes, mark the status value of each list as tag=1, initially the list ul is hidden as a whole, and ul is displayed when you click on the list.
4. The overall page color change
Requirement: Click the button to change the entire page to the corresponding color
Idea: 1. Save the color value as an array, use custom attributes-set a custom index, get the subscript value of each button, click the button subscript value to change the color corresponding to the subscript value of the color array
2. When the user clicks the button, the button background changes color. If you don't know which button the user clicked, it will clear all the button styles-again for loop
5. Ascending array sort
Requirement: The numbers in a group of arrays are out of order-arranged in increasing order through the function
Ideas: 1. Compare the number in each position with each item in the back. If the front is smaller than the back, then swap positions
2. Declare third-party variables, and store the value for digital exchange: var temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; //Complete the exchange
6. Button letter changes
Requirements: Click each button, the letter can complete the change of A--B--C--D--A
Ideas: 1. Store the letter value in the array, first complete the letter change of a button, var n = 0; //store the answer of the current button--click the button n++, which corresponds to the subscript of the letter array. When n>arr.length, reset n=0 and return to the first letter.
2. Click on multiple buttons, each button has independent control of the current button n, set custom attributes: store the initial answer of each button in its own attribute. btns[i].current = 0; When the button is clicked this.current++; this.value = arr[this.current];
7. Shopping cart calculation
Requirements: Click on the plus and minus signs to calculate the price of the product
Ideas: 1. Build the page structure, first realize the unit price calculation of a line of li, and obtain the number of counts. The innerText is forced to be converted to a number type
The number of minus sign click events num--, the number of plus sign click events num++, subtotal=unit price*quantity
2. Every li-->Think of the for loop, and the encapsulation function is called in the for
8. Ads that can't be turned off
Requirement: After entering the page, it will pop up after a period of time. After clicking close, it will pop up again after a period of time.
Idea: ---Turn it off--Only pop up once--Can't judge when the user turns it off--So use a delay timer
9. Digital countdown
Idea: Use interval timer, number num-- after a period of time;
10. The box moves to the right/the box moves to the left/the box moves back and forth
Requirement: Click the button, the square moves to the right--use interval timer, wrap function move call---carousel diagram realization principle
Idea: Bind the button click event, add a new attribute of the box to ensure uniqueness, get the current left value of the box, and the new newleft=left+displacement.
11. Lottery
Requirement: Random play of awards, click OK to stop
Idea: Use the Math random function, turn on the timer, change the award every time to play, click OK to stop playing, that is, turn off the timer