JS基础知识总结_js基础知识点总结

Day01初识js
一、如何编写js
1、前端的应用：网页开发（html+css+JavaScript）、app开发、移动端开发、游戏开发、服务器开发、可视化数据开发
2、JavaScript：实现网页交互的脚本语言
3、交互：用户输入数据->程序接收并处理数据->返回处理结果 《—|
4、如何编写js：

1. 通过浏览器窗口编写
1

2. 通过html页面中的script标签内部进行JavaScript编写
1

3. 通过通过script标签的src属性引入js文件
1

二、js代码运行顺序
1、js如何运行
浏览器中包含2个引擎：

		1. 内容排版引擎 - 解析html和css的
		2. 脚本解释引擎 - 解释并执行JavaScript程序脚本语言的引擎
			解释执行：默认都是自上而下逐行执行的
1
2
3

2、当页面加载完成后，修改id为box的div的内容- 张云

1. 通过Dom（文档对象模型）的API查找到id为box的div元素对象
		api: 应用程序接口
1
2

2.将script写在最后，根据程序解析顺序可以在页面加载完成后修改
1

三、数据类型
1、JavaScript的数据类型：2类

1. 原始数据类型：
	string - 字符串
	number - 数字
	boolean - 布尔  true  false
	undefined - 所有仅声明，未赋值的变量的默认值！ -  空（修饰原始数据类型的空）
	null   - 空  （修饰对象的空）
	*symbol
2. 引用类型对象：array（数组）  function（函数）  Math  Date
1
2
3
4
5
6
7
8

2、undefined与null

1. 所有仅声明未赋值的变量的默认值 - undefined
	undefined为空 - 修饰原始数据类型
2. null - 修饰对象的空 
	null专门表示一个变量不再指向任何对象的地址了！
null的用法有2种：
	1. var 变量 = null; - 打标记
		表示将来该变量即将指向一个对象，只是此时什么都没有指向
	2. var obj = 对象;
		把该对象使用完毕后，就把obj主动赋值null - 》 obj=null
		将来一个变量不再指向对象了，那么可以主动赋值为null	
		这么做得话，就表示主动的释放内存，节省内存空间从而提高浏览器性能
		内存中有个垃圾回收器，如果一个对象没有变量指向（引用），那么就会被垃圾回收器回收，从而释放内存
		js中的对象：内存中保存一组相关数据和功能的整体
		对象都是new操作符创建的
		new专门在内存中开辟一个空间，保存数据和功能，返回*存储地址*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2、示例

注意：string类型在浏览器中字体显示为黑色，其他类型皆为蓝色
四、数据类型转换
1、数据类型转换 - 隐式转换
隐式转换：不需要程序员干预，js可以自动的完成类型转换
仅讨论算数计算时的隐式转换

		 1. 算数计算中，一切数据都默认转换为数字后，再做计算
			boolean： true ->  1      false -> 0
			null -> 0
			undefined ->  NaN -> not a number (不是一个数字)
			一些数据不能转换为数字的话，则会转换为NaN
			**NaN不等于，不大于，不小于任何值包括他自己
			只要NaN参与的运算结果永远是NaN
			NaN虽然表示不是一个数字，但是他本身属于number数据类型
		2. 在+运算中，只要碰到字符串，+就不再是+法运算符号了，而变成了字符串拼接符号了，导致另一个不是字符串类型的数据，会变成字符串类型数据
1
2
3
4
5
6
7
8
9

2、隐式类型转换示例

3、强制类型转换

1.JS强制转换：程序员主动的调用专门的函数（API）执行数据转换
何时使用：自动转换的结果不是我们想要的结果的时候
任意-> string   2个API
	x.toString()   x不能是undefined或者是null
	String(x)    -> 相当于隐式转换 -> 万能转换方式  
	typeof(x)  ->  返回的结果数据类型 
String -》 Number：2个API
	parseInt(str/num):从第一个字符开始，依次读取每个数字，只要碰到第一个非数字字符就停止，自动跳过开头的所有空字符
	parseFloat(str/num):解析规则同parseInt,只不过认识第一个小数点
1
2
3
4
5
6
7
8
9

4、强制类型转换示例

五、运算符
1、JavaScript中的运算符：

1. 算数运算：+  -  *  /   %(模运算)   ++（递增1）   --（递减1）
2. 模运算：%不取商而是取余数
	比如：3/2 = 1.5
		  3%2 = 1
	模运算的2个用途：
		1. 判断是否能整除：比如判断奇偶性
			n%2等于0 n为偶数
			不等0 n为奇数
		2. 保证运算结果不能超过除数
3. ++ 递增1   -- 递减1
	有2种表达式：++n	n++
	这两个表达式的共同点都是将n中的值递增1后，再存回n中
	如果上述2个表达式参与输出了，那么是有区别的
		 ++n 返回表达式的新值（n递增后的值）
		 n++ 返回表达式的旧值（n递增前的值）
4. 关系运算：将两个值作比较 -> true  false
	>  <  >=  <=  ==  !=
	关系运算的比较规则：
		1. 默认将所有类型转换为数字后，再做比较
		2. 如果参与比较的两个数据都是字符串，依次取出每个字符串中的字符 PK "unicode"号
5. 扩展赋值运算： +=   -=  *=  /=  %=
	比如：n=n+m 将n中的值递增m后，再存回n中
		  n=n+m  -->   n+=m
		  n=n-m  -->   n-=m
	注意：n=m-n  能否简化成  n-=m?  不能！
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

2、示例

六、作业
1、作业1：把1539使用/ % 取出各个位数上的值，并求和

2、作业2：推理并描述n初始值为9，console.log(++n + n++ + ++n); 运算过程

Day02 逻辑运算&分支结构
一、逻辑运算
1、逻辑运算：将多个关系运算综合起来，得出一个结论（true，false）

3种： &&(且)   ||（或）   !（非）
	&&:2个条件都必须为true，才返回 true
	||:2个条件都必须为false 才返回 false
1
2
3

2、短路逻辑(分支结构)：

&&：如果前一个条件为false，就已经得出结论->false
||: 如果前一个条件为true， 就已经得出结论->true
引申出短路逻辑：
	语法：1. 条件&&(操作)
			条件满足，执行后续操作，不满足，则不执行
		 2. 值1||值2
			如果值1有效，就用值1，否则，就用值2
1
2
3
4
5
6
7

3、程序中的3种结构：

1. 顺序结构
2. 分支结构：根据不同的条件，满足条件就执行，不满足就不执行
3. 循环结构
1
2
3

4、示例

1.输入一个年份，判断是否为闰年
闰年分为2种：
	1. 普通闰年：年份可以被4整除不能被100整除  -》 闰年
		year%4==0&&year%100!=0
	2. 世纪闰年：年份可以被400整除  -> 闰年
		year%400==0
所以：(year%4==0&&year%100!=0)||(year%400==0)
1
2
3
4
5
6
7

2.消费满500 则打八折
1

3.如果用户输入了内容，则使用输入内容回复，否则，就默认回复“这个人很懒，什么也没有留下”
1

二、三目运算
1、三目运算 三元运算 条件运算
根据不同的条件，执行不同的操作/返回不同的值

语法：
	条件1?值1或操作1:     // 满足条件1才取值1或执行操作1
	条件2?值2或操作2: 
	... ?          :
默认值或默认操作     // 上述条件都不满足则取默认值或执行默认操作
总结：多个条件，多件事，多选一执行
注意：如果操作语句比较简单，建议使用三目运算
1
2
3
4
5
6
7

2、示例

1.输入一个年份，判断是闰年还是平年
1

2.计算可莱托指数：
klt=体重Kg（weight）/(身高m(height)*身高)
	klt>25,输出您该减肥了
	<20,输出您该吃肉
	否则，输出正常
1
2
3
4
5

三、分支结构
1、分支结构：3种

1. if结构：一个条件一件事，满足就做，不满足就不做
	语法：
		if(条件){
			满足条件执行的操作
		}
2. if..else结构：一个条件2件事，二选一执行
	语法：
		if(条件){
			满足条件执行的操作
		}else{
			不满足条件执行的操作
		}
