面试经常遇到的笔试题：
循环：
九九乘法表 - for 循环
for循环思路：
通常开始就会声明变量，来接收整个循环拿到的那个结果，再将其打印。
<!-- 九九乘法表： -->
<!-- 实现思路：
1：打印结果：用一个空字符串，接收打印拼接后的结果
2：打印9行：外层循环从1开始至9停止，可以打印1-9
3：拼接显示公式：内层内层循环小于外层循环的i值，
4：加上\n换行符，形成递减阶梯式
5：在控制台打印拼接后的结果 -->
<script>
var str = '';
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) { //牢记第二句话，j <= i
str += j + 'x' + i + '=' + j * i + '\t'; // 先j后i，然后拿到两者相乘的结果，+\t制表符号
}
str += '\n'; //外层循环 \n 换行符
}
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
while 循环语句练习
while循环思想总结：
通常初始值是在一开始的时候就创建了，一般用i表示，代表初始计数器。通常在循环体内对该i值累加，来实现循环驱动。在while进行语句的判断，只有条件不满足就会一直进入循环体，满足即退出。
// 使用while 打印1 - 100
// 思路：
// 1：创建变量接收累加的数值
// 2：while (条件判断)满足条件即退出
// 3：循环内让初始值累加，以触发while中的条件判断，循环体中打印1-100
var i = 1;
while (i <= 100) {
console.log(i); // 注意 打印需要写在i++之前，写在后面会将101也打印出来，而i<=100,此时已经退出了，所以还显示了1-101.
i++;
}
// 使用while打印 1-100之间的和
// 思路：
// 1：创建一个打印变量，初始值是0。 创建一个循环初始值i， 值是1，用来循环的起步
// 2：使用while循环 i<= 100之间的条件判断
// 3：循环体内，将打印变量sum与i值累加
// 4：i++，是循环计数器，用来启动下一次循环
// 5：循环体外拿到sum，将结果打印
var sum = 0;
var i = 1; // 1:起步
while (i <= 100) { // 条件判断
sum += i;
i++; //2：累加
}
console.log(sum); //5050
// 使用while询问我帅不帅？
// 思路
// 1:创建初始变量,去接收prompt弹出框的返回值
// 2:在循环中对prompt的进行判断,判断值是否不符合判断,再次执行循环体的代码.
// 3:循环体内的代码:再次用初始变量,再次接收新一轮弹出框的返回值.周而复始.在while循环中进行判断
// 4:只有不满足条件时,执行到判断语句后,就会直接跳过循环,执行循环之外的打印输出语句.
var msg = prompt('我帅不帅？');
while (msg !== '帅') {
msg = prompt('我帅不帅嘛？');
}
alert('其实你也挺帅！');
do while 循环语句练习
do while思路总结：
do语句负责循环体输出，while语句用来条件判断。一般都会设置初始值用来累加驱动，或者判断。本质都是为了满足while中的判断条件，如果不满足一直触发do循环中的语句，满足则退出。
// do while方式：打印1-100
// 思路：
// 1：创建变量，也就是初始值，用来驱动累加
// 2：do语句中，启动变量初始值累加
// 3：while 语句行中，依旧还是判断语句，不满足就一直 do while，满足即退出
var i = 1;
do {
console.log(i);
i++;
} while (i <= 100);
// do while 方式打印 1-100的累加
// 思路：
// 1：创建变量用来求和， 创建变量用来驱动累加
// 2:do 语句中负责累加,和求和.
// 3:while语句中依旧用来判断,是否满足条件
var i = 1;
var sum = 0;
do {
sum += i;
i++;
} while (i <= 100);
console.log(sum); // 5050
// 使用do while 询问，我帅不帅？
// 思路：
// 1：用msg接收prompt的返回值
// 2：在do语句中进行循环体，循环再次将新的prompt结果，赋值到msg上。
// 3：while语句中进行判断，判断msg是否和判断的值一致，不满足一直循环，直至满足为止
var msg = prompt('我帅不帅？');
do {
msg = prompt('说我很帅！');
} while (msg !== '帅');
alert('谢谢你的夸，你也很帅！');
continue 跳出本次，继续下一次
// continue 跳出本次，继续下一次循环
// 假设吃包子，吃到第4个有蟑螂，将第4个扔掉，继续吃完第5个
// 思路：
// 循环1-5， 在判断中，如果满足条件，这输出判断语句。使用continue跳出本次，继续循环下一次。
for (var i = 1; i <= 5; i++) {
if (i == 4) {
continue;
}
console.log('我正在在吃第' + i + '个包子');
}
// 我正在在吃第1个包子
// 我正在在吃第2个包子
// 我正在在吃第3个包子
// 我正在在吃第5个包子
break 打断代码的后续执行
// break 打断代码的后续执行
// 吃包子，如果第3个有虫子，没心情吃了，将后面的包子，都给扔到垃圾桶了。
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break;
}
console.log('我正在吃第' + i + '个包子');
}
// 我正在吃第1个包子
// 我正在吃第2个包子
数组
数组相关操作练习
// A: 求数组的和以及数组平均值
// 思路
// 1： 定义一个数组，创建一个sum变量求和，以及average平均值，起始值都是0， 因为数组的下标也是0
// 2： 循环数组的长度，在循环体中用sum累加数组中索引的每一项，得到了数组每项相加的和。
// 3： 使用和 / 数组的长度， 得到的就是average平均值
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:求数组中最大的值
// 思路
// 1: 定义一个数组, 假设数组中的第一项就是最大的.
// 2: 循环数组,在循环体内,判断循环出的数组中每项,是否大于第一项.进行比对
// 3: 比对后留下的就是最大的,将最大的值,赋值给max,并打印查看
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('数组中最大的值是： ' + max); // 数组中最大的值是： 34
// C: 给空数组中，存放10个值
// 思路：
// 1： 以字面量方式创建一个空数组
// 2：开启for循环，从0开始，循环体内让每一次的i+1， 将+1的结果赋值给arr[i]， 实现数组的赋值操作。
var arr = [];
for (var i = 0; i <= 10; i++) {
arr[i] = i + 1; // 数组中的每一项就是，变量i值的累加， arr[i]相当于arr[0]开始， i+1相当于0+1，所以数组arr[0]就是1.
}
console.log(arr); // Array(11) [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, … ]
// D: 筛选数组,将大于10的筛选出来（使用arr.length代替arr[i]）
// 思路：
// 1：创建一个数组， 和一个字面量方式的空数组变量，用来存储新数组，
// 2：循环数组的长度， 循环体内判断数组中的每项是否大于10， 将大于的存进刚才的空数组变量中。再打印查看
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 ]
// E: 数组去重， 将数组中的8全部都去掉
// 思路：
// 1：创建一个数组和一个空数组。
// 2：循环数组，循环体内判断循环出来的每一项，不能等于8.将不等于8的数组，放进空数组，形参一个新的数组
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) {
// 将不等于8的数字，放进新数组中
newArr[newArr.length] = arr[i];
}
}
console.log(newArr); // Array(9) [ 1, 5, 6, 99, 3, 14, 56, 23, 6 ]
//F: 翻转数组
// 思路
// 1：新建1个数组，数中中的每一项都是字符串， 和新建一个空数组
// 2：循环数组的长度-1， 因为数组是从索引0开始的，所有需要-1，减至>= 0, i--递减
// 3：因为循环语句是倒序的方式，循环之后的结果是可以直接用newArr[newArr.length]来接收该数组的。
var arr = ['apple', 'banana', 'orange', 'deeppink'];
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
// 该语句是重点， 倒序必须先从数组的最后一项，i--方式，遍历至数组的第一项也就是arr[0]
newArr[newArr.length] = arr[i];
}
console.log(newArr); // Array(4) [ "deeppink", "orange", "banana", "apple" ]
// G: 数组冒泡排序
// 思路：
// 1：创建一个数组
// 2: 循环数组，从0开始，循环到数组的最后一项，外层循环是为了将数组循环完毕
// 3：开启二次循环，也是从0开始，每一次循环的值小于数组的长度-i-1, 然后j++
// 4：判断循环数组的j 是否小于数组的j+1，也就是下一个数组
// 5：使用temp变量接收数组中的每一项。
// 6：交换变量，将每一次的下一项大的值，赋值给arr[j]
// 7：最后最后将arr[j+1]赋值给临时变量
var arr = [3, 7, 99, 43, 56, 32, 7, 9];
for (var i = 0; i <= arr.length - 1; i++) {
// 记住是<=,且是length-1
for (var j = 0; j <= arr.length - i - 1; j++) {
//记住是<= length -i -1
if (arr[j] < arr[j + 1]) {
// 记住：每一次交换的值arr[j]都小于，下一个要交换的值。
var temp = arr[j]; // 将交换的小值，赋值给临时变量 temp = 小
arr[j] = arr[j + 1]; // 将下一个大值给arr[j]，就是进行数组交换，交换后的结果就是排序
arr[j + 1] = temp; // 将小值赋值给arr[j+1]实现排序功能
}
}
}
console.log(arr); // Array(8) [ 99, 56, 43, 32, 9, 7, 7, 3 ]
数组思路总结：
数组相关的操作还挺多的，重点是记住数组的遍历方式，和赋值方式。忘记了就回来看代码！
函数 function
函数相关练习
// 函数相关练习 function
// A： 使用函数声明式，计算1-100之间的和
// 思路：
// 1：声明式函数 getSum()， 在函数中其实就是将之前for循环的代码进行了封装，
// 2：只有在调取该函数的时候，才会输出函数的结果
function getSum() {
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum);
}
getSum(); // 5050
// B: 利用函数求任意 2个数的和
// 思路：
// 1: 其实本质还是和for循环一样的, 只是函数接收了2个形参,形参最终在调用该函数的时候被实参替换
// 2: 就实现了循环的时候,从形参1开始, 结束的时候是在形参2结束. 这样就能计算2个数之间的和啦!
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: 求数组中最大的值
// 思路
// 1：假设数组中的第一个值是最大的， 循环数组，从1开始，循环之数组的最后一项，
// 2：判断，如果数组中的每一项都大于第一项， 就像max等于找到的那一项。就是最大值。
// 3：在调用函数的时候，传递一个数组，因为形参是arr字面意思。将函数的返回结果交给变量，并打印。
function getMax(arr) {
var max = arr[0];
for (var i = 1; i <= arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
return max; // 注意函数的返回结果，必须使用return返回出去
}
var res = getMax([1, 4, 7, 9, 12, 3, 7, 3, 6, 5]);
console.log(res); //这样才能拿到函数的返回结果。
// A： 函数版求数组中最大值
// arguments类似数组对象，但是不是数组。
// 思路：
// 1： 函数中将数组赋值给arguments这个对象，
// 2：假设数组中的第一个值是最大值。循环数组，判断数组中的每一项是否大于第一项，将最大的那项直接赋值给max
// 3：函数必须有返回结果，通过return返回， 否则调用函数返回的结果是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：利用函数翻转数组
// 思路：
// 1： 函数的形参是arr，注意循环语句的写法， 从数组的最后一项开始， 遍历至数组的第一项， 然后递减
// 2：新数组中的数组长度就是，倒序遍历到的每一项。
// 3：函数的结果，必须使用return返回。
function reverse(arr) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) { //书籍该语句： 必须是等于最后1条，然后>=0, 且递减。
newArr[newArr.length] = arr[i];
}
return newArr;
}
var res = reverse([1, 3, 7, 8]);
console.log(res); // 8 7 3 1
// C：函数版冒泡排序
// 思路：
// 1：函数的形参接收一个数组， 外层循环管趟数，从0开始到最后一项
// 2：内层循环管冒泡替换， 熟记也是从0开始到最后一项，必须-i-1，
// 3：开始使用变量交换数组。这个公式需要熟记
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;
} //冒泡的过程非常有趣，但是该过程需要熟记于心
}
}
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：判断闰年
// 思路：
// 1：函数的形参接收的是一个年份， 假设返回值是false
// 2：判断%4==0 %% year % 100 !== 0 || %400 ==0,说人话就是取余4或者400都是0， 并且不能被100整除
// 3：如果符合条件，就将布尔值改为true，表示是如年
// 4：如果不满足条件，则不会进去判断语句中，则会执行语句后面的代码，直接返回false
// 核心点就是判断语句中对闰年的算法
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
// 函数是可以相互调用的
// 在fn1中调用fn2，注意fn1，需要自己全局调用才会触发fn1函数。从而在函数中调用fn2.
function fn1() {
console.log(11);
fn2();
}
fn1();
console.log('=================');
function fn2() {
console.log(22);
}
函数声明思路总结：
函数的本质就是对一段代码进行封装，通常我们操作的是形参， 但实际是调用函数的时候，用实参替换了形参。而达到一条代码，多次调用和传参，拿到不同结果。
数组和字符串相关练习
// A: 猜数字游戏
// 思路：
// 1：封装getRandom函数，接收2个形参，min和max。
// 2：返回向下取整的数组，调用Math.random, 生成随机数字
// 3：调用函数，传入实参，将函数的调用赋值给变量
// 4：使用while循环，假设是true。用num接收弹出框的返回结果，
// 5：通过 else if 判断用户输入的数字和随机数是否一致。大了提示猜大了。小了提示猜小了。
// 6：最后一种情况，就是猜对的情况，就弹出提示，用户猜对了。使用break打断程序的执行
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1, 5);
while (true) {
var num = prompt('请输入一个数字');
if (num > random) {
alert('您， 猜大了');
} else if (num < random) {
alert('您，猜小了');
} else {
alert('太棒了， 您猜对了！');
break;
}
}
// B: 倒计时效果
// 思路：
// 1：封装函数，接收一个标准的时间日期格式。
// 2：获取到时间的总毫秒，和传入实参的用户毫秒数， 用用户的时间-现在的时间，就是2者相差的时间
// 3：算法格式： 天： /60/60/24, 时/60/60%24, 分/60%60, 秒%60,通过三目运算，给转换的数字补0
// 4：将计算出的数字拼接字符串返回给该函数，调用该函数，并打印函数的结果
function countTime(time) {
var nowDate = +new Date();
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 + '天' + hour + '时' + minute + '分' + second + '秒';
}
var date = countTime('2021-5-1 18:00:00'); // 今天是2021-4-18号，返回的结果是：13天05时12分31秒
console.log(date);
// C: 数组的添加删除方法
// push往数组中的末尾追加项,可以是数字或者字符串，自动生成索引
var arr = [1, 2, 3];
arr.push(5, 'hello');
console.log(arr); // Array(5) [ 1, 2, 3, 5, "hello" ]
// unshift 在头部插入数据项
arr.unshift('red');
console.log(arr); // Array(4) [ "red", 1, 2, 3 ]
// pop 删除数组的最后一项
arr.pop();
console.log(arr); // Array [ 1, 2 ]
// shift 从头部删除一项
arr.shift();
console.log(arr); // Array [ 2, 3 ]
// D: 筛选数组
// 将大于2000的数值，放入到一个新的数组
// 思路：
// 循环中，判断数组中的每一项是否大于2000， 将大于2000的使用push存进一个新的数组
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: 使用数组内置方法， 快速进行排序和翻转数组
// 1: reverse() 翻转数组
// 2: sort() 排序,支持升序降序
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 ]升序
return b - a; // Array(7) [ 9, 6, 5, 4, 3, 2, 1 ] 降序
});
console.log(arr2); // 注意sort是一个函数， 接收2个参数， 可以将函数的结果返回给数组。
// F: 获取数组的索引
// indexOf 根据数组中项的内容，找出对应的索引号， 从前往后找
// lastIndexOf 根据数组中项的内容，找出对应的索引号， 从后往前找
var arr = [' red', 'blue', 'yellow', 'pink'];
console.log(arr.indexOf('blue')); // 1
console.log(arr.lastIndexOf('yellow')); // 2
// G: 数组去重
// 思路：
// 封装函数，形参arr接收一个数组，新建一个空数组，遍历数组， 判断数组中的每一项是否已经存在，-1表示不重复
// 将不重复的装进一个新的数组,使用到了刚才新学的2个API，indexOf和push
function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
// 核心点判断是否已经存在该项了，存在就是1也就是true， -1表示false不存在，就添加到空数组中
newArr.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： 数组转换为字符串
// 思路：利用数组的toString方法将number转换为string
// 利用join分隔符号也可以起到同样的效果
var arr = [1, 2, 3];
console.log(arr.toString()); //1,2,3
console.log(arr.join('-')); // 1-2-3
// I: 根据字符串返回位置
// 思路：indexOf，参数1是要查的字符串，返回该字符串的索引号。 参数2是从第几个索引开始往后查找
var str = '沧海一声笑，独孤求败！';
// console.log(str.indexOf('独')); // 6 ， 包含了空格，空格也是一个索引项
console.log(str.indexOf('笑', 2)); // 4， 从索引2开始往后查找， 但是表象是看不出来的
// J： 字符串中的某个字符出现的次数
// 思路：
// 1：使用indexOf查找数组中指定的字符串，新建一个计数器变量，用来统计出现的次数
// 2：使用while循环，判断o是否！== -1，1表示存在， -1表示不存在。 将已经存在的用sum累加
// 3：因为indexOf只能查找到第一个， 必须让使用indexOf再次让o，index+1才能继续查找
var str = 'ldsdsamdsmvdfvmodfv';
var index = str.indexOf('d'); //找出第一个d出现的位置
var num = 0;
while (index !== -1) {
// 假设有找到d，就让计数器累加，
num++;
index = str.indexOf('d', index + 1); //但是index不会累加，需要再次查找该字符串，让index+1.重新赋值给index。
}
console.log(num); // 5
// K：字符串操作方法
// concat 字符串拼接
// var str = '这是一首优美的小小情歌';
console.log(str.concat('very good')); // 这是一首优美的小情歌very good
// substr 字符串截取，参数一：截取的索引位置， 参数二截取的个数。
console.log(str.substr(3, 2)); // 首优
// replace替换 能自动匹配字符串中的该字符，如果该字符串出现多次，只会替换第一个
// 参数一： 要替换的字符串， 参数二：替换成什么内容
console.log(str.replace('小', '大')); // 这是一首优美的大小情歌
// split 能查找到字符串中该字符串，无论出现多次，都会统一被替换成,逗号分隔的每一项。返回的是一个数组，相当于被转换了。
var str = '@yes@hello@women@test';
var str = '这是%一首%优美%的旋律';
console.log(str.split('%')); // Array(4) [ "这是", "一首", "优美", "的旋律" ]
console.log(str.split('@')); // Array(5) [ "", "yes", "hello", "women", "test" ]
总结：数组和字符串内置了很多方法，让我们快速进行操作，数组
Array常用有， 增删：push unshift pop shift，reverse翻转，sort支持函数式排序，indexOf根据数组的项，返回索引。toString将数组转换为字符串，join将数组中的分隔符号替换。
字符串
String常用方法有：concat拼接，substr截取，replace替换，split用逗号分隔，返回的是数组。
原生js方式tab栏切换
<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>我是新闻1</span>
</div>
<div class="item">
<span>我是新闻2</span>
</div>
<div class="item">
<span>我是新闻3</span>
</div>
</div>
</div>
var lis = document.getElementsByTagName('li');
var items = document.getElementsByClassName('item');
for (var i = 0; i < lis.length; i++) {
// 循环绑定事件
lis[i].setAttribute('index', i);
// 创建索引，根据索引显示对应的新闻 内容
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';
};
}
// 思路总结：循环tabs，给每一个tab创建index自定义属性，点击tab时，获取到index，
// 循环将所有的item隐藏，让对应index的那个item显示出来
鼠标经过显示下拉菜单
<ul class="news">
新闻1
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
<ul class="news">
新闻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：给ul绑定onmousemove事件，鼠标经过显示下拉列表
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:鼠标离开,隐藏下拉列表
ul[i].onmouseout = function () {
for (var i = 0; i < this.children.length; i++) {
this.children[i].style.display = 'none';
}
};
}
</script>
发布留言案例
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul></ul>
<script>
// 发布留言事件
// 点击时，判断输入中是否输入内容，弹出对应提示。return 阻止程序的向下执行
// 反之有输入内容，创建li，设置li的文本内容就是输入框输入的内容，
// 将li插入到ul中的第一个子元素的位置
var btn = document.querySelector('button');
var ipt = document.querySelector('textarea');
var ul = document.querySelector('ul');
btn.onclick = function () {
if (ipt.value === '') {
alert('请输入内容');
} else {
var li = document.createElement('li');
li.innerHTML = ipt.value;
ul.appendChild(li, ul.children[0]);
ipt.value = '';
}
};
</script>
</body>
跟随鼠标的圆圈
<style>
.box {
width: 50px;
height: 50px;
border: 1px solid red;
border-radius: 50%;
text-align: center;
line-height: 50px;
position: absolute; // 非加不可的一句话，必须先绝对漂浮，才能移动
}
</style>
<body>
<div class="box">123</div>
<script>
var box = document.querySelector('.box');
// 1：监听页面的滚动事件，而不是box的移动事件
// 2：获取鼠标在页面的位置
// 3：将鼠标的位置赋值给盒子实现移动
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>
输入框联动查询快递
<body>
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入您的快递单号" class="jd" />
</div>
<script>
// 1: 输入框键盘弹起时,并且输入框中有内容，就显示提示框，提示框中的文字必须同步
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：如果失去焦点就隐藏输入框，反之获取焦点就显示提示框
ipt.addEventListener('focus', function () {
if (ipt.value !== '') {
tip.style.display = 'block';
}
});
ipt.addEventListener('blur', function () {
tip.style.display = 'none';
});
</script>
</body>
3秒消失广告
<body>
<div class="box">我是广告</div>
<script>
var box = document.querySelector('.box');
window.setTimeout(function () {
box.style.display = 'none';
}, 3000);
</script>
</body>
倒计时效果
<body>
<h3>距离51假期倒计时还有：</h3>
<div class="day"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<script>
// 1：获取元素
var day = document.querySelector('.day');
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
// 2：封装补0函数，使用三目运算符进行补零
function zero(num) {
return num < 10 ? '0' + num : num;
}
// 3：使用setInterval调用函数，1秒刷新一次页面文字
setInterval(countTime, 1000);
// 4：封装函数，计算日期， 将计算的结果有补0后，显示在盒子中。实现倒计时效果
function countTime() {
var target = +new Date('2021-5-1 18:00:00');
var nowTime = +new Date();
var time = (target - nowTime) / 1000;
var d = parseInt(time / 60 / 60 / 24);
d = zero(d);
day.innerHTML = d + '天';
var h = parseInt((time / 60 / 60) % 24);
h = zero(h);
hour.innerHTML = h + '时';
var m = parseInt((time / 60) % 60);
m = zero(m);
minute.innerHTML = m + '分';
var s = parseInt(time % 60);
s = zero(s);
second.innerHTML = s + '秒';
}
</script>
</body>
短信倒计时
手机号码： <input type="number" /> <button>发送</button>
<script>
// 设置默认倒计时是3秒，点击按钮就禁用按钮，开启定时器，1秒倒计时一次，
// 判断如为0就恢复按钮，并修改文字。反之拼接按钮的文字让倒计时自减
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
var time = 3;
var timer = setInterval(function () {
if (time === 0) {
btn.disabled = false;
btn.innerHTML = '发送';
} else {
btn.innerHTML = '倒计时' + time + '秒';
time--;
}
}, 1000);
});
</script>
拖动模态框
<body>
<div class="login-header">
<a id="link" href="javascript:;">点击，弹出登录框</a>
</div>
<div id="login" class="login">
<div id="title" class="login-title">
登录会员
<span
><a id="closeBtn" href="javascript:void(0);" class="close-login"
>关闭</a
></span
>
</div>
<div class="login-input-content">
<div class="login-input">
<label>用户名：</label>
<input
type="text"
placeholder="请输入用户名"
name="info[username]"
id="username"
class="list-input"
/>
</div>
<div class="login-input">
<label>登录密码：</label>
<input
type="password"
placeholder="请输入登录密码"
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">登录会员</a>
</div>
</div>
<!-- 遮盖层 -->
<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：点击弹出登录框
link.addEventListener('click', function () {
login.style.display = 'block';
mask.style.display = 'block';
});
// 2: 点击关闭弹出框
close.addEventListener('click', function () {
login.style.display = 'none';
mask.style.display = 'none';
});
// 3: 监听mousedown事件,获取鼠标的位置-盒子的位置.监听页面mousemove拖动事件,将它指向封装好的move事件
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);
});
});
// 修改盒子的坐标,用页面的位置-盒子的位置+px,实现盒子移动
// 4: 监听文档mouseup松开事件,直接remove该mousemove指定的move函数即可
</script>
</body>
仿淘宝固定侧边栏
<body>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体部分</div>
<script>
// 1：获取到banner被卷去的offsetTop部分，
// 2：再获取侧边栏距离顶部的位置，就是bannerTop-侧边栏的卷去的位置
// 3：获取页面main距离顶部的位置
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：监听scroll滚动事件，如果window的pageYoffset页面卷去的-bannerTop，超出了banner的位置，就固定侧边栏，并设置好侧边栏的位置
document.addEventListener('scroll', function () {
if (window.pageYOffset >= bannerTop) {
slider.style.position = 'fixed';
slider.style.top = sliderTop + 'px';
// 5：反之就是小于的情况，就设置侧边栏绝对定位，手动设置300px
} else {
slider.style.position = 'absolute';
slider.style.top = '300px';
}
// 6：如果页面滚动大于mainTop就显示返回顶部的按钮，反之就隐藏按钮
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
});
</script>
</body>
动画封装和调用
<body>
<button>点击夏雨荷才走</button>
<div></div>
<span>夏雨荷</span>
<script>
// 1:封装动画函数，参数1元素，参数2目标位置，先清除定时器，保证定时器唯一性
function animate(obj, target) {
clearInterval(obj.timer);
// 2：给参数1绑定timer，指向一个定时器，间隔时间30毫秒，如果元素偏移的位置已经到达目标位置，清除定时器
obj.timer = setInterval(function () {
if (obj.offsetLeft >= target) {
clearInterval(obj.timer);
} else {
// 3：判断之外让元素每次偏移1像素
obj.style.left = obj.offsetLeft + 1 + 'px';
}
}, 30);
}
// 4：调用刚才封装的animate函数，指定元素和目标位置
var div = document.querySelector('div');
animate(div, 300);
// 5：点击事件，调用动画函数，让span走到目标位置
var span = document.querySelector('span');
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
animate(span, 300);
});
</script>
</body>
仿京东商品放大镜
<body>
<!-- 产品介绍模块 -->
<div class="product_intro clearfix">
<!-- 预览区域 -->
<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>
// 显示与隐藏mask和背景图
// 1：监听window的load事件，等待页面元素加载完毕，
// 2：监听preview_img的mouseover和nouseout事件，显示与隐藏mask和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移动起来
// 3：监听preview_img的mousemove事件，通过鼠标位置-自己盒子的位置，获取到xy值
preview_img.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// 3.1：用获取到x-mask的宽高/2，就是maskX的坐标，
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// 3.2：用盒子的宽度-mask的宽度，就是maskMax最大移动距离
maskMax = this.offsetWidth - mask.offsetWidth;
// 3.3：判断maskX<=0，mask就等于0，第二种判断maskX>=maskMax，就让mask等于maskMax, y轴同理
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
}
// 3.4：让遮盖层移动起来，就是maskX+px，
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 背景图片开始移动
// 4：开始移动背景图片：获取背景图片元素，用背景图片-背景盒子获取到背景图片最大移动距离bigMax
var bigImg = document.querySelector('.bigImg');
var bigMax = bigImg.offsetWidth - big.offsetWidth;
// 4.1：用maskX * bigMax / maskMax,就获取到了大图片的xy值
var bigX = (maskX * bigMax) / maskMax;
var bigY = (maskY * bigMax) / maskMax;
// 4.2: 让大图片移动起来,就是-bigX +px, 实现背景图的移动
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
});
</script>
</body>
仿淘宝返回顶部
<body>
<div class="slider-bar">
<span class="goBack">返回顶部</span>
</div>
<div class="header w">头部区域</div>
<div class="banner w">banner区域</div>
<div class="main w">主体部分</div>
<script>
// 获取元素距离页面顶部的距离：
// 1：获取banner距离页面的距离，
var sliderBar = document.querySelector('.slider-bar');
var goBack = document.querySelector('.goBack');
var bannerTop = document.querySelector('.banner').offsetTop;
// 2：用sliderTop-bannerTop获取到侧边栏距离页面的距离
var sliderTop =
document.querySelector('.slider-bar').offsetTop - bannerTop;
// 3：获取到mainTop到距离页面的距离，
var mainTop = document.querySelector('.main').offsetTop;
// 监听页面滚动事件，显示与隐藏返回顶部按钮：
// 4：文档监听滚动事件，判断window.pageYOffset人工超出了bannerTop，就将sliderBar固定定位，并设置px位置
document.addEventListener('scroll', function () {
if (window.pageYOffset >= bannerTop) {
sliderBar.style.position = 'fixed';
sliderBar.style.top = sliderTop + 'px';
// 5：反之绝对定位，设置位置300px
} else {
sliderBar.style.position = 'absolute';
sliderBar.style.top = 300 + 'px';
}
// 6：如果页面超出mainTop，就显示返回按钮，反之就隐藏
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
});
// 点击goBack返回按钮，调用animate函数，参数1是window，参数2是位置为0.
goBack.addEventListener('click', function () {
animate(window, 0);
});
// 封装动画函数：
// 参数1：元素，参数2：目标位置，callback回调函数
function animate(obj, target, callback) {
// 先清除定时器，保证页面只有一个定时器
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 给obj设置定时器，用目标-window.pageYOffset/10得到step步进，
var step = (target - window.pageYOffset) / 10;
// 使用三目运算符，判断步进是否大于0，使用Math.ceil或者floor进行取整
step = step >= 0 ? Math.ceil(step) : Math.floor(step);
// 判断window是否已经到达target位置,先清除定时器,
if (window.pageYOffset == target) {
clearInterval(obj.timer);
}
// 使用短路运算符调用callback函数,window.scroll参数1：滚动到0，参数2：滚动的步进
callback && callback();
window.scroll(0, window.pageYOffset + step);
}, 15);
}
</script>
</body>
移动端拖动元素
<body>
<div></div>
<script>
// 1：新建变量，记录手指初始的位置，和盒子原来的位置
var startX = 0;
var startY = 0;
var x = 0;
var y = 0;
var div = document.querySelector('div');
// 2：监听盒子的touchstart事件，获取手指的初始坐标，以及盒子的位置
div.addEventListener('touchstart', function (e) {
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
x = this.offsetLeft;
y = this.offsetTop;
});
// 3：监听盒子的touchmove事件，用移动的手指的位置-之前的位置，赋值给startX
div.addEventListener('touchmove', function (e) {
var moveX = e.targetTouches[0].pageX - startX;
var moveY = e.targetTouches[0].pageY - startY;
// 4: 让盒子开始移动，就是盒子的位置+移动的位置+px，实现移动。并阻止默认事件的触发。
this.style.left = x + moveX + 'px';
this.style.top = y + moveY + 'px';
e.preventDefault();
});
</script>
</body>
手写PC电商轮播图
<body>
<div class="main">
<div class="focus fl">
<!-- 左侧按钮 -->
<a href="javascript:;" class="arrow-l"> < </a>
<!-- 右侧按钮 -->
<a href="javascript:;" class="arrow-r"> > </a>
<!-- 核心的滚动区域 -->
<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>
<!-- 小圆圈 -->
<ol class="circle"></ol>
</div>
</div>
<script>
// animate.js
// 1:封装animate函数，参数1：元素， 参数2：目标位置，参数3：回调函数
function animate(obj, target, callback) {
// 2：清除定时器，保证页面只有一个元素，
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 3：创建定时器，用目标-盒子的坐标/10得到步进
var step = (target - obj.offsetLeft) / 10;
// 4：三目运算符：如果步进大于0，用ceil和floor进行取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// 5：判断元素的位置是否已经到达了目标位置，清除定时器，有回调函数执行回调函数，
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
callback && callback();
}
// 6：让盒子的位置发生改变，就是元素的坐标+步进+px，实现盒子移动
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
// 手写PC轮播图
// 0：监听load事件，等待页面元素加载完成，再加载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;
// 显示与隐藏箭头
// 1：监听focus的mouseenter和mouseleave事件，显示与隐藏左右按钮，清除和手动调用定时器以及click()函数，实现自动切换
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);
});
// 动态创建li，并实现点击切换
// 3：获取ul和ol，使用for循环ul的子元素长度，动态创建li并给li设置自定义索引index,i. 将创建的li添加到ol中，实现圆点的创建
// 4：给每个圆点绑定单击事件，开启循环ol中的子长度，将ol中的子元素[i].className全部清除，让自己的类名等于current高亮
// 5：获取到index变量，使用num接收index，以及circle接收index，达到同步效果，调用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);
});
}
// 高亮第一个圆点，克隆第一张图片，创建num和circle用来同步，以及节流阀
// 6：将ol中的第一个子元素的类名默认高亮，使用cloneNode(true)克隆ul中的第一张图片，将克隆的图片添加到ul中的最后
// 7：创建num为0，circle为0，创建节流阀默认为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;
// 右点击切换图片，以及圆点的同步
// 8：右箭头点击事件，如果开启节流阀，首先关闭节流阀，如果num==ul子元素的倒数第二张，修改ul的盒子坐标为0，num=0也是第一个。
// 9：调用animate函数让ul，以-num的*一张图片的宽度，回调函数中将节流阀再次开启
// 10：让circle++，如果圆点是最后一张，将circle修改为0，调用封装好的circleChange函数清除圆点的高亮
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();
}
});
// 左点击切换图片，以及圆点的同步
// 11：左点击事件，如果开启了节流阀，先关闭节流阀，如果num是0，将num修改为最后一张图片，并修改ul的坐标，使用-mun*盒子宽度+px1的方式切换一张图片。
// 12：每次切换让num--，调用animate函数，让ul以-num方式切换，在回调函数中开启节流阀
// 13：让circle--，如果是第一个圆点，手动赋值为最后一张图片的索引，并使用三目运算符对circle判断是不是<0，如果是就修改为最后一张，反之就是circle原本自己，调用circleChange函数清除元素的高亮。
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();
}
});
// 封装圆点高亮函数，以及开启定时器完成切换图片。
// 14：封装clicleChange函数，使用循环清除所有ol1的类名免除高亮，让ol中的子元素按照circle将自己的类名高亮
// 15：创建局部定时器，2秒调用一次click()右点击事件，轮播图完毕。
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>
导航栏筋斗云
<script>
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// 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) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
// 1：监听页面元素加载完毕开始载入js文件，获取到所有li，和current默认初始位置为0
// 2：循环lis，循环中让每一个li绑定mouseenter事件，调用animate让cloud云，移动到自己偏移的位置
// 3：鼠标离开时，调用animate让云回到current默认初始位置
// 4：点击导航菜单，让current接收当前的偏移位置，这样巧妙的将离开时的位置给固定住了。
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="#">首页新闻</a></li>
<li><a href="#">师资力量</a></li>
<li><a href="#">活动策划</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">招聘信息</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">我是佩奇</a></li>
<li><a href="#">啥是佩奇</a></li>
</ul>
</div>
</body>
记住用户名
<body>
<input type="text" id="username" />
<input type="checkbox" name="" id="remember" /> 记住用户名
<script>
// 1:页面刷新后：如果本地会话中有username，就将uname中的值，赋值为本地会话中的值，并将复选框默认勾选
var uname = document.querySelector('#username');
var checkBox = document.querySelector('#remember');
if (localStorage.getItem('username')) {
uname.value = localStorage.getItem('username');
checkBox.checked = true;
}
// 2：复选框监听change事件，然后是勾选的就将uname的值设置到本地会话中，属性名为username，反之从本地会话中删除username属性
checkBox.addEventListener('change', function () {
if (this.checked) {
localStorage.setItem('username', uname.value);
} else {
localStorage.removeItem('username');
}
});
</script>
</body>
jQuery
远程引用地址:
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js" ></script>
新浪下拉菜单
<script>
// 1：鼠标经过显示下拉菜单：$就相当于load等待页面元素加载是一致的，.nav>li鼠标经过，让它自己的子元素ul显示
$(function () {
$('.nav>li').mouseover(function () {
$(this).children('ul').show();
});
// 2：鼠标离开隐藏下拉菜单：.nav>li鼠标离开让自己的子元素隐藏
$('.nav>li').mouseout(function () {
$(this).children('ul').hide();
});
});
</script>
tab栏切换
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block">商品介绍模块内容</div>
<div class="item">规格与包装模块内容</div>
<div class="item">售后保障模块内容</div>
<div class="item">商品评价（50000）模块内容</div>
<div class="item">手机社区模块内容</div>
</div>
</div>
<script>
//1：等待页面元素加载完毕，让tab_list中的里、添加点击事件，让它自己添加类样式current高亮，链式编程让自己的兄弟元素，移除类样式current
$(function () {
$('.tab_list li').click(function () {
$(this).addClass('current').siblings('li').removeClass('current');
// 2：获取到每一个li的index，让tab_con .item查找索引，根据这个索引显示，链式编程让自己的兄弟元素隐藏
var index = $(this).index();
$('.tab_con .item').eq(index).show().siblings().hide();
});
});
</script>
</body>
淘宝精品服饰案例
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<div id="content">
<div>
<a href="#"
><img src="../Desktop/女靴.jpg" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src="../Desktop/雪地靴.jpg" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src="../Desktop/冬裙.jpg" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src="../Desktop/呢大衣.jpg" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src="../Desktop/毛衣.jpg" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src="../Desktop/棉服.jpg" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src="../Desktop/女裤.jpg" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src="../Desktop/羽绒服.jpg" width="200" height="250"
/></a>
</div>
<div>
<a href="#"
><img src="../Desktop/牛仔裤.jpg" width="200" height="250"
/></a>
</div>
</div>
</div>
<script>
// 等待页面元素加载完毕，鼠标经过left 中的li，获取搭配index，让后content 中的div根据index显示，兄弟元素隐藏
$(function () {
$('#left li').mouseover(function () {
var index = $(this).index();
$('#content div').eq(index).show().siblings('div').hide();
});
});
</script>
</body>
京剧宫格高亮
<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>
// 鼠标经过让其他格子变暗：等待页面元素加载完毕，.wrap 里面的li，hover的时候，让自己的兄弟元素fadeTo（400， 0.5）变暗
$(function () {
$('.wrap li').hover(
function () {
$(this).siblings('li').stop().fadeTo(400, 0.5);
},
//鼠标离开让盒子恢复高亮： 链式编程的方式，开启另一个函数，让自己的兄弟元素，fadeTo(400, 1)变亮
function () {
$(this).siblings('li').stop().fadeTo(400, 1);
}
);
});
</script>
</body>
王者荣耀手风琴案例
<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 () {
// 鼠标经过让自己盒子边框，将小图片隐藏，让自己的大图片显示：
// 1：等待页面元素加载完毕，.king 里面的li鼠标经过让自己调用animate动画函数让自己宽度224
// 2：使用find找到small，使用fadeOut让自己的兄弟元素.big元素fadeIn
$(function () {
$('.king li').mouseenter(function () {
$(this)
.stop()
.animate({
width: 224,
})
.find('.small')
.stop()
.fadeOut()
.siblings('.big')
.stop()
.fadeIn();
// 其余兄弟元素变窄，都显示小图片，淡出大图片
// 3：让自己的兄弟元素li调用动画函数将宽度改为69，通过find找到small小图片淡入，大图片淡出
$(this)
.siblings('li')
.stop()
.animate({
width: 69,
})
.find('.small')
.stop()
.fadeIn()
.siblings('.big')
.stop()
.fadeOut();
});
});
});
</script>
</body>
