What do you think of this job interview?
Cycle:
Multiplication table 99 - for loop
For loop idea: You usually start by declaring a variable to receive the result of the entire loop and then print it.
<! -- Multiplication table: --> <! -- Implementation ideas:1: Print result: Receives the result of print concatenation with an empty string2: printing9Row: outer loop from1Began to9Stop and print1-9
3: Splicing display formula: the I value of inner loop is smaller than that of outer loop,4: adds a \n newline character to form a descending ladder5Print the result of the splice on the console --> <script>var str = ' ';
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) { // Remember the second sentence, j <= I
str += j + 'x' + i + '=' + j * i + '\t'; // first j then I, then get the result of multiplying the two, +\t tabulation symbol
}
str += '\n'; // Outer loop \n newline character
}
console.log(str);
1x1=1
1x2=2 2x2=4
1x3=3 2x3=6 3x3=9
1x4=4 2x4=8 3x4=12 4x4=16
1x5=5 2x5=10 3x5=15 4x5=20 5x5=25
1x6=6 2x6=12 3x6=18 4x6=24 5x6=30 6x6=36
1x7=7 2x7=14 3x7=21 4x7=28 5x7=35 6x7=42 7x7=49
1x8=8 2x8=16 3x8=24 4x8=32 5x8=40 6x8=48 7x8=56 8x8=64
1x9=9 2x9=18 3x9=27 4x9=36 5x9=45 6x9=54 7x9=63 8x9=72 9x9=81
Copy the codeWhile loop statement exercise
Summary of the while loop idea: The initial value is usually created at the beginning, usually denoted by I, which represents the initial counter. This I value is usually accumulated in the circulatory body to achieve cyclic drive. The statement is evaluated in the while. If the condition is not met, the loop will continue to enter the body. If the condition is met, the loop will exit.
// Print 1-100 using while
/ / ideas:
// 1: create variable to receive cumulative values
// 2: exit if the condition is met
// 3: The initial values are accumulated within the loop to trigger the condition judgment in the while. The body of the loop prints 1-100
var i = 1;
while (i <= 100) {
console.log(i); If I <=100, I will exit, so it will still display 1-101.
i++;
}
// Print the sum between 1 and 100 using while
/ / ideas:
// 1: Creates a print variable with an initial value of 0. Create a loop initializer I with a value of 1 to start the loop
// 2: use the condition between the while loop I <= 100
// 3: inside the loop, add up the printed variable sum and I
// 4: i++ is a loop counter used to start the next loop
// 5: Circulate the sum outside the body and print the result
var sum = 0;
var i = 1; / / 1: start
while (i <= 100) { // Conditional judgment
sum += i;
i++; / / 2: accumulation
}
console.log(sum); / / 5050
// Use while to ask if I am handsome.
/ / way of thinking
// 1: Create an initial variable to receive the return value from the Prompt pop-up
// 2: Check prompt in the loop to see if the value does not match the check, and execute the loop body code again.
// 3: the code inside the loop: use the initial variable again, and receive the return value of the new popup again. Repeat. Make a judgment in the while loop
// 4: Only if the conditions are not met, after the statement is executed, the loop will be skipped directly, and the printout statement outside the loop will be executed.
var msg = prompt('Am I handsome? ');
while(msg ! = ='handsome') {
msg = prompt('Am I handsome? ');
}
alert('You're pretty handsome too! ');
Copy the codeDo while loop practice
Summary: The do statement is responsible for the loop body output, while statement is used to determine the condition. The initial value is usually set to accumulate the driver, or to determine. The essence is to satisfy the judgment condition in the while. If the statement in the do loop is not satisfied, it will exit if it is satisfied.
// Do while: print 1-100
/ / ideas:
// 1: creates a variable, the initial value, to drive the accumulation
// 2: do statement, start variable initial value accumulation
// 3: do while if not, exit
var i = 1;
do {
console.log(i);
i++;
} while (i <= 100);
// Do while to print the sum of 1 to 100
/ / ideas:
// 1: create variables for summation, create variables for driving summation
// 2: the do statement is responsible for accumulation and summation.
// 3: The while statement is still used to determine whether the condition is satisfied
var i = 1;
var sum = 0;
do {
sum += i;
i++;
} while (i <= 100);
console.log(sum); / / 5050
// Use do while to ask, am I handsome?
/ / ideas:
// 1: receive the return value of prompt with MSG
// 2: Execute the body of the loop in the DO statement. The loop again assigns the new prompt result to MSG.
// 3: make a judgment in the while statement to determine whether MSG is consistent with the judgment value. If not, the loop will continue until the value is satisfied
var msg = prompt('Am I handsome? ');
do {
msg = prompt('Say I'm handsome! ');
} while(msg ! = ='handsome');
alert('Thank you for your compliments. You look good too! ');
Copy the codeContinue continue continue
// continue Breaks out of this loop and continues the next loop
If you eat steamed stuffed bun, the 4th one has a cockroach, throw the 4th one away, continue to eat the 5th one
/ / ideas:
// Loop 1-5, in the judgment, if the condition is met, this output judgment statement. Use continue to exit this time and continue the loop the next time.
for (var i = 1; i <= 5; i++) {
if (i == 4) {
continue;
}
console.log('I'm eating number one.' + i + 'A baozi');
}
// I am eating the first baozi
// I am eating the second baozi
// I am eating the third baozi
// I am eating the 5th baozi
Copy the codeBreak interrupts subsequent execution of the code
// break interrupts subsequent execution of the code
// Eat steamed stuffed bun, if the third one has bugs, no mood to eat, will be behind the steamed stuffed bun, all put into the trash can.
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break;
}
console.log('I'm eating number one' + i + 'A baozi');
}
// I am eating the first baozi
// I am eating the second baozi
Copy the codeAn array of
Array related operation exercises
// A: Find the sum of arrays and the average of arrays
/ / way of thinking
// 1: Define an array, create a sum of the sum variable, and the average value, both starting at 0, because the array subscript is also 0
// 2: the length of the array. In the body of the loop, sum each item in the index by sum.
// 3: Use the length of the and/array to get the average value
var arr = [1.2.3.4.5];
var sum = 0;
var average = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
average = sum / arr.length;
console.log(sum + '= = = = =' + average); / / 15 = = = = = 3
// B: Find the largest value in the array
/ / way of thinking
// 1: define an array, assuming that the first item in the array is the largest.
// 2: loop array. In the loop body, check whether each item in the loop array is greater than the first item. compare
// 3: The maximum value is left after comparison. Assign the maximum value to Max and print it for view
var arr = [3.7.9.34.6.22.14.7.25];
var max = arr[0];
for (var i = 0; i < arr.length; i++) {
if(arr[i] > max) { max = arr[i]; }}console.log('The largest value in the array is:' + max); // The largest value in the array is: 34
// C: store 10 values in an empty array
/ / ideas:
// 1: creates an empty array literally
// 2: start the for loop, starting from 0, and assign the result of +1 to arr[I].
var arr = [];
for (var i = 0; i <= 10; i++) {
arr[i] = i + 1; // Each entry in the array is the sum of the values of the variable I. Arr [I] is the same as arr[0].
}
console.log(arr); // Array(11) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,...
// D: filter array, filter out greater than 10 (arr. Length instead of arr[I])
/ / ideas:
// 1: Create an array and a literal empty array variable to store the new array,
// 2: The length of the loop array. The loop body determines whether each item in the array is greater than 10 and stores the value greater than 10 into the empty array variable. Print and view
var arr = [3.6.13.22.4.7.19.34.56.8.66];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] > 10) { newArr[newArr.length] = arr[i]; }}console.log(newArr); // Array(6) [ 13, 22, 19, 34, 56, 66 ]
// remove all 8's from the array
/ / ideas:
// 1: Create an array and an empty array.
// 2: array of loops, the body of the loop determines that each item in the loop cannot be equal to 8. Put an array that is not equal to 8 into an empty array, taking a new array
var arr = [1.5.8.6.99.3.8.14.56.8.23.6];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if(arr[i] ! =8) {
// Put numbers that are not equal to 8 in the new arraynewArr[newArr.length] = arr[i]; }}console.log(newArr); // Array(9) [ 1, 5, 6, 99, 3, 14, 56, 23, 6 ]
//F: reverses the array
/ / way of thinking
// 1: Create an array where each item is a string, and create an empty array
// 2: the length of the loop array is -1, because the array starts at index 0, so all needs -1, reduced to >= 0, I -- decrement
// 3: Because the loop is in reverse order, the result of the loop is to receive the array directly with newArr[newarr.length].
var arr = ['apple'.'banana'.'orange'.'deeppink'];
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
Arr [0] = arr[0] = arr[0]
newArr[newArr.length] = arr[i];
}
console.log(newArr); // Array(4) [ "deeppink", "orange", "banana", "apple" ]
// G: array bubble sort
/ / ideas:
// 1: create an array
// 2: loop through the array, starting at 0, to the end of the array. The outer loop completes the array
// 3: starts the second loop, also starting at 0, each loop value is less than the array length -i-1, then j++
// 4: check if j of the loop array is less than j+1 of the array, i.e., the next array
// 5: Receives each item in the array using the temp variable.
// 6: swap variables, assign the next large value to arR each time [j]
// 7: Finally, arr[j+1] is assigned to the temporary variable
var arr = [3.7.99.43.56.32.7.9];
for (var i = 0; i <= arr.length - 1; i++) {
// Remember <= and length-1
for (var j = 0; j <= arr.length - i - 1; j++) {
// Remember <= length-i-1
if (arr[j] < arr[j + 1]) {
// Remember: each swap arr[j] is less than the next swap.
var temp = arr[j]; // Assign the swapped small value to the temporary variable temp = small
arr[j] = arr[j + 1]; Arr [j] = arr[j] = arr[j]
arr[j + 1] = temp; // Assign small values to arr[j+1] for sorting}}}console.log(arr); // Array(8) [ 99, 56, 43, 32, 9, 7, 7, 3 ]
Copy the codeArray idea summary: array related operations are quite a lot, the key is to remember the array traversal, and assignment. Come back to the code if you forget!
Function is the function
Function related exercises
// function
// A: Calculate the sum between 1 and 100 using A function declaration
/ / ideas:
// 1: the declarative function getSum() encapsulates the code in the for loop,
// 2: outputs the result of the function only when the function is called
function getSum() {
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum);
}
getSum(); / / 5050
// B: use the function to find the sum of any 2 numbers
/ / ideas:
// 1: It is essentially the same as the for loop, except that the function takes two parameters, which are eventually replaced by arguments when the function is called
// 2: implements the loop, starting with parameter 1 and ending with parameter 2. So you can calculate the sum between two numbers.
function getSum(start, end) {
var sum = 0;
for (var i = start; i <= end; i++) {
sum += i;
}
console.log(sum);
}
getSum(1.5); / / 1 + 2 + 3 + 4 + 5 = 15
// C: Find the largest value in the array
/ / way of thinking
// 1: assuming that the first value in the array is the largest, loop array, starting at 1, loop array last item,
// 2: checks if each item in the array is greater than the first, as Max is equal to the found item. That's the maximum.
// 3: When calling the function, pass an array because the parameters are arR literals. Pass the return result of the function to the variable and print it.
function getMax(arr) {
var max = arr[0];
for (var i = 1; i <= arr.length; i++) {
if(arr[i] > max) { max = arr[i]; }}return max; // Note that the result of the function must be returned with return
}
var res = getMax([1.4.7.9.12.3.7.3.6.5]);
console.log(res); // To get the result of the function.
// A: function to find the maximum value of the array
// arguments are like array objects, but not arrays.
/ / ideas:
// 1: The function assigns an array to the argument object,
// 2: Assume that the first value in the array is the maximum. Loop through the array to determine whether each item in the array is greater than the first, assigning the largest item directly to Max
// 3: The function must return a result, by return, otherwise the result of calling the function is undefined.
function getMax() {
arguments = [1.2.3.6.5.2];
var max = arguments[0];
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i]; }}return max;
}
var res = getMax();
console.log(res); / / 6
// B: use the function to flip the array
/ / ideas:
// 1: the function takes arr, and loops through the last item of the array to the first, then decrement
// 2: The array length in the new array is the length of each item traversed in reverse order.
// 3: The result of the function, which must be returned by return.
function reverse(arr) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) { // book this statement: must be equal to the last one, then >=0, and decremented.
newArr[newArr.length] = arr[i];
}
return newArr;
}
var res = reverse([1.3.7.8]);
console.log(res); // 3
// C: function bubble sort
/ / ideas:
// 1: The function takes an array of loops, starting at 0 and ending at the end
// 2: bubble replacement of inner circulation tube, remember also from 0 to the last term, must be -i-1,
// 3: Start swapping arrays with variables. This formula needs to be memorized
function sort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
} // The bubbling process is fun, but it needs to be memorized}}return arr;
}
var res = sort([1.5.9.6.2.4.7.3.5]);
console.log(res); //Array(9) [ 1, 2, 3, 4, 5, 5, 6, 7, 9 ]
// D: Leap year
/ / ideas:
// 1: The function takes a year, assuming the return value is false
// 2: judge %4==0 %% year % 100! = = 0 | | % = = 0 400, say people is to take more than four or 400 is 0, and cannot be divided exactly by 100
// 3: If the condition is met, change the Boolean value to true, indicating that is such a year
// 4: if the condition is not met, the statement will not be entered, and the following code will be executed, directly return false
// The core point is the algorithm that determines the leap year in the statement
function isRun(year) {
var flag = false;
if ((year % 4= =0 && year % 100! = =0) || year % 400= =0) {
flag = true;
}
return flag;
}
console.log(isRun(2000)); // true
console.log(isRun(1999)); // false
// Functions can call each other
// Call fn2 from fn1. Note that fn1 needs to be called globally to trigger fn1. Call fn2 in the function.
function fn1() {
console.log(11);
fn2();
}
fn1();
console.log('= = = = = = = = = = = = = = = = =');
function fn2() {
console.log(22);
}
Copy the codeSummary: The essence of a function is to encapsulate a piece of code. Usually, we operate on parameters, but in fact, when calling a function, parameters are replaced by arguments. You get one code, you get multiple calls and arguments, you get different results.
Arrays and strings
// A: Guess the numbers
/ / ideas:
// 1: encapsulates the getRandom function, taking two parameters, min and Max.
// 2: Returns a rounded down array and calls math. random to generate a random number
// 3: Calls the function, passing in arguments, assigning the function call to the variable
// 4: Use the while loop, assuming true. Use num to receive the result of the popup,
// 5: Use else if to check whether the number entered by the user is consistent with the random number. Big hint big guess. Little hint guess little.
// 6: In the last case, if the user guessed correctly, a prompt will pop up indicating that the user guessed correctly. Use break to interrupt program execution
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1.5);
while (true) {
var num = prompt('Please enter a number');
if (num > random) {
alert('You, you're a great guess.');
} else if (num < random) {
alert('You, too small.');
} else {
alert('Great, you guessed it! ');
break; }}// B: Countdown effect
/ / ideas:
// 1: encapsulates a function that accepts a standard time and date format.
// 2: The total number of milliseconds of the time received, and the number of user milliseconds passed in as the argument, using the user's time - the current time, which is the difference between the two
// 3: algorithm format: day: /60/60/24, hour /60/60%24, minute /60%60, second %60, through three operations, add 0 to the converted number
// 4: Returns the calculated numeric concatenation string to the function, calls the function, and prints the result of the function
function countTime(time) {
var nowDate = +new Date(a);var iptDate = +new Date(time);
var timer = (iptDate - nowDate) / 1000;
var day = parseInt(timer / 60 / 60 / 24);
day = day < 10 ? '0' + day : day;
var hour = parseInt((timer / 60 / 60) % 24);
hour = hour < 10 ? '0' + hour : hour;
var minute = parseInt((timer / 60) % 60);
minute = minute < 10 ? '0' + minute : minute;
var second = parseInt(timer % 60);
second = second < 10 ? '0' + second : second;
return day + 'day' + hour + 'when' + minute + 'points' + second + '秒';
}
var date = countTime('the 2021-5-1 18:00:00'); // Today is 2021-4-18, return result is: 13 days 05.12.31 seconds
console.log(date);
// C: array add/delete method
// Push an item to the end of the array, either a number or a string, automatically generating an index
var arr = [1.2.3];
arr.push(5.'hello');
console.log(arr); // Array(5) [ 1, 2, 3, 5, "hello" ]
// unshift inserts the data item in the header
arr.unshift('red');
console.log(arr); // Array(4) [ "red", 1, 2, 3 ]
// pop deletes the last item of the array
arr.pop();
console.log(arr); // Array [ 1, 2 ]
// Shift removes an item from the header
arr.shift();
console.log(arr); // Array [ 2, 3 ]
// D: filter the array
// Add values greater than 2000 to a new array
/ / ideas:
// Check whether each item in the array is greater than 2000, and push the items greater than 2000 into a new array
var arr = [1000.1300.2000.2200.3000.4000];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] > 2000) { newArr.push(arr[i]); }}console.log(newArr); // Array(3) [ 2200, 3000, 4000 ]
// E: Use the array built-in method to quickly sort and flip arrays
// 1: reverse() reverses the array
// 2: sort() supports ascending or descending order
var arr1 = ['red'.'yellow'.'green'];
console.log(arr1.reverse()); // Array(3) [ "green", "yellow", "red" ]
var arr2 = [1.4.6.9.5.2.3];
arr2.sort(function (a, b) {
// return a - b; // Array(7) [1, 2, 3, 4, 5, 6, 9] ascending
return b - a; // Array(7) [9, 6, 5, 4, 3, 2, 1] descending order
});
console.log(arr2); // Notice that sort is a function that takes two arguments and returns the result of the function to an array.
// F: get the index of the array
// find the corresponding index number based on the contents of the array
// lastIndexOf finds the corresponding index number based on the contents of the items in the array, from the back to the front
var arr = [' red'.'blue'.'yellow'.'pink'];
console.log(arr.indexOf('blue')); / / 1
console.log(arr.lastIndexOf('yellow')); / / 2
// G: array deduplicates
/ / ideas:
Arr takes an array, creates an empty array, iterates through the array, and checks whether each item in the array already exists. -1 indicates no repetition
// Load a new array without repeating it, using the newly learned two apis, indexOf and push
function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
// The core point determines whether the item already exists. If it does, 1 is true, -1 means false does not exist, and is added to the empty arraynewArr.push(arr[i]); }}return newArr;
}
var res = unique([1.2.3.5.7.7.9.6.5.2.7.8.5.3]);
console.log(res); // Array(8) [ 1, 2, 3, 5, 7, 9, 6, 8 ]
// H: array converted to string
// use toString to convert number toString
// Use the join delimiter to achieve the same effect
var arr = [1.2.3];
console.log(arr.toString()); / / 1, 2, 3
console.log(arr.join(The '-')); / / 1-2-3
// I: returns the position based on the string
IndexOf (1) returns the indexOf the string to be queried. Parameter 2 looks up from the index number
var str = 'The sea laughed, dugu beg defeat! ';
/ / the console. The log (STR. IndexOf (' alone ')); // 6, which contains whitespace, which is also an index
console.log(str.indexOf('laugh'.2)); // 4, start from index 2, but the appearance is not obvious
// J: the number of occurrences of a character in a string
/ / ideas:
// 1: Use indexOf to find the specified string in the array, and create a new counter variable to count the number of occurrences
// 2: use the while loop to check if o is! == -1, 1 indicates that the device exists, and -1 indicates that the device does not exist. Sum what already exists
// 3: Because indexOf can only find the first one, we must use indexOf again o, index+1 to continue the search
var str = 'ldsdsamdsmvdfvmodfv';
var index = str.indexOf('d'); // find the position where the first d appears
var num = 0;
while(index ! = = -1) {
// If d is found, let the counter add up,
num++;
index = str.indexOf('d', index + 1); // But index does not accumulate, we need to find the string again, index+1. Reassign to index.
}
console.log(num); / / 5
// K: string operation method
// concat string concatenation
// var STR = 'This is a love song ';
console.log(str.concat('very good')); // This is a beautiful little love song
// substr string interception, parameter 1: index position to interception, parameter 2: number of interception.
console.log(str.substr(3.2)); / / first
// replace Automatically matches the character in the string. If the string appears more than once, only the first character is replaced
// Parameter one: the string to replace, parameter two: what to replace
console.log(str.replace('small'.'big')); // This is a beautiful love song
// split can find the string in the string, no matter how many times, will be replaced by a comma separated item. It returns an array, which is essentially converted.
var str = '@yes@hello@women@test';
var str = 'This is % a % beautiful % melody';
console.log(str.split(The '%')); // Array(4) [" This is ", "a "," beautiful ", "melody"]
console.log(str.split(The '@')); // Array(5) [ "", "yes", "hello", "women", "test" ]
Copy the codeArray: push unshift, pop Shift, reverse; sort: function sort; indexOf: returns an index based on an Array item. ToString converts an array to a string, and JOIN replaces delimiters in the array.
The common methods for String are concat concatenation, substr interception, replace, and split, which are separated by commas and return arrays.
Native JS mode TAB bar switch
<div class="tab_containr">
<ul class="tabs">
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
</ul>
<div class="items">
<div class="item" style="display: block">
<span>This is News 1</span>
</div>
<div class="item">
<span>This is News 2</span>
</div>
<div class="item">
<span>This is News 3</span>
</div>
</div>
</div>
var lis = document.getElementsByTagName('li');
var items = document.getElementsByClassName('item');
for (var i = 0; i < lis.length; i++) {
// loop the binding event
lis[i].setAttribute('index', i);
// Create an index to display the corresponding news content
lis[i].onclick = function () {
var index = this.getAttribute('index');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
};
}
// Loop tabs, create a custom index for each TAB, click TAB, and get the index.
// This loop hides all items and displays the item corresponding to index
Copy the codeMouse over display drop-down menu
<ul class="news"> news1
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
<ul class="news">Press 2<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
<script>
var ul = document.querySelectorAll('ul');
// 1: Bind the ONMousemove event to UL. The drop-down list is displayed after the mouse cursor is moved
for (var i = 0; i < ul.length; i++) {
ul[i].onmousemove = function () {
for (var i = 0; i < this.children.length; i++) {
this.children[i].style.display = 'block'; }};// 2: Hides the drop-down list after the mouse mouse leaves
ul[i].onmouseout = function () {
for (var i = 0; i < this.children.length; i++) {
this.children[i].style.display = 'none'; }}; }</script>
Copy the codeCase of Posting messages
<body>
<textarea name="" id=""></textarea>
<button>release</button>
<ul></ul>
<script>
// Release message event
// When clicking, determine whether to enter the content in the input, the corresponding prompt will pop up. Return prevents the program from executing down
// If there is input content, create li, set the text content of li is the input field.
// Insert li at the position of the first child in ul
var btn = document.querySelector('button');
var ipt = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function () {
if (ipt.value === ' ') {
alert('Please enter content');
} else {
var li = document.createElement('li');
li.innerHTML = ipt.value;
ul.appendChild(li, ul.children[0]);
ipt.value = ' '; }};</script>
</body>
Copy the codeFollow the mouse circle
<style>
.box {
width: 50px;
height: 50px;
border: 1px solid red;
border-radius: 50%;
text-align: center;
line-height: 50px;
position: absolute; // In a word, you must be absolutely floating before you can move
}
</style>
<body>
<div class="box">123</div>
<script>
var box = document.querySelector('.box');
// 1: listen for page scrolling events, not box movement events
// 2: Gets the mouse position on the page
// 3: Assign the mouse position to the box for movement
document.addEventListener('mousemove'.function (e) {
// console.log(123);
var x = e.pageX;
var y = e.pageY;
box.style.left = x - 25 + 'px';
box.style.top = y - 25 + 'px';
});
</script>
</body>
Copy the codeInput box linkage query express
<body>
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="Please enter your tracking number" class="jd" />
</div>
<script>
// 1: input box When the keyboard is up and there is content in the input box, a prompt box will be displayed. The text in the prompt box must be synchronized
var ipt = document.querySelector('input');
var tip = document.querySelector('.con');
ipt.addEventListener('keyup'.function () {
// console.log(123);
if (ipt.value === ' ') {
tip.style.display = ' none';
} else {
tip.innerHTML = ipt.value;
tip.style.display = 'block'; }});// 2: Hide the input box if you lose the focus, display the prompt box if you gain the focus
ipt.addEventListener('focus'.function () {
if(ipt.value ! = =' ') {
tip.style.display = 'block'; }}); ipt.addEventListener('blur'.function () {
tip.style.display = 'none';
});
</script>
</body>
Copy the codeDisappear ads in 3 seconds
<body>
<div class="box">I am a advertising</div>
<script>
var box = document.querySelector('.box');
window.setTimeout(function () {
box.style.display = 'none';
}, 3000);
</script>
</body>
Copy the codeCountdown effect
<body>
<h3>The countdown to the 51 holidays also includes:</h3>
<div class="day"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<script>
// 1: get the element
var day = document.querySelector('.day');
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
// 2: encapsulates the zero-complement function, using the ternary operator to complement zeros
function zero(num) {
return num < 10 ? '0' + num : num;
}
// 3: use setInterval to call the function and refresh the page text once every second
setInterval(countTime, 1000);
// 4: encapsulates the function, calculates the date, fills the calculated result with 0, displays in the box. Achieve countdown effect
function countTime() {
var target = +new Date('the 2021-5-1 18:00:00');
var nowTime = +new Date(a);var time = (target - nowTime) / 1000;
var d = parseInt(time / 60 / 60 / 24);
d = zero(d);
day.innerHTML = d + 'day';
var h = parseInt((time / 60 / 60) % 24);
h = zero(h);
hour.innerHTML = h + 'when';
var m = parseInt((time / 60) % 60);
m = zero(m);
minute.innerHTML = m + 'points';
var s = parseInt(time % 60);
s = zero(s);
second.innerHTML = s + '秒';
}
</script>
</body>
Copy the codeSMS countdown
Mobile number: <input type="number" /> <button>send</button>
<script>
// Set the default countdown to 3 seconds, click the button to disable the button, start the timer, 1 second countdown once,
// If it is 0, restore the button and modify the text. On the contrary, the text of the splicing button allows the countdown to decrease
var btn = document.querySelector('button');
btn.addEventListener('click'.function () {
var time = 3;
var timer = setInterval(function () {
if (time === 0) {
btn.disabled = false;
btn.innerHTML = 'send';
} else {
btn.innerHTML = 'Countdown' + time + '秒'; time--; }},1000);
});
</script>
Copy the codeDrag the modal box
<body>
<div class="login-header">
<a id="link" href="javascript:;">Click, the login box pops up</a>
</div>
<div id="login" class="login">
<div id="title" class="login-title">Member login<span
><a id="closeBtn" href="javascript:void(0);" class="close-login"
></a ></span ></div>
<div class="login-input-content">
<div class="login-input">
<label>User name:</label>
<input
type="text"
placeholder="Please enter user name"
name="info[username]"
id="username"
class="list-input"
/>
</div>
<div class="login-input">
<label>Login Password:</label>
<input
type="password"
placeholder="Please enter your login password."
name="info[password]"
id="password"
class="list-input"
/>
</div>
</div>
<div id="loginBtn" class="login-button">
<a href="javascript:void(0);" id="login-button-submit">Member login</a>
</div>
</div>
<! -- Cover layer -->
<div id="bg" class="login-bg"></div>
<script>
var link = document.querySelector('#link');
var login = document.querySelector('#login');
var mask = document.querySelector('#bg');
var close = document.querySelector('#closeBtn');
var title = document.querySelector('#title');
// 1: Click the popup login box
link.addEventListener('click'.function () {
login.style.display = 'block';
mask.style.display = 'block';
});
// 2: Click to close the popup
close.addEventListener('click'.function () {
login.style.display = 'none';
mask.style.display = 'none';
});
// 3: Listen for the mouseDown event to get the position of the mouse - the position of the box. Listen for the mousemove drag event and point it to the encapsulated Move event
title.addEventListener('mousedown'.function (e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
document.addEventListener('mousemove', move);
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
document.addEventListener('mouseup'.function (e) {
document.removeEventListener('mousemove', move);
});
});
// Change the coordinates of the box, use the page position - box position +px, to move the box
// 4: Listen for the mouseup release event and remove the move function specified by mousemove
</script>
</body>
Copy the codeImitated Taobao fixed sidebar
<body>
<div class="slider-bar">
<span class="goBack">Return to the top</span>
</div>
<div class="header w">The head area</div>
<div class="banner w">Banner area</div>
<div class="main w">Main part</div>
<script>
// 1: get the offsetTop part of the banner
// 2: Get the position of the sidebar from the top, that is, bannerTop- the position where the sidebar is rolled out
// 3: Gets the position of the page main from the top
var bannerTop = document.querySelector('.banner').offsetTop;
var sliderTop =
document.querySelector('.slider-bar').offsetTop - bannerTop;
var mainTop = document.querySelector('.main').offsetTop;
var slider = document.querySelector('.slider-bar');
var goBack = document.querySelector('.goBack');
// 4: listen for scroll events. If the window's pageYoffset page rolls out -bannerTop beyond the banner position, fix the sidebar and set its position
document.addEventListener('scroll'.function () {
if (window.pageYOffset >= bannerTop) {
slider.style.position = 'fixed';
slider.style.top = sliderTop + 'px';
// 5: If it is less than, set the absolute position of the sidebar to 300px manually
} else {
slider.style.position = 'absolute';
slider.style.top = '300px';
}
// 6: If the page scrolls larger than mainTop, the back to top button is displayed, otherwise hidden button
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none'; }});</script>
</body>
Copy the codeAnimation encapsulation and invocation
<body>
<button>Click on the summer rain lotus to go</button>
<div></div>
<span>Xia yuhe</span>
<script>
// 1: encapsulate animation function, parameter 1 element, parameter 2 target position, first clear timer, ensure timer uniqueness
function animate(obj, target) {
clearInterval(obj.timer);
// 2: bind parameter 1 to a timer with an interval of 30 milliseconds. If the element offset has reached the target position, the timer is cleared
obj.timer = setInterval(function () {
if (obj.offsetLeft >= target) {
clearInterval(obj.timer);
} else {
// 3: Offset elements 1 pixel at a time outside of judgment
obj.style.left = obj.offsetLeft + 1 + 'px'; }},30);
}
// 4: Calls the animate function just wrapped, specifying the element and target position
var div = document.querySelector('div');
animate(div, 300);
// 5: Click on the event, call the animation function, make span go to the target position
var span = document.querySelector('span');
var btn = document.querySelector('button');
btn.addEventListener('click'.function () {
animate(span, 300);
});
</script>
</body>
Copy the codeMagnifying glass for imitation jingdong products
<body> <! -- Product Introduction module --><div class="product_intro clearfix">
<! -- Preview area -->
<div class="preview_wrap fl">
<div class="preview_img">
<img src=".. /Desktop/s3.png" alt="" />
<div class="mask"></div>
<div class="big">
<img src=".. /Desktop/big.jpg" alt="" class="bigImg" />
</div>
</div>
</div>
</div>
<script>
// Show and hide masks and backgrounds
// 1: listen for the window load event and wait for the page element to finish loading.
// 2: Listen for preview_img mouseover and nouseout events to show and hide mask and big
var preview_img = document.querySelector('.preview_img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
window.addEventListener('load'.function () {
preview_img.addEventListener('mouseover'.function () {
mask.style.display = 'block';
big.style.display = 'block';
});
preview_img.addEventListener('mouseout'.function () {
mask.style.display = 'none';
big.style.display = 'none';
});
});
// Mask moves
// 3: listen for preview_img mousemove event, get xy value by mouse position - own box position
preview_img.addEventListener('mousemove'.function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// 3.1: Use the width and height of x-mask /2, which is the coordinate of maskX,
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// 3.2: Use the width of the box - the width of the mask, which is the maximum movement distance of maskMax
maskMax = this.offsetWidth - mask.offsetWidth;
// 3.3: If maskX<=0, mask is equal to 0. If maskX>=maskMax, mask is equal to maskMax
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
}
// 3.4: Move the cover layer, maskX+px
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// The background image starts to move
// 4: Start moving background image: Get background image element, use background image - background box to get the maximum moving distance of background image bigMax
var bigImg = document.querySelector('.bigImg');
var bigMax = bigImg.offsetWidth - big.offsetWidth;
// 4.1: Use maskX * bigMax/maskMax to get the xy value of the large image
var bigX = (maskX * bigMax) / maskMax;
var bigY = (maskY * bigMax) / maskMax;
// 4.2: Make the big image move, i.e. -bigx +px, to move the background image
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
});
</script>
</body>
Copy the codeImitation Taobao back to the top
<body>
<div class="slider-bar">
<span class="goBack">Return to the top</span>
</div>
<div class="header w">The head area</div>
<div class="banner w">Banner area</div>
<div class="main w">Main part</div>
<script>
// Get the distance of the element from the top of the page:
// 1: get the banner distance from the page,
var sliderBar = document.querySelector('.slider-bar');
var goBack = document.querySelector('.goBack');
var bannerTop = document.querySelector('.banner').offsetTop;
// 2: Use slidertop-bannerTop to get the distance from the sidebar to the page
var sliderTop =
document.querySelector('.slider-bar').offsetTop - bannerTop;
// 3: get the distance from mainTop to the distance page,
var mainTop = document.querySelector('.main').offsetTop;
// Listen for page scroll events, show and hide back to top button:
// 4: the document listens for the scroll event, determines that the windod. pageYOffset manual exceeds the bannerTop, fixes sliderBar and sets the px position
document.addEventListener('scroll'.function () {
if (window.pageYOffset >= bannerTop) {
sliderBar.style.position = 'fixed';
sliderBar.style.top = sliderTop + 'px';
// 5: Otherwise, set the position to 300px
} else {
sliderBar.style.position = 'absolute';
sliderBar.style.top = 300 + 'px';
}
// 6: If the page is outside mainTop, the back button is displayed, otherwise hidden
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none'; }});// Click the goBack button, and then call animate with window 1 and 0.
goBack.addEventListener('click'.function () {
animate(window.0);
});
// Encapsulate the animation function:
// Parameter 1: element, parameter 2: target position, callback function
function animate(obj, target, callback) {
// Clear the timer to ensure that the page has only one timer
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// Set the timer to obj with the target -window.pageYOffset/10 to get the step,
var step = (target - window.pageYOffset) / 10;
// Use the ternary operator to determine if the step is greater than 0, use math.ceil or floor to round
step = step >= 0 ? Math.ceil(step) : Math.floor(step);
// Check whether the window has reached the target position.
if (window.pageYOffset == target) {
clearInterval(obj.timer);
}
// Call the callback function with the short-circuit operator,window.scroll parameter 1: scroll to 0, parameter 2: scroll step
callback && callback();
window.scroll(0.window.pageYOffset + step);
}, 15);
}
</script>
</body>
Copy the codeThe mobile side drags elements
<body>
<div></div>
<script>
// 1: Create a new variable to record the initial position of the finger and the original position of the box
var startX = 0;
var startY = 0;
var x = 0;
var y = 0;
var div = document.querySelector('div');
// 2: Listen for the touchStart event of the box to get the initial coordinates of the finger and the position of the box
div.addEventListener('touchstart'.function (e) {
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
x = this.offsetLeft;
y = this.offsetTop;
});
// 3: Listen for the box's TouchMove event and assign startX the position of the moving finger - the previous position
div.addEventListener('touchmove'.function (e) {
var moveX = e.targetTouches[0].pageX - startX;
var moveY = e.targetTouches[0].pageY - startY;
// 4: Let the box start to move, is the box position + move position +px, to achieve the move. And prevents default events from firing.
this.style.left = x + moveX + 'px';
this.style.top = y + moveY + 'px';
e.preventDefault();
});
</script>
</body>
Copy the codeHandwritten PC e-commerce wheel cast diagram
<body>
<div class="main">
<div class="focus fl">
<! -- Left button -->
<a href="javascript:;" class="arrow-l"> < </a>
<! -- Right button -->
<a href="javascript:;" class="arrow-r"> > </a>
<! -- Core scroll area -->
<ul>
<li>
<a href="#"><img src=".. /Desktop/focus.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src=".. /Desktop/focus1.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src=".. /Desktop/focus2.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src=".. /Desktop/focus3.jpg" alt="" /></a>
</li>
</ul>
<! -- Small circle -->
<ol class="circle"></ol>
</div>
</div>
<script>
// animate.js
// 1: encapsulates animate, 1: element, 2: target position, 3: callback function
function animate(obj, target, callback) {
// 2: Clear the timer to ensure that the page has only one element,
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 3: Create timer, use target - box coordinate /10 to get step
var step = (target - obj.offsetLeft) / 10;
// 4: ternary operator: if the step is greater than 0, round with ceil and floor
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// 5: Determine whether the element position has reached the target position, clear timer, there is a callback function to execute the callback function,
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
callback && callback();
}
// 6: Change the position of the box, that is, the coordinate of the element + step +px, to move the box
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
// Hand-written PC rotation diagram
// 0: listens for the load event, waits for the page element to complete, then loads the JS.
window.addEventListener('load'.function () {
var focus = document.querySelector('.focus');
var arrowL = document.querySelector('.arrow-l');
var arrowR = document.querySelector('.arrow-r');
var focusWidth = focus.clientWidth;
// Show and hide arrows
// 1: monitor the mouseEnter and mouseleave events of focus, display and hide the left and right buttons, clear and manually call the timer and click() function, realize automatic switching
focus.addEventListener('mouseenter'.function () {
arrowL.style.display = 'block';
arrowR.style.display = 'block';
clearInterval(timer);
});
focus.addEventListener('mouseleave'.function () {
arrowL.style.display = 'none';
arrowR.style.display = 'none';
timer = setInterval(function () {
arrowR.click();
}, 1000);
});
// create li dynamically and implement a click switch
// 3: get ul and OL, use for loop ul to create index li, I. Add the created Li to OL to achieve the creation of dots
// 4: bind each dot to a click event, open the loop in the child length in ol, clear all the child elements in ol [I]. ClassName, make your className equal to current highlight
// 5: Retrieve the index variable, use num to retrieve the index, and circle to retrieve the index, and then switch the image with animate(ul,-index*focusWidth)
var ul = document.querySelector('ul');
var ol = document.querySelector('ol');
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
li.setAttribute('index', i);
ol.appendChild(li);
li.addEventListener('click'.function () {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = ' ';
}
this.className = 'current';
var index = this.getAttribute('index');
num = index;
circle = index;
animate(ul, -index * focusWidth);
});
}
// Highlight the first dot, clone the first image, create num and circle for synchronization, and throttle
// 6: The class name of the first child in OL is highlighted by default, cloneNode(true) is used to clone the first image in UL, and the cloned image is added to the last in UL
// 7: create num to 0, circle to 0, create throttle default to true,
ol.children[0].className = 'current';
var firstImg = ul.children[0].cloneNode(true);
ul.appendChild(firstImg);
var num = 0;
var circle = 0;
var flag = true;
// Right click to switch pictures and dot synchronization
If num== the penultimate element of ul, change ul's box coordinate to 0, num=0 is also the first element.
// 9: Call animate to ul, the width of -num * a picture, and the callback will open the throttle again
// 10: Make circle++, if the dot is the last one, change circle to 0, and call the enclosed circleChange function to clear the highlight of the dot
arrowR.addEventListener('click'.function () {
if (flag) {
flag = false;
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth, function () {
flag = true;
});
circle++;
console.log(circle);
if (circle == ol.children.length) {
circle = 0; } circleChange(); }});// Click left to switch pictures and dot synchronization
If num is 0, change num to the last image, and change ul coordinates. Use -mun* box width +px1 to switch one image.
// 12: Make num-- every time you switch, call animate, make ul switch -num, in the callback function to open the choke valve
// 13: Make circle--, if it is the first dot, manually assign it to the index of the last image, and use the tri operator to determine whether circle is <0, if it is the last image, otherwise it is the original circle.
arrowL.addEventListener('click'.function () {
if (flag) {
flag = false;
if (num == 0) {
num = ul.children.length;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth, function () {
flag = true;
});
circle--;
if (circle < 0) {
circle = ol.children.length - 1;
}
circle = circle < 0 ? ol.children.length - 1: circle; circleChange(); }});// Encapsulate the dot highlighting function, and start the timer to complete the image switch.
// 14: encapsulates the clicleChange function, using a loop to remove all ol1 class names from highlighting, and let the child elements in OL highlight their own class names according to circle
// 15: create a local timer, call a click() event once every 2 seconds.
function circleChange() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = ' ';
}
ol.children[circle].className = 'current';
}
var timer = setInterval(function () {
arrowR.click();
}, 1000);
});
</script>
</body>
Copy the codeNavigation bar somersault clouds
<script>
function animate(obj, target, callback) {
// console.log(callback); Callback = function() {}
// Clear the previous timer and keep the current one running
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// Write the step size to the inside of the timer
// Change the step size to an integer to avoid decimal problems
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// Stop animation is essentially stop timer
clearInterval(obj.timer);
// The callback is written to the end of the timer
callback && callback();
}
// change the incrementing step size to a progressively smaller step size formula :(target value - current position) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
// 1: start loading js file, get all li and current, default initial position is 0
// 2: Loop lis, which binds each Li to a MouseEnter event and calls animate to move the cloud to its offset location
// 3: When the mouse leaves, call animate to return the cloud to its current default initial position
// 4: Click the navigation menu to make current receive the current offset position, which cleverly fixes the departure position.
window.addEventListener('load'.function () {
var lis = document.querySelectorAll('li');
var cloud = document.querySelector('.cloud');
var current = 0;
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener('mouseenter'.function () {
animate(cloud, this.offsetLeft);
});
lis[i].addEventListener('mouseleave'.function () {
animate(cloud, current);
});
lis[i].addEventListener('click'.function () {
current = this.offsetLeft; }); }}); </script> </head><body>
<div id="c_nav" class="c-nav">
<span class="cloud"></span>
<ul>
<li class="current"><a href="#">Front page news</a></li>
<li><a href="#">faculty</a></li>
<li><a href="#">Event planning</a></li>
<li><a href="#">The enterprise culture</a></li>
<li><a href="#">Recruitment information</a></li>
<li><a href="#">Company profile</a></li>
<li><a href="#">I am a page</a></li>
<li><a href="#">What is the page</a></li>
</ul>
</div>
</body>
Copy the codeRemember the username
<body>
<input type="text" id="username" />
<input type="checkbox" name="" id="remember" />Remember the username <script>// 1: after the page is refreshed: If there is a username in the local session, the value in uname is assigned to the value in the local session, and the check box is selected by default
var uname = document.querySelector('#username');
var checkBox = document.querySelector('#remember');
if (localStorage.getItem('username')) {
uname.value = localStorage.getItem('username');
checkBox.checked = true;
}
// 2: the check box listens for the change event, and then the check box sets the value of uname to the local session with the property name of username, and otherwise deletes the username property from the local session
checkBox.addEventListener('change'.function () {
if (this.checked) {
localStorage.setItem('username', uname.value);
} else {
localStorage.removeItem('username'); }}); </script> </body>Copy the codejQuery
Remote reference address: < script type = “text/javascript” SRC = “https://cdn.bootcss.com/jquery/3.2.1/jquery.js” > < / script >
Sina dropdown menu
<script>
// 1: mouseover displays the dropdown menu: $is equivalent to load waiting for page elements to load is consistent,.nav>li mouseover lets its own child element ul display
$(function () {$('.nav>li').mouseover(function () {$(this).children('ul').show();
});
// 2: Mouse away to hide the drop-down menu:. Nav >li Mouse away to hide their child elements
$('.nav>li').mouseout(function () {$(this).children('ul').hide();
});
});
</script>
Copy the codeThe TAB bar to switch
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">The introduction</li>
<li>Specifications and Packing</li>
<li>After-sale protection</li>
<li>Commodity Evaluation (50000)</li>
<li>Mobile community</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block">Product introduction module content</div>
<div class="item">Specifications and packaging module content</div>
<div class="item">After-sales support module content</div>
<div class="item">Product evaluation (50000) module content</div>
<div class="item">Mobile community module content</div>
</div>
</div>
<script>
//1: Wait for the page element to finish loading, add click event in tab_list, make it add current highlight, chain programming sibling element, remove current
$(function () {$('.tab_list li').click(function () {$(this).addClass('current').siblings('li').removeClass('current');
// 2: Get the index of each li and ask tab_con. item to look up the index
var index = $(this).index();
$('.tab_con .item').eq(index).show().siblings().hide();
});
});
</script>
</body>
Copy the codeTaobao boutique apparel case
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">Female boots</a></li>
<li><a href="#">Ugg boots</a></li>
<li><a href="#">Winter skirt</a></li>
<li><a href="#">coat</a></li>
<li><a href="#">sweater</a></li>
<li><a href="#">Cotton-padded jacket</a></li>
<li><a href="#">panty</a></li>
<li><a href="#">Down jacket</a></li>
<li><a href="#">A pair of jeans</a></li>
</ul>
<div id="content">
<div>
<a href="#"
><img src=".. / Desktop/ladies boots. JPG" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src=".. /Desktop/ ugg boots.jpg" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src=".. / Desktop/winter dress. JPG" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src=".. /Desktop/ woolen coat. JPG" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src=".. / Desktop/sweater. JPG" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src=".. / Desktop/cotton-padded jacket. JPG" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src=".. / Desktop/panty. JPG" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src=".. /Desktop/ down jacket. JPG" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src=".. /Desktop/ jeans.jpg" width="200" height="250"
/></a>
</div>
</div>
</div>
<script>
// Wait until the page element is loaded, mouse over li in left to get the matching index, so that the divs in the content are displayed according to the index, and the sibling elements are hidden
$(function () {$('#left li').mouseover(function () {
var index = $(this).index();
$('#content div').eq(index).show().siblings('div').hide();
});
});
</script>
</body>
Copy the codeBeijing Opera palace highlights
<body>
<div class="wrap">
<ul>
<li>
<a href="#"><img src=".. /Desktop/01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src=".. /Desktop/02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src=".. /Desktop/03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src=".. /Desktop/04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src=".. /Desktop/05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src=".. /Desktop/06.jpg" alt="" /></a>
</li>
</ul>
</div>
<script>
// Darken other cells: wait for the page element to finish loading, li in.wrap, and hover to darken its sibling element fadeTo (400, 0.5)
$(function () {$('.wrap li').hover(
function () {$(this).siblings('li').stop().fadeTo(400.0.5);
},
// Mouse away to make box highlight again: chaining programmatically, open another function to make its sibling fadeTo(400, 1) bright
function () {$(this).siblings('li').stop().fadeTo(400.1); }); });</script>
</body>
Copy the codeThe king of Glory Accordion case
<body>
<script
type="text/javascript"
src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"
></script>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src=".. /Desktop/images/m1.jpg" alt="" class="small" />
<img src=".. /Desktop/images/m.png" alt="" class="big" />
</a>
</li>
<li>
<a href="#">
<img src=".. /Desktop/images/l1.jpg" alt="" class="small" />
<img src=".. /Desktop/images/l.png" alt="" class="big" />
</a>
</li>
<li>
<a href="#">
<img src=".. /Desktop/images/c1.jpg" alt="" class="small" />
<img src=".. /Desktop/images/c.png" alt="" class="big" />
</a>
</li>
<li>
<a href="#">
<img src=".. /Desktop/images/w1.jpg" alt="" class="small" />
<img src=".. /Desktop/images/w.png" alt="" class="big" />
</a>
</li>
<li>
<a href="#">
<img src=".. /Desktop/images/z1.jpg" alt="" class="small" />
<img src=".. /Desktop/images/z.png" alt="" class="big" />
</a>
</li>
<li>
<a href="#">
<img src=".. /Desktop/images/h1.jpg" alt="" class="small" />
<img src=".. /Desktop/images/h.png" alt="" class="big" />
</a>
</li>
<li>
<a href="#">
<img src=".. /Desktop/images/t1.jpg" alt="" class="small" />
<img src=".. /Desktop/images/t.png" alt="" class="big" />
</a>
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
// Hover over the box to make the box border, hide the small picture, make your big picture show:
// 1: Wait for the page element to load, and then call the animate function to animate it
// 2: use find to find small, use fadeOut to make siblings, and use fadeIn to make siblings
$(function () {$('.king li').mouseenter(function () {$(this)
.stop()
.animate({
width: 224,
})
.find('.small')
.stop()
.fadeOut()
.siblings('.big')
.stop()
.fadeIn();
// The other sibling elements are narrowed to show small images and fade out large ones
// 3: call the animation function to change the width of the element to 69, find small, and fade out the larger element
$(this)
.siblings('li')
.stop()
.animate({
width: 69,
})
.find('.small')
.stop()
.fadeIn()
.siblings('.big')
.stop()
.fadeOut();
});
});
});
</script>
</body>
Copy the codeNext: Programming Memoirs – Hodgepodge -2 (JS + Ajax Front and back Interactions) next