3. if..else if..[else]结构：多个条件多件事，多选一执行（也有可能什么都不做）
	语法：
		if(条件1){
			满足条件1执行的操作
		}else if(条件2){
			满足条件2执行的操作
		}[else{
			上述条件都不满足执行的默认操作
		}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2、示例

1.消费满500打八折（if结构实现）
1

2.输入年份，判断闰年还是平年
1

四、分支结构-switch case结构
1、switch case结构：当条件都是全等比较的时候，才可以使用switch case结构

全等比较：不仅比较值，还比较数据类型
语法：
	switch(表达式){
		case 值1:
			满足值1才执行的代码段
		case 值2:
			满足值2才执行的代码段
		...  .. :
			.....................
		default:
			如果前面的值都不满足，执行默认操作
	}
问题：经过运行我们发现switch case结构如果没有break关键词，那么会根据条件进入到满足的条件的case执行，并以此触发后续的所有case操作执行（包括default），所以，如果想要独立的执行分支，必须要在每个case之间添加break关键词
	break:"终止"当前结构执行，并跳出结构
	何时可以省略break关键词：如果上下两个case执行相同操作时
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2、示例：模拟ATM机按键操作
如果用户输入1，执行查询操作
如果用户输入2，执行取款操作
如果用户输入3，执行转账操作
如果用户输入0，退出操作
否则，提示无效按键，重新输入

五、循环结构-while循环
1、循环结构：让程序反复执行同一段代码

循环三要素：
	1. 循环条件：让循环反复执行的条件
	2. 循环变量：循环条件中用于比较的变量
		循环变量总是向着不满足循环条件的趋势进行迭代的
	3. 循环体：循环内反复执行的代码段
循环分类：
	1. while循环：先判断循环条件，再执行循环体
		一般情况下当循环条件的变化没有规律的时候优先使用while循环
1
2
3
4
5
6
7
8

2、while循环语法

while(循环条件){
	循环体;
	迭代修改循环变量;
}
1
2
3
4

3、do…while循环：先执行循环体，再判断循环条件
语法：

do{
		循环体;
		迭代修改循环变量;
	}while(循环条件)
1
2
3
4

4、注意：while循环与do…while循环基本等效，区别在于看第一个循环条件是否满足
如果满足，则两者等效，不满足，while循环一次都不执行，而do while循环至少执行一次
5、while循环语句执行顺序

5、do。。while循环语句执行顺序

六、作业
1、作业1

输入3个数字 x,y,z
	prompt("请输入x")
要求，不论怎么输入这3个数字，最终输出x,y,z的结果永远是从大到小排列
1
2
3

2、作业2

按照输入的分数，显示等级
如果分数<0或者>100,输出“无效成绩”
否则，如果分数>=90,显示A
否则，如果分数>=80,显示B
否则，如果分数>=60,显示C
否则,显示D
1
2
3
4
5
6

3、作业3

输入年，月，日，输出这一天在这一年中是第几天
比如：输入2021年，8月，9日  这一天在2021年中是第几天
思路：把8月之前的7个月的满月天数+9，就得出了是第几天了 
问题1：要判断是否为闰年，如果是闰年2月为29天，否则为28天
问题2：如果根据月份把之前的满月天数进行累加？
1
2
3
4
5

Day03 循环结构&函数对象
一、for循环
1、for循环与while循环等效

语法：
	for(1.初始化循环变量;2.循环条件;3.迭代修改循环变量){
		4.循环体;
	}
	运行顺序：1->2->4->3->2->4->3
1
2
3
4
5

2、示例
1.计算1~100的和：1+2+3+4+5+…+100

	循环3要素：
		1. 循环变量 加数从1开始每次递增1
		2. 循环条件 加数<=100
		3. 循环体  把加数累加到sum中
1
2
3
4

2.求：1+1/3+1/5+1/7+…+1/999的和

1. 循环变量：分母从1开始，每次递增2
2. 循环条件：分母<1000
3. 循环体：1/i累加到sum中
1
2
3

3.打印乘法表

1*1=1
2*1=2	2*2=4
3*1=3	3*2=6	3*3=9
比如：打印第5行乘法表
	5*1=5   5*2=10	5*3=15	5*4=20	5*5=25
		1. 循环变量：乘数从1开始，每次递增1
		2. 循环条件：乘数<=5
		3. 循环体：拼接并计算出每个公式的结果
1
2
3
4
5
6
7
8

同理：打印第8行乘法表

经过我们推理发现：打印完整的乘法表，需要写9个for循环，每个for循环里面改变的是行数，所以行数也是一个循环变量
这个行数的循环变量的初始值为：1，每次递增1
循环条件：行数<=9
循环体：打印每一行的公式

二、function的定义
1、函数：程序中封装一项专门任务的步骤清单代码段

语法：
	function 函数名([参数变量列表]){
		任务步骤代码段;
		[return 返回值;]
	}
函数名（任务名）：指向函数定义的一个变量，保存的是*函数对象的引用*
	声明的时候：不执行，同时也不读取内部代码
	在程序的任意位置：函数名([参数值列表]);
	函数调用时：才开始读取内部代码，并执行
1
2
3
4
5
6
7
8
9

2、示例

三、变量的作用域
1、变量作用域：一个变量的可用范围
2种：

1. 全局作用域 - window
		全局变量 - 放在全局作用域里的变量
			可在程序的任意位置进行访问并修改
2. 局部作用域：在函数调用的时候才会动态创建的作用域
		 局部变量：2种
			1. 参数变量
			2. 在函数中var出来的变量
				仅在函数调用时，动态创建
				并且使用变量的规则是：如果局部有，就不用全局的
				调用后，局部变量会伴随着局部作用域一同销毁！
1
2
3
4
5
6
7
8
9
10

2、示例

四、函数的提前声明和按值传递
1、声明提前：正式开始执行程序之前，都会先将var声明的变量，和function声明的函数，提前到当前作用域的顶部，集中声明，同时赋值留在本地
注意：函数的声明比变量的声明更置顶
function rose(){} // 声明方式声明函数
var fun=function(){} // 直接量方式声明函数
2、声明提前运行：
代码书写顺序：
程序运行顺序：

注意：
1.在js中不可同名，所以在内存中会按照运行顺序，同名的会覆盖值
2.注意：变量名() 是函数调用的专用语法，但是此时最后一行的fun还是函数吗？
此时的fun不再是函数的引用了！就不能使用()调用，会报错！
3、按值传递

五、作业
1、作业1
年利率为3%，本金10000，问几年后本金超过12000
循环变量：本金*=1.03，年数 ++
循环条件：本金<=12000

2、作业2
输入任意年份，输出从该年起，之后的5个闰年
循环变量：y从用户输入开始，每次+1，如果y是闰年，每次递增4
n（计算闰年的个数，从0开始），一碰到闰年才+1
循环条件：n<5
循环体：依次遍历y的每一年判断当前年份是否为闰年，如果是闰年，则输出该年份，同时n++

3、作业3
把下述代码的推理过程，以注释的形式写出来

Day04 数组
一、初识数组
1、数组：一组变量的集合，连续保存多个数据的引用类型的对象
2、如何创建数组：

1. 创建空数组   var 数组名=[]; 
	暂时不知道数组内容的时候，先创建再追加
2. 创建数组的同时直接初始化内容
	var 数组名=[值1,值2,...];
3. 创建指定个数的数组
	var 数组名=new Array(n);
	创建一个数组对象，同时初始化n个空元素
4. 创建同时直接初始化
	var 数组名=new Array(值1,值2,...);
注意：3,4创建数组方式不常用，因为有分歧
	var arr=new Array(7);
	可以解释为初始化了7个空元素，也可以解释为初始化了一个数组只放了一个元素值为7
1
2
3
4
5
6
7
8
9
10
11
12

3、数组分类：

1. 索引数组
	下标从0开始每次递增1
	length - 元素个数
2. 关联数组（哈希数组）
	下标可以自定义，而且下标不可重复
	length - 失效
3. 二维数组 - 元素又指向另一个子数组对象
	下标分为行下标和列下标，都是从0开始，每次递增1
	行 - length获得数组中有多少个子数组对象
	列 - length获得子数组中的元素个数
注意：所有的数组都有下标！只不过每种数组下标特点不同
	都有length属性，length属性表示数组的长度 - 保存了多少个元素
	如何获得某个元素值： var 变量=arr[下标]
	如何获得数组长度：	arr.length
	如何获得最后一个元素值：arr[arr.length-1]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4、示例

二、数组遍历
1、索引数组的下标从0开始，每次递增1的特性
这个下标天生就是一个循环变量
下标递增到<length结束 - 循环条件

2、示例
冒泡排序：将数组中的元素按照从大到小（从小到大）的顺序进行排列

三、关联数组
1、关联数组（hash哈希数组）- 可以自定义下标的数组
关联数组的key（下标）不可重复，length属性失效
2、如何遍历hash数组：
for(var key in obj){
console.log(obj[key])
}
1.常规写法：

3、查询hash数组中的值

Day05
1、数组去重复

// 实现数组去重复?
        var list=[0,1,2,3,4,1,1,2,3,4,5,'stu','stu'];
        var stu=[];
        // 关联数组的下标不能重复
        // stu['1']='hello';
        // stu['1']='zsh';
        // console.log(stu);
        // 遍历数组
        for(var i=0;i<list.length;i++){
            // 把数组list的值作为关联数组stu的下标
            // stu[list[i]]=1;
            if(stu[list[i]]==undefined){
                stu[list[i]]=1;
            }else{
                stu[list[i]]++;
            }
        }
        console.log(stu)
        list=[];
        var t=0;
        var m=0;
        // 遍历关联数组，获取下标
        for(var key in stu){
            // 遍历关联数组，获取key值 赋值给list
            // 判断key是否可以转换为数值
            // parseInt()可以把数字开始的转化成数值类型，否则转化成了NaN  NaN和自身也不相等 
            // isNaN()判断是否为NaN
            if(isNaN(parseInt(key))){
                list[list.length]=key;
            }else{
                list[list.length]=parseInt(key);
            }
            // 遍历获取次数最高的
            if(stu[key]>=t){
                t=stu[key];
                m=key
            } 
            console.log(key+'出现的次数'+stu[key])
            
        }
        console.log('出现次数最多的'+m+'出现了'+t+'次')
        console.log(parseInt('lsdjfljfdl')==NaN)
        console.log(list)
        // 如何统计数组中某个元素出现的次数,哪一个元素出现的次数最多
        // 可以利用关联数组来实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

2、数组api
// 数组api api提供了一整套定义好的方法，直接使用即可
// var arr=[1,2,3,4,1];
// var arr1=[‘hello’,‘welcome’,‘my’,1,2,3,4,1,1,1,1,3];
// concat合并数组 var newarr=arr.concat(数组1/普通值,数组2/普通值,[数组],值)
// var newarr=arr.concat(arr1);
// var newarr=arr.concat(1,2,3,4,[1,2,3])
// console.log(newarr);
// join可以把数组转化为字符串 可以自定义拼接符
// var str=arr1.join(’–’);
// toString()可以把数组转化为字符串 不可以自定义拼接符
// str=arr1.toString(’==’)

        // 判断某一个元素在数组中第一次出现的位置，如果没有返回-1  数组.indexOf(元素)
        // var n=arr.indexOf(1)
        // 数组去重复
        // 定义一个空数组
        // var list=[];
        // // 遍历数组
        // for(var i=0;i<arr1.length;i++){
        //     // 判断是否在空数组中出现过
        //     if(list.indexOf(arr1[i])==-1){
        //         list=list.concat(arr1[i])
        //     }
        // }
        // console.log(list)

        // 遍历arr把arr的元素遍历出来  如果空数组不包含该元素，放到空数组里面。否则不放置
        // console.log(n)
        

        var arr=[1,2,3,4,1,'hello','my'];
        // arr[index]=值   新增/修改数组的元素  如果该下标没有元素，新增。否则就是修改 

        // 相当于在数组下标为100的位置增加元素   长度101  隐士把数组长度扩展了
        // arr[100]=10;

        // 数组.length获取数组的长度
        // console.log(arr.length)

        // push在数组后面追加元素，直接把数组修改了。返回的是数组的长度
        // var t=arr.push('新增的');
        // pop删除数组最后一个元素，直接把数组修改了。返回的是删除数组的长度
        // var t=arr.pop()
        // unshift在数组前面追加元素，直接把数组修改了。返回的是数组的长度
        // var t=arr.unshift('新增的');
       // pop删除数组第一个元素，直接把数组修改了。返回的是删除数组的长度
        // var t=arr.shift();
        // console.log(arr)
        // console.log(t)

        // 数组反转
        // arr.reverse();
        // console.log(arr)

        // splice(start,num,元素(可选)) start操作开始的下标位置  num删除的数量  其余元素代表在数组中插入的元素可选
        // var arr=[1,2,3];
        // arr.splice(2,1);
        // console.log(arr)
        // var arr=['张三','李四',1,2,3,4,'张哈哈哈']
        // arr.splice(1,1)
        // console.log(arr)

        var arr=[110,2,3,2,3,4,5,6,10];
                                   
        // 数组排序 
        // 需要自定义一些函数参数 升序  比较规则是内置的，我们只需要按照规则使用即可
        // arr.sort(function(a,b){return a-b});
        // 降序排列
        // arr.sort(function(a,b){return b-a});
        
        // console.log(arr.sort(function(c,d){return d-c}))

        // 数组排序
        // 遍历的次数  有多少个元素，就需要遍历多少次 一次遍历只能取出当前最大的
        for(var i=0;i<arr.length;i++){
            // 遍历取出当前最大的元素
            for(var j=0;j<arr.length-1;j++){
                if(arr[j]>arr[j+1]){
                    // 交换位置
                    var tmp=arr[j+1];
                    arr[j+1]=arr[j];
                    arr[j]=tmp
                }
            }
        }
        console.log(arr.reverse());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

Day06
1、二维数组

		 // 二维数组，数组的元素又是一个数组
 		 // 一般使用在多重数据的情况下
  		// 获取二维数组元素 arr[row][col]
 		// 数组元素的下标从0开始
        // 二维数组一般是创建的时候，直接初始化。操作方法和一维数组类似
        // var arr=[[100,90,90],[90,80,80],[50,90,80,200]];
        // console.log(arr[2][0]);
        // 二维数组如何遍历

        // i用来遍历行数
        // for(var i=0;i<arr.length;i++){
        //     // 用来遍历列数
        //     for(var t=0;t<arr[i].length;t++){
        //         console.log(arr[i][t])
        //     }
        // }

        // 通过二维数组模拟出2048游戏结束的功能
        var data=[
            [2,4,2,4],
            [4,2,4,2],
            [2,4,2,4],
            [8,2,8,2]
        ]
        // 2048游戏如果需要结束
        // 1、每一个格子必须不能是0
        function isFull(){
            for(var i=0;i<data.length;i++){
                for(var t=0;t<data[i].length;t++){
                    if(data[i][t]==0){
                        console.log('格子还有空');
                        // return终止函数的执行
                        return false;
                    }
                }
            }
            console.log('游戏没有空')
            return true;
        }

        isFull()

        // 2、满足第一个条件的前提下，上下左右四个方向不能移动。没有相同的元素
        function isGameOver(){
            if(isFull()){
                for(var i=0;i<data.length;i++){
                for(var t=0;t<data[i].length;t++){
                    // 行数横向比较。不是最右侧的且当前元素值==紧挨着的右侧元素值
                    if(t!=data[i].length-1&&data[i][t]==data[i][t+1]){
                        console.log('游戏不终止');
                        return false;
                    }

                    // 纵向比较 不是最后一行的 当前行元素的值==下一行元素的值
                    if(i!=data[t].length-1&&data[i][t]==data[i+1][t]){
                        console.log('游戏不终止');

                        return false;
                    }
                }
            }
            }else{
                return false;
            }

            console.log('游戏终止')
            return true;
        }

        isGameOver()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

2、string

 // 以下两种方式创建的字符串，使用方法一样
        // 字符串类型
        var str='hello';
        // 对象类型
        var str1=new String('hello');
        // ==只是判断值是否相等
        console.log(str==str1);
        // ===完全相等，一模一样才为真
        console.log(str===str1);
        console.log(typeof(str1));
        // 字符串长度
        // console.log(str.length)
        // 把字符串中的字符转化为大写
        console.log(str.toUpperCase());
        var s='HWWHWHH';
        // 全部转化为小写
        console.log(str.toLowerCase());
        // indexOf()检测字符在字符串中第一次出现的位置，如果没有的话返回-1 
        str='hello-hello-hello-hello-hello' ;
        console.log(str.indexOf('h'))
        // split('分隔符')把字符串转化为数组  以分隔符为字符进行分割 。分割完以后分隔符不存在
        var arr=str.split('-');
        console.log(arr);
        str='hello';
        // 获取指定位置的字符
        var c=str.charAt(1);
        console.log(c)
        // 指定位置字符的unicode编码
        var c=str.charCodeAt(1);
        console.log(c)
        str='welcome';
        // 截取字符串 slice(start,end)包含开始 不包含结束
        // console.log(str.slice(1,5))
        // 截取字符串 substr(start,length)
        // console.log(str.substr(1,5))
        // 截取字符串 substring(start,end)包含开始 不包含结束
        console.log(str.substring(1,5))
        str='     lhelel            ';
        // 去除开始的空格
        // while(条件){
        //     条件为真的时候执行代码
        // }
        while(str.charAt(0)==' '){
            str=str.slice(1,str.length)
        }
        // 去除结尾的空格
        while(str.charAt(str.length-1)==' '){
            str=str.slice(0,str.length-1)
        }
        console.log(str.length);
        str='no zuo no die';
        arr=str.split(' ');
        console.log(arr);
        // 遍历取出首字母转化为大写即可
        for(var i=0;i<arr.length;i++){
            arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].slice(1,arr[i].length);
        }
        console.log(arr);
        console.log(arr.join(" "))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

3、Date

		// date对象获取日期相关的一些参数。
        // 获取当前日期 获取的是客户端的日期
        var now =new Date();
        // console.log(now)
        // 程序中的月份从0开始 0-11月份
        // var date=new Date(2021,10,10);

        // 如果书写成字符串月份代表的就是输入的月份
        // var date=new Date('2021,10,10');
        // // 获取月份0-11月份
        // console.log(date.getMonth());

        // 获取年份
        var year=now.getFullYear();
        // 获取月份 从0开始
        var month=now.getMonth()+1;
        // 获取日期
        var date=now.getDate();
        // 获取星期几
        var day=now.getDay();
        // 获取小时
        var hours=now.getHours();
        // 获取分钟
       var minutes=now.getMinutes()
        // 获取秒数
        var seconds=now.getSeconds();
        console.log(year,month,date,day,hours,minutes,seconds)
        console.log('获取毫秒数'+now.getMilliseconds())

        // getTime()获取的是1970年累积到当前时间的毫秒数
        console.log('获取毫秒数'+now.getTime());
        // 距离2021年10月1号还有多少天
        var c=new Date(2021,9,1);
        var nt=now.getTime()
        var ct=c.getTime();
        var datys=(ct-nt)/(1000*60*60*24);
        console.log(datys)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Day07
1、定时器计算

// 定时器  setInterval(function(){书写自己的代码},时间ms)   
每隔一段时间执行一次代码
 		setInterval(function(){
            // 获取当前的时间
            var now=new Date();
            var future=new Date(2021,9,1);
            // 获取时间差 得到的是相差的毫秒数
            var d=future.getTime()-now.getTime();

            // 计算相差的天数
            var  days=parseInt(d/(1000*60*60*24))

            // 计算相差的小时数

            // 计算天数剩余的毫秒数
            var t=d%(1000*60*60*24);
            var hours=parseInt(t/(1000*60*60));

            // 计算相差的分钟数
            // 计算小时数剩余的毫秒数
            var t1=t%(1000*60*60);
            var minutes=parseInt(t1/(1000*60));

            // 计算相差的秒数
            // 计算分钟数剩余的毫秒数
            var t2=t1%(1000*60)
            var seconds=parseInt(t2/1000);

            console.log('距离国庆节还有'+days+'天'+hours+'小时'+minutes+'分钟'+seconds+'秒');
        },1000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2、正则表达式

// search 检测字符串中指定的字符 如果不包含该字符得到-1 包含的话就返回该字符开始的位置
        var str='hello welcome';
        console.log(str.search('ll'));
        // match 在字符串中检测指定的值
        // console.log(str.search('ll'))
        // match可以用来检测字符串是否符合某个表达式的规则 如果不符合得到null 符合得到一个对象
        str='22299a'
        // 可以限制表达式  正则表达式  /表达式/  ^开始的条件  $结束的条件 
        // (a|b|c)|或的意思  a或者b或者c都可以   
        var  reg=/^[0-9]{2,6}(a|b|c)?$/;
        console.log(str.match(reg));
        reg=/^[0-9]*$/;
        // \d查找数字
        reg=/^\d{2}$/;
        reg=/^[\u4e00-\u9fa5]{0,}$/;
        str='前端开发';
        console.log(str.match(reg))
        // replace
        var str='hello hello  HELLO  hello Hello';
        // replace(/原来的字符/,'替换字符') g全局 i不区分大小写  把前面的字符，用后面的字符替换
        // \D非数值
        str=str.replace(/\D/gi,'welcome');
        console.log(str);
        // exec使用方法和match差不多

        str='hell ohelll';
        var t=/he/;
        t=/^[a-z|' ']{9,}$/
        // 正则表达式.exec(字符串)  检测字符串是否和正则表达式匹配 不匹配返回null
        console.log(t.exec(str));

        // 正则表达式.test(字符串) 检测字符串是否匹配正则表达式
        str='hello hello';
        t=/web/gi;
        console.log(t.test(str));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

2、Math

// Math数学对象：专门封装用来处理数字相关的
        // 获取pi值
        console.log(Math.PI)
        var n=10.6;
        // Math.ceil直接进1
        console.log(Math.ceil(n));
        // Math.floor直接去除小数点
        console.log(Math.floor(n));
        // Math.round()四舍五入
        console.log(Math.round(n));
        // 获取随机数 0-1之间的随机数 包含0不包含1
        console.log(Math.random());
        // 产生0-10之间的随机整数
        n=parseInt(Math.random()*10);
        console.log(n)

        function fn(){
            var val='';
            for(var i=0;i<4;i++){
                // val+=parseInt(Math.random()*10);
                val=val+parseInt(Math.random()*10);
            }
            console.log(val)
        }

        // 定时器  setInterval(function(){书写自己的代码},时间ms)   每隔一段时间执行一次代码
        // 产生一个四位数的随机数
        setInterval(function(){
            fn()
        },1000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Day08
1、Dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

   <style>
       *{
           margin: 0px;
           padding:0px;
           list-style: none;
       }
       button{
           border:none;
           outline: none;
           background: #f60;
           width:100px;
       }
       ul{
           overflow: hidden;
       }
       ul li{
           float: left;
           margin-right: 20px;
           margin-top: 20px;
           padding:10px;
           cursor: pointer;
       }
   </style>
</head>
<body>
    <button id="btn">按钮</button>
    
    <ul>
        <li>网页</li>
        <li>资讯</li>
        <li>视频</li>
        <li>图片</li>
        <li>良医</li>
        <li>微博</li>
        <li>地图</li>
        <li>问答</li>
    </ul>

    <!-- js代码一般放置在body内部的底部，因为js进行dom元素的操作，需要等待标签加载完以后再执行 -->
    <script>
        // 代码从上到下执行，如果把js放在上面的话，执行到js的时候，标签还没有渲染。就会报错
        // css加载是同步的，渲染标签的时候，会同时去找css样式，所以css放在在页面的哪一个位置都可以

        // 获取标签
        // 通过id名获取标签 得到的是唯一的 document.getElementById('id名字')

        // 把获取的标签放到一个变量里面
        var tag=document.getElementById('btn');

        // 绑定点击事件  获取标签.on+事件类型(click点击)=function(){执行的代码}
        // 使用标签的时候，使用变量即可
        tag.onclick=function(){
            // 触发事件以后，执行的代码
            // alert(11);
            // 控制标签的css 获取标签.style.css样式(css样式书写方式和之前一样，只是如果样式带有中横线，去除中横线，中横线后的首字母大写)='值';
            tag.style.color='#fff';
            tag.style.backgroundColor='lime';
            tag.style.padding="10px";
        }
   
        // 通过标签名获取标签 获取得到的是一个关联数组 即使只有一个元素，也是数组 数组不能直接进行控制，需要选择到具体某一个进行控制 获取标签[下标]
        //  document.getElementsByTagName()
        var tags=document.getElementsByTagName('li');
        // tags.style.color='red';不能使用，因为不能对关联数组进行控制

        // 遍历标签,给所有的标签绑定点击事件
        // for循环，页面一进来的时候执行
        for(var i=0;i<tags.length;i++){
            console.log(i)
            // tags[i].style.color='red';
            // 点击到哪一个标签，哪一个标签变色
            tags[i].onclick=function(){
                // 点击的时候，执行代码。点击的时候for循环已经执行完毕
                // console.log(i)
                // tags[i].style.color='red';
                // 遍历所有的变正常
                for(t=0;t<tags.length;t++){
                    tags[t].style.color='#000';
                    tags[t].style.background='none';
                }
                // this在事件中代表用户当前操作的标签
                this.style.color="#fff";
                this.style.backgroundColor='#00ce41';
            }
        }
   </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

2、控制标签的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>
    <p id="txt">文字</p>

    <script>
        // 获取标签
        var tag=document.getElementById('btn');
        var txt=document.getElementById('txt');
        // 绑定点击事件
        tag.onclick=function(){
            // 在js中标签的html指的是标签开始和结束中间的内容
            // 修改/新增：获取标签.innerHTML='修改以后的值'
            // 获取： 获取标签.innerHTML
            // tag.innerHTML='已经点击过了'
            // console.log(tag.innerHTML)


            // 点击按钮，切换按钮和p的内容
            // 获取p的值放到变量里面
            var val=txt.innerHTML;
            // 把button的值赋值给p
            txt.innerHTML=tag.innerHTML;
            // 把p的值赋值给button
            tag.innerHTML=val;
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

3、控制标签属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: lime;;
        }
        .one{
            border-radius: 50%;
            background: red;
        }
    </style>
</head>
<body>
    <!-- 标签的属性：所有放在标签后面的都可以称为标签的属性 <标签 k="v"></标签> -->
    <div class="one" id="btn"></div>
    <img src="images/pic.jpg" id="pic" alt="">

    <script>
        // 通过id名获取标签
        var btn=document.getElementById('btn');
        // 绑定鼠标移入事件mouseenter
        btn.onmouseenter=function(){
            // 删除类
            btn.removeAttribute("class")
        }
        // 绑定鼠标移出事件 mouseleave
        btn.onmouseleave=function(){
            // 增加类
            btn.setAttribute('class','one')
        }

        // 鼠标移入显示a图片，鼠标移出显示b图片
        // 获取标签
        var pic=document.getElementById('pic');
        pic.onmouseenter=function(){
            this.setAttribute('src','images/pic2.jpg')
        }
        pic.onmouseleave=function(){
            this.setAttribute('src','images/pic.jpg')
        }
    </script>
</body>
</html>
<!-- 
控制标签的属性
k代表的是属性v代表的是属性对应的值
增加/修改属性的值：获取标签.setAttribute('k','v');
删除属性：获取标签.removeAttribute('k');
获取属性的值：获取标签.getAttribute('k')
-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

4、360搜索框的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
            list-style: none;
        }
        button{
            border:none;
            outline: none;
            background: #f60;
            width:100px;
            line-height: 40px;
        }
        ul{
            overflow: hidden;
        }
        ul li{
            float: left;
            margin-right: 20px;
            margin-top: 20px;
            padding:10px;
            cursor: pointer;
        }
        .current{
            background: lime;
            color:#fff;
        }
    </style>
</head>
<body>
    <button id="btn">搜索</button>
    
    <ul>
        <li class="current">网页</li>
        <li>资讯</li>
        <li>视频</li>
        <li>图片</li>
        <li>良医</li>
        <li>微博</li>
        <li>地图</li>
        <li>问答</li>
    </ul>


    <script>
        // 实现的功能，点击li的时候把li的内容赋值给button
        // 获取标签
        // 获取所有的li 通过标签名获取标签
        var tags=document.getElementsByTagName('li');
        // 获取button
        var btn=document.getElementById('btn');
        // 给所有的li绑定点击事件
        for(var i=0;i<tags.length;i++){
            tags[i].onclick=function(){
                // 获取当前点击的标签的内容
                var con=this.innerHTML;
                if(con=='网页'){
                    con='搜索'
                }else if(con=='资讯'){
                    con='搜资讯'
                }else if(con=='视频'){
                    con='视频搜索'
                }else if(con=='图片'){
                    con='360图片'
                }else if(con=='良医'){
                    con='360良医'
                }
                // 赋值给button
                btn.innerHTML=con;

                // 其余的删除
                for(var t=0;t<tags.length;t++){
                    tags[t].removeAttribute('class');
                }
                // 当前的增加类
                this.setAttribute('class','current');

            }
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

5、总结

获取标签
 	通过id名获取标签    document.getElementById('')         唯一的
    通过标签名获取标签  document.getElementsByTagName('')  数组

    控制css
      获取标签.style.css样式='值'
      控制标签的html
            新增/修改:   获取标签.innerHTML='值'
            获取:        获取标签.innerHTML
      控制标签的属性
            新增/修改：   获取标签.setAttribute('k','v');
            获取：        获取标签.getAttribute('k');
            删除：        获取标签.removeAttribute('k')
        
        事件
        获取标签.on+事件类型=function(){
            执行的代码
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Day09
1、选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
            list-style: none;
        }
        ul{
            overflow: hidden;
        }
        ul li{
            float: left;
            margin-right: 10px;
            padding:2px 4px;
            /* 鼠标移入增加小手的效果 */
            cursor: pointer;
        }
        section p{
            width:200px;
            line-height: 40px;
            color:lime;
            text-align: center;
            display: none;
        }
        ul .current{
            background-color: lime;
            color:#fff;
        }
        section .current{
            display: block;
        }
        
    </style>
</head>
<body>
    <ul>
        <!-- 自定义一个标签属性 index可以自己定义 把li和p联系起来 -->
        <li class="current" >公告</li>
        <li >规则</li>
        <li >安全</li>
        <li >公益</li>
        <li >项目</li>
        <li >千牛</li>
        <!-- <li class="current" index="0">公告</li>
        <li index="1">规则</li>
        <li index="2">安全</li>
        <li index="3">公益</li>
        <li index="4">项目</li>
        <li index="5">千牛</li> -->
    </ul>
    <!-- section标签，用法和div一样，
        只是语义更重了，一般用来引入大区域的内容
    -->
    <section>
        <p class="current">公告</p>
        <p>规则</p>
        <p>安全</p>
        <p>公益</p>
        <p>项目</p>
        <p>千牛</p>
    </section>

    <script>

        // 在js中单引号和双引号使用方法一样的
        // 获取标签
        var lis=document.getElementsByTagName('li');
        var tags=document.getElementsByTagName('P');

        // 给所有的li绑定鼠标移入事件
        for(var i=0;i<lis.length;i++){
            // 自定义标签属性
            lis[i].setAttribute('index',i)
            lis[i].onmouseenter=function(){
                // 排他  遍历所有的标签变成正常
                for(var i=0;i<lis.length;i++){
                    lis[i].removeAttribute('class');
                    tags[i].removeAttribute('class');
                }
                // this代表的是当前用户操作的标签
                this.setAttribute('class','current');

                // 获取属性
                var n=this.getAttribute('index');
                tags[n].setAttribute('class','current')
            }
        }

    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

2、下拉选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
            list-style: none;
        }

        ul li{
            float: left;
            margin-right: 10px;
            margin-top: 10px;
            position: relative;
        }
        ul div{
            position: absolute;
            top:20px;
            left: 0px;
            display: none;
        }
        ul .current{
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- <ul>
        <li>
            <p>文字</p>
            <span>x</span>
        </li>
        <li>
            <p>文字</p>
            <span>x</span>
        </li>
        <li>
            <p>文字</p>
            <span>x</span>
        </li>
    </ul> -->
    <ul>
        <li>
            我的订单
        </li>
        <li>
            我的京东
            <div >
                我的京东内容
            </div>
        </li>
        <li>
            京东会员
        </li>
        <li>
            企业采购
            <div>
                企业采购内容
            </div>
        </li>
    </ul>
    <script>
        // 点击span的时候，li变色
        // var tags=document.getElementsByTagName("span");
        // for(var i=0;i<tags.length;i++){
        //     tags[i].onclick=function(){
        //         // a.parentNode 选择a的父级 是唯一的;
        //         this.parentNode.style.background='lime'
        //     }
        // }

        // 点击li的时候，span变色
        // var tags=document.getElementsByTagName("li");
        //  for(var i=0;i<tags.length;i++){
        //     tags[i].onclick=function(){
        //         // 排他 其余变成正常
        //         for(var t=0;t<tags.length;t++){
        //             tags[t].children[1].style.background='none';
        //         }
        //         // a.children 选择a的子级  得到的是一个关联数组，不能直接进行控制
        //         this.children[1].style.background='lime';
        //     }
        // }

        var tags=document.getElementsByTagName("li");
        for(var i=0;i<tags.length;i++){
            tags[i].onmouseenter=function(){
                this.children[0].setAttribute('class','current');
            }
            tags[i].onmouseleave=function(){
                this.children[0].removeAttribute('class');
            }
        }

    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

3、抽奖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="start">开始</button>
    <button id="end">结束</button>
    <h1 id="txt">开始抽奖吧</h1>
    <script>
        // setInterval(function(){执行的代码},时间ms) 每隔一段时间执行代码
        // 停止定时器 clearInterval(定时器名字)
        // Math.random()产生随机数
        var list=['张三','李四','xxx','草莓','苹果','香蕉','橘子','榴莲'];
        var start=document.getElementById('start');
        var end=document.getElementById('end');
        var txt=document.getElementById('txt');
        var timer;
        var num=0;
        // 绑定点击开始事件
        start.onclick=function(){
            // 开始之前先把上一次的定时器停止
            clearInterval(timer);
            timer=setInterval(function(){
                // 产生随机数
                var n=parseInt(Math.random()*list.length);
                // 获取数组的元素，赋值给h1
                txt.innerHTML=list[n];
            },50)
        }

        end.onclick=function(){
            // 停止定时器
            clearInterval(timer);
        }

    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

Day10
1、王者荣耀抽奖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
            list-style: none;
        }
        div{
            position: relative;
            width:320px;
            height: 320px;
            margin:100px auto;
            border:1px solid red;
        }
        div li{
            width: 100px;
            height: 100px;
            background: lime;
            position: absolute;
        }
        div button{
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
            outline: none;
            border:none;
            left:110px;
            top:110px
        }
        /* nth-of-type(n)选择到具体某一个标签 */
        li:nth-of-type(1){
            left: 0px;
            top:0px
        }
        li:nth-of-type(2){
            left: 110px;
            top:0px
        }
        li:nth-of-type(3){
            left: 220px;
            top:0px
        }
        li:nth-of-type(4){
            left: 220px;
            top:110px
        }
        li:nth-of-type(5){
            left: 220px;
            top:220px
        }
        li:nth-of-type(6){
            left: 110px;
            top:220px
        }
        li:nth-of-type(7){
            left: 0px;
            top:220px
        }
        li:nth-of-type(8){
            left: 0px;
            top:110px
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <button id="btn">抽奖</button>
    </div>


    <script>
        // 点击按钮以后，li依次变化
        // 获取标签
        var btn=document.getElementById('btn');
        var tags=document.getElementsByTagName('li');
        var num=0;
        var circle=0;
        var timer;
        // 绑定点击事件
        btn.onclick=function(){
            // 开始之前先把上一次的定时器停止
            clearInterval(timer);
            // circle重新赋值为0
            circle=0;
            // 产生随机数，随机数为了确认最终停止的位置。
            var n=parseInt(Math.random()*tags.length);
            // 每隔一段时间，看下一段的效果
            timer=setInterval(function(){
                num++;
                if(num>7){
                    num=0;
                    // 能进入该步骤，说明已经转完一圈
                    circle++
                }

                // 判断旋转的圈数
                if(circle>=5){
                    // 旋转的数据大于等于随机数，就可以停止
                    if(num>=n){
                        // 停止定时器
                        clearInterval(timer);
                    }
                }

                // 前面标签变正常
                if(num==0){
                    tags[7].style.background='lime'
                }else{
                    tags[num-1].style.background='lime'
                }
                // 对应图片有效果
                // opacity修改透明度
                tags[num].style.background='pink'
            },100)
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

2、轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
            list-style: none;
        }
        div{
            width:520px;
            height: 280px;
            margin:100px auto;
            /* 超出部分隐藏 */
            /* overflow: hidden; */
            position: relative;
        }
        ul{
            width:9999px;
        }
        ul li{
            float: left;
        }
        ol{
            position: absolute;
            bottom:20px;
            /* 绝对定位以后水平居中 */
            left: 50%;
            transform: translateX(-50%);
        }
        ol li{
            width:6px;
            height: 8px;
            margin:0px 3px;
            background: white;
            float: left;
            border-radius: 50%;
            cursor: pointer;
        }
        span{
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            background: lime;
            padding:4px;
            cursor: pointer;
        }
        #left{
            left: 0px;
        }
        #right{
            right: 0px;
        }
        .current{
            background: pink;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul id="wrap">
            <li><img src="images/pic1.jpg" alt=""></li>
            <li><img src="images/pic2.jpg" alt=""></li>
            <li><img src="images/pic3.jpg" alt=""></li>
            <li><img src="images/pic4.jpg" alt=""></li>
        </ul>
        <!-- 圆点 -->
        <ol id="circle">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <!-- 左右点击 -->
        <span id="left">左</span>
        <span id="right">右</span>
    </div>


    <script>
        var wrap=document.getElementById('wrap');
        var box=document.getElementById('box');
        var right=document.getElementById('right');
        var left=document.getElementById('left');
        // a.children选择a的子级 得到的是关联数组
        var circle=document.getElementById('circle').children;
        var num=0;
        var timer;

        function run(){
             // ul移动 transform:translateX()位移
             wrap.style.transform='translateX('+-520*num+'px)'
            // 圆点变色
            // if(num==0){
            // circle[3].removeAttribute('class')
            // }else{
            // circle[num-1].removeAttribute('class')
            // }
            for (var t=0;t<circle.length;t++){
                circle[t].removeAttribute('class');
            }
            circle[num].setAttribute('class','current')
        }
        // 把重复的代码封装
        function gogo(){
            //书写定时器，让ul移动
            timer=setInterval(function(){
                num++;
                if(num>3){
                    num=0;
                }
               run()
            },1000)

        }
        gogo()
        // 鼠标移入停止定时器
        box.onmouseenter=function(){
            clearInterval(timer);
        }

        // 鼠标移出重新执行
        box.onmouseleave=function(){
            gogo()
        }

        // 点击圆点效果
        for(var i=0;i<circle.length;i++){
            // 自定义属性
            circle[i].setAttribute('index',i)
            circle[i].onclick=function(){
                // 获取下标赋值给num
               num= this.getAttribute('index')
                run()


            }
        }

        // 点击右边按钮的效果
        right.onclick=function(){
            num++;
            if(num>3){
                num=0;
            }
            run()
        }
        // 点击左边
        left.onclick=function(){
            num--;
            if(num<0){
                num=3;
            }
            run()
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

3、标签的增加和删除

<body>
    
    <button id="btn">按钮</button>
    

    <script>
        var num=0;
        // 获取标签
        var tag=document.getElementById('btn');
        // 绑定点击事件
        tag.onclick=function(){
            // 创建标签 document.createElement('标签名字');
            var newtag=document.createElement('p');
            // 增加内容
            newtag.innerHTML='新增的内容'+(++num);
            // a.appendChild(b)把b追加到a内部的后面
            document.body.appendChild(newtag)
        }
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4、发布评论

 <body>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
    <button id="btn">发布</button>
    <ul id="box">
        <li>
            昨天天气很好
        </li>
    </ul>


    <script>
        // 实现的效果：点击发布按钮，把textarea内容发布到li内部
        // 获取标签
        var btn=document.getElementById('btn');
        var txt=document.getElementById('txt');
        var box=document.getElementById('box');
        // 给按钮绑定点击事件
        btn.onclick=function(){
            // 判断内容是否非空
            if(txt.value==''){
                alert('请输入内容')
            }else{
                // 获取表单元素的值
                var val=txt.value;
                // 创建标签
                var tag=document.createElement('li');
                tag.innerHTML=val;
                // 追加标签
                box.appendChild(tag);
                // 清空值
                txt.value='';
            }
            
        }

    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Day11
1、删除标签

<body>
    <button id="btn">按钮</button>
    <script>
        // 给button绑定点击事件
        btn.onclick=function(){
            // a.parentNode.removeChild(a)
            // this代表用户当前控制的标签1
            this.parentNode.removeChild(this)
        }
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11

2、发微博

<body>
    <textarea name="" id="txt" cols="30" rows="10"></textarea>
    <button id="send">按钮</button>
    <ul id="box">
        <li>昨天天气很好</li>
        <li>昨天天气很好</li>
        <li>昨天天气很好</li>
        <li>昨天天气很好</li>
    </ul>
    <script>
        // 绑定点击事件
        send.onclick=function(){
            // 获取表单的值
            var val=txt.value;
            // 创建标签
            var tag=document.createElement('li');
            tag.innerHTML=val;
            box.appendChild(tag);

            //  新追加的标签，绑定删除事件
            tag.onclick=function(){
                this.parentNode.removeChild(this)
            }
        }

        var tags=document.getElementsByTagName('li');
        // 遍历绑定删除事件 只能给上下文现有的li绑定点击事件，新增出来的标签不会重新绑定事件
        for(var i=0;i<tags.length;i++){
            // 给所有的li绑定点击事件
            tags[i].onclick=function(){
                this.parentNode.removeChild(this)
            }
        }
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

4、事件的另一种写法

<body>
    <!-- 通过属性的方式增加事件  on+事件类型="函数名字(this)" this代表当前的标签 触发事件以后，会执行函数 -->
    <button onclick="fn(this)" >按钮</button>

    <script>
        function fn(a){
            a.parentNode.removeChild(a)
        }
    </script>
</body>
1
2
3
4
5
6
7
8
9
10

5、全选

<body>
    <button id="btn">按钮</button>
    <input type="checkbox" id="box" checked=false>

    <script>
        btn.onclick=function(){
            // box.setAttribute("checked",false)
            box.checked=!box.checked;
        }
    </script>
</body>
<!-- 
id名唯一的，可以直接通过id名获取标签(此时取id名字的时候，需要遵循变量的命名规则) 只有id名才可以
社区方法：控制标签属性
属性的控制，社区方法和官方方法不能混合使用
增加/修改标签属性  获取标签.属性名字(如果是class需要变成className)='值'
获取属性的值       获取标签.属性名字
 -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

6、购物车的选择功能

<body>
    <button id="all">全选</button>
    <button id="r">反选</button>
    <button id="not">全不选</button>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</body>
<script>
    // 获取input标签
    var tags=document.getElementsByTagName('input')
    // 全选
    all.onclick=function(){
        for(var i=0;i<tags.length;i++){
            tags[i].checked=true;
        }
    }
    // 全不选
    not.onclick=function(){
        for(var i=0;i<tags.length;i++){
            tags[i].checked=false;
        }
    }
    // 反选
    r.onclick=function(){
        for(var i=0;i<tags.length;i++){
            tags[i].checked=!tags[i].checked;
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

7、管理系统的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
            list-style: none;

        }
        body{
            text-align: center;
        }
        table{
            /*合并边框 */
            border-collapse: collapse;
            margin:10px auto;
        }
        td{
            border:1px solid #ccc;
            width:200px;
            line-height: 30px;
            text-align: center;
        }
        .head{
            background-color: skyblue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="请输入商品名字" id="proname">
    <br><br>
    <input type="text" placeholder="请输入商品价格" id="price">
    <br><br>
    <button id="all">新增商品</button>
    <table id="box">
        <tr class="head">
            <td>选择</td>
            <td>商品名字</td>
            <td>商品价格</td>
            <td>编辑</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>手表</td>
            <td>7999</td>
            <td>删除</td>
        </tr>
    </table>


    <script>
        // 新增商品
        all.onclick=function(){
            // 获取表单元素的值
            var pn=proname.value;
            var p=price.value;
            // 创建标签
            var tr=document.createElement('tr');
            // 增加内容
            tr.innerHTML='<td><input type="checkbox"> </td><td>'+pn+'</td> <td>'+p+'</td><td>删除</td>';
            box.appendChild(tr)

        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

8、通过类名选择标签

<body>
    <button id="btn">按钮</button>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text" class="aa">
    <input type="text">
    <input type="text" class="aa">
    <input type="text" class="aa">
    <input type="text" class="aa">
    <input type="text" class="aa">
    <input type="text" class="aa">

    <script>
        // 通过类名选择标签 document.getElementsByClassName('类名') 得到的是一个关联数组，不能直接进行控制。
        var tags=document.getElementsByClassName('aa');
        btn.onclick=function(){
            for(var i=0;i<tags.length;i++){
                tags[i].style.background='lime';
            }
        }
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

9、克隆标签

<body>
    <button id="btn">按钮</button>
    <script>
        var num=0;
        btn.onclick=function(){
            // 克隆标签 a.cloneNode()克隆a  如果里面什么都不写，代表不克隆内容。也可以加true 代表克隆内容
            var tag=btn.cloneNode(true);
            tag.innerHTML='新增的'+num++
            tag.id='';
            // a.appendChild(b)把b追加到a内部的后面
            // document.body.appendChild(tag);
            // a.insertBefore(b,c);  把b追加到c同级之前 a是c的父级
            btn.parentNode.insertBefore(tag,btn);
        }
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Day12
1、发微博

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
            list-style: none;
        }
        ul,textarea,button{
            width:800px;
            margin:10px auto;
            display: block;
        }
        textarea{
            /* 去除边框 */
            outline: none;
            /* 禁止伸缩 */
            resize: none;
        }
        button{
            background: #f60;
            outline: none;
            border:none;
            line-height: 40px;
            color: #fff;
            /* 鼠标移入增加小手的效果 */
            cursor: pointer;
        }
        li{
            position: relative;
            background: #eee;
            padding:4px;
            cursor: pointer;
            margin-bottom: 4px;
        }
        li span{
            position: absolute;
            right:-4px;
            top:-4px;
            font-size: 16px;
            color: red;
        }
    </style>
</head>
<body>
    <textarea name="" placeholder="请输入内容啦" id="txt" cols="30" rows="10"></textarea><br>
    <button id="btn">发布</button>
    <ul id="wrap">
        <li>
            昨天天气很好啦
            <p>2021-09-03</p>
            <!-- 触发事件的时候，会执行del方法 -->
            <span onclick="del(this)">X</span>
        </li>
        <li>
            昨天天气很好啦
            <p>2021-09-03</p>
            <span onclick="del(this)">X</span>
        </li>
    </ul>

    <script>
        // 第一步的时候，给button绑定点击事件
        // 因为id是唯一的，所以可以直接通过id名获取标签
        btn.onclick=function(){
            // 获取表单元素的内容
            var val=txt.value;
            // 判断内容是否非空
            if(val==''){
                alert('请输入内容');
            }else{
                // 创建标签
                var tag=document.createElement('li');
                // 创建日期
                var d=new Date();
                // 给标签增加内容 常量和变量使用+拼接
                tag.innerHTML=val+'<p>'+d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+'</p><span onclick="del(this)">X</span>';
                // 追加标签 b.parentNode.insertBefore(a,b)把a追加到b同级之前
                wrap.insertBefore(tag,wrap.children[0]);
                // 增加完内容以后，需要把表单元素的值清空
                txt.value='';
            }
            
        }

        // 绑定删除事件
        function del(a){
            a.parentNode.parentNode.removeChild(a.parentNode)
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

2、商品增删

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
            list-style: none;
        }
        body{
            text-align: center;
        }
        table{
            margin:10px auto;
            
        }
        /* 属性选择器，通过属性选择标签 */
        input[type="text"]{
            width:200px;
            height: 20px;
            outline: none;
            border:1px solid skyblue;
        }
        button{
            background: skyblue;
            outline: none;
            border: none;
            height: 22px;
            color:#fff;
            padding:0px 4px;
            cursor: pointer;
           
        }
        table{
            /* 合并边框 把相邻边框合并为一条 */
            border-collapse: collapse;
        }
        td{
            border:1px solid skyblue;
            width:140px;
            text-align: center;
            line-height: 30px;
            
        }
        td input[type="text"]{
            background: none;
            outline: none;
            width:140px;
            height: 30px;
            border:none;
        }
        .head{
            background: skyblue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="请输入商品名字" id="proName1">
    <input type="text" placeholder="请输入商品的价格" id="proPrice1">
    <button id="add">新增商品</button><br><br>
    <button id="all">全选</button>
    <button id="not">全不选</button>
    <button id="r">反选</button>
    <br>
    <button id="alldel">批量删除</button>
    <table id="box">
        <tr class="head">
            <td>选择</td>
            <td>商品名字</td>
            <td>商品价格</td>
            <td>编辑</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="checks">
            </td>
            <td>
                <!-- 商品如果可以编辑，需要使用input框才可以实现 禁止输入框输入  disabled -->
                <input type="text" value="华为手机" disabled>
            </td>
            <td> <!-- 商品如果可以编辑，需要使用input框才可以实现 禁止输入框输入  disabled -->
                <input type="text" value="4999" disabled></td>
            <td onclick="edit(this)">编辑</td>

            <td onclick="del(this)">删除</td>
        </tr>
    </table>

    <script>
        // 绑定点击事件
        add.onclick=function(){
            // 获取表单元素的值
            var proName=proName1.value;
            var proPrice=proPrice1.value;
            // 创建标签
            var tag=document.createElement('tr');
            // 追加内容
            // 模板字符串 进行常量和变量的拼接  `${变量}`(反引号，英文情况1左边的键)
            tag.innerHTML=`<td>
                <input type="checkbox"  class="checks">
            </td>
            <td>
                <!-- 商品如果可以编辑，需要使用input框才可以实现 禁止输入框输入  disabled -->
                <input type="text" value="${proName}" disabled>
            </td>
            <td> <!-- 商品如果可以编辑，需要使用input框才可以实现 禁止输入框输入  disabled -->
                <input type="text" value="${proPrice}" disabled></td>
            <td onclick="edit(this)">编辑</td>
            <td onclick="del(this)">删除</td>`;
            // 追加标签 页面渲染出来自动增加了tbody标签
            box.children[0].insertBefore(tag,box.children[0].children[1])

        }

        // 书写删除事件
        function del(a){
            a.parentNode.parentNode.removeChild(a.parentNode)
        }

        // 编辑
        function edit(a){
            // 判断当前的状态
            if(a.innerHTML=='编辑'){
                // 控制是否可以编辑
                a.parentNode.children[1].children[0].removeAttribute('disabled');
                a.parentNode.children[2].children[0].removeAttribute('disabled');
                a.innerHTML='修改'
            }else{
                a.parentNode.children[1].children[0].setAttribute('disabled',true);
                a.parentNode.children[2].children[0].setAttribute('disabled',true);
                a.innerHTML='编辑'
            }
            
        }

        // 全选功能的实现
        // 获取所有的操作标签
        var tags=document.getElementsByClassName('checks');
        all.onclick=function(){
            for(var i=0;i<tags.length;i++){
                tags[i].checked=true;
            }
        }
        not.onclick=function(){
            for(var i=0;i<tags.length;i++){
                tags[i].checked=false;
            }
        }
        r.onclick=function(){
            for(var i=0;i<tags.length;i++){
                tags[i].checked=!tags[i].checked;
            }
        }

        // 批量删除
        alldel.onclick=function(){
            for(var i=0;i<tags.length;i++){
               if(tags[i].checked){
                //    索引值是动态变化的
                tags[i].parentNode.parentNode.parentNode.removeChild(tags[i].parentNode.parentNode);
                // 每次删除以后i--,重新遍历之前的位置
                 i--;
               }
            }
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174

Day13
1、window

 <body>
    <button id="btn">关闭窗口</button>
    <script>
        // setInterval()属于window下的方法
        // window.setInterval(function(){
        //     // console.log(111)
           
        // },1000)
        // // 
        // window.alert(1)

        // // 弹出确认框 点击确认返回true   点击取消或者x返回false
        // confirm('确认关闭吗')

        // 有一个按钮，点击的时候可以关闭窗口
        // 关闭窗口之前会先弹出提示框，如果用户确认，就关闭窗口。否则不关闭
        // btn.onclick=function(){
        //     // 弹出框
        //     if(confirm('确认关闭窗口吗')){
        //         // 关闭窗口
        //         window.close()
        //     }
        // }
        // 单次定时器，只执行一次就停止了
    //    var timer= window.setTimeout(function(){
    //         console.log(111)
    //     },1000)
    //     // clearTimeout(定时器名字)停止单次定时器
    //     // 每一条指令执行的时间是ns级别
    //     clearTimeout(timer)

    //     // 利用单次定时器，实现多次定时器的效果
    //     // 函数内部调用函数
    //     function fn(){
    //         setTimeout(function(){
    //             console.log(111);
    //             fn()
    //         },1000)
    //     }
    //     fn()

    // setTimeout(function(){
    //     console.log(111);
    // },1000)
    // function fn(){
    //     console.log(1111)
    // }
    var fn=function(){
        console.log(222)
    }
    // fn()
    // fn函数
    // fn()执行函数
    // setInterval(fn,1000);和原来的书写方式一样 每隔一秒钟的时间，执行函数fn的内容
    setInterval(fn(),1000) 
    //  函数后面加括号，会直接执行函数。定时器无效
    // setTimeout("fn()",1000); 如果想要书写成函数的形式，直接加引号即可 每隔一秒钟的时间，执行函数fn的内容
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

2、打开的窗口

<body>
    <!-- history.go(num)可以跳转页面 num的值可以自定义，正值返回之后的页面 负值返回之前的页面
        history.go(-1)等价于history.back()
        history.go(1)等价于history.forward()
    -->
    <button onclick="history.back()">返回到上一级</button>
</body>
1
2
3
4
5
6
7

3、history

<body>
    <button onclick="history.go(1)">返回到上一级</button>
    <a href="02打开的窗口.html">窗口</a>
</body>
1
2
3
4

4、location

 <body>
    <button onclick="location.reload()">刷新页面</button>
    <!-- js中双引号和单引号使用方法一样，但是单引号内部不能使用单引号，双引号内部不能使用双引号。自身不能嵌套自身 -->
    <!-- replace()替换页面 -->
    <button onclick="location.replace('https://www.w3cschool.cn/javascript/yji712hr.html')">页面跳转replace</button>
    <!-- assign()在历史页面新增一条记录 -->
    <button onclick="location.assign('https://www.w3cschool.cn/javascript/yji712hr.html')">页面跳转assign</button>
    <button id="btn">跳转页面</button>
    <script>
        btn.onclick=function(){
            // location.href可以修改地址 直接使用新地址赋值即可
            location.href='https://www.w3school.com.cn/js/js_htmldom.asp'
        }
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5、screen

<script>
        console.log('显示屏宽度'+screen.width);
        console.log('显示屏高度'+screen.height);
        // 可用的意思不包含导航条
        console.log('可用高度'+screen.availHeight);
        console.log('可用宽度'+screen.availWidth);
</script>
1
2
3
4
5
6
7

6、navgator

<script>
        // navigator.appName检测浏览器的名字
        console.log(navigator.appName)
        // 检测版本
        console.log(navigator.appVersion)
</script>
1
2
3
4
5
6

7、无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
            list-style: none;
        }
        div{
            width:600px;
            height: 200px;
            margin:20px auto;
            border:1px solid green;
            overflow: hidden;
        }
        ul{
            width:9999px;
            height: 200px;
        }
        ul li{
            float: left;
            width:300px;
            height: 200px;
        }
        ul li:nth-of-type(1),ul li:nth-of-type(6){
            background: pink;
        }
        ul li:nth-of-type(2),ul li:nth-of-type(7){
            background: lime;
        }
        ul li:nth-of-type(3){
            background: purple;
        }
        ul li:nth-of-type(4){
            background: orange;
        }
        ul li:nth-of-type(5){
            background: wheat;
        }
        body{
            background: green;
           
        }
        
    </style>
</head>
<body>
    <div>
        <ul id="box">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            
        </ul>
    </div>

    <script>
        var num=0;
        var timer;
        timer=setInterval(function(){
            num=num+6;
            if(num>1500){
                num=0;
            }
            // 通过在后面补图片实现无缝连接。
            box.style.transform='translateX('+-num+'px)';
        },30);
        for(var i=0;i<box.children.length;i++){
            // 鼠标移入，当前透明度变化。其余正常
            box.children[i].onmouseenter=function(){
                for(var t=0;t<box.children.length;t++){
                    box.children[t].style.opacity='1';
                }
                // opacity透明度0-1 
                this.style.opacity='0.1'
            }
            box.children[i].onmouseleave=function(){
                for(var t=0;t<box.children.length;t++){
                    box.children[t].style.opacity='1';
                }
                
            }
        }


    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97