一、初识JavaScript
1.1 JavaScript基本概念
1、JavaScript概述
JavaScript主要用于开发交互式的网页
2、JavaScript由来
1995，网景通信公司的创始人马克·安德森招募一名大将布兰登·艾奇，为网景导航者浏览器开发了JavaScript
3、JavaScript组成
ECMAScript、DOM、BOM三个部分组成
4、JavaScript特点
简单容易使用、可以跨平台、支持面向对象
1.2 开发工具
JavaScript的开发工具主要包括浏览器和代码编辑器，浏览器用于执行、调试JavaScript代码，代码编辑器用于代码编写
浏览器一般由渲染引擎和JavaScript引擎组成
代码编辑器 (任选其一)
Visual Studio Code编辑器
Visual Studio Code - Code Editing. Redefined
HbuilderX 编辑器
DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架
1.3 JavaScript基本使用
1、JavaScript代码引入方式
行内式
<a href="javascript:alert('Hello');">test</a>
嵌入式
<script>
javascript代码
</script>
外链式
<script src="test.js"></script>
2、常用输入输出语句
类型 语句 说明
输入 prompt() 用于浏览器中弹出输入框，用户可以输入内容
输出 alert() 用于在浏览器中弹出警告框
document.write() 用于在网页中输出内容
console.log() 用于在控制台中输出信息
confirm() 用于提示是否确认事件
3、注释
单行注释：“//”
多行注释：“/**/”
二、JavaScript基本语法
2.1 变量
2.1.1 什么是变量？
变量指的是程序在内存中申请的一块用来存放数据的空间。变量由变量名和变量值组成，通过变量名可以访问变量的值
2.1.2 变量的命名规则
命名规则
-不能以数字开头，且不能含有+、-等运算符
-严格区分大小写
-不能使用JavaScript中的关键字命名
为了提高代码的可读性
要求“见其名知其意”，使用字母、数字、下划线和美元符号来命名，采用驼峰命名方法
多学一招：常见的关键字
JavaScript中常见的关键字
break case catch class const continue
debugger default delete do else export
extends finally for function if import
in instanceof new return super switch
this throw try typeof var void
while with yield enum let ——
未来保留关键字
implements package public
interface private static
protected —— ——
2.1.3 变量的声明赋值
先声明后赋值
JavaScript中变量通常使用var关键字声明。变量声明完成后，默认值会被设定为undefined，表示未定义
//声明变量
var myName;
var age,sex;
//为变量赋值
myName = '小明';
age = 18;
sex = '男';
声明的同时并赋值
var myName = '小明';
【案例】交换两个变量的值
<script>
var leftHand = '筷子';
var rightHand = '勺子';
var temp = leftHand;
leftHand = rightHand;
rightHand = temp;
console.log(leftHand);
console.log(rightHand);
</script>
2.2 数据类型
2.2.1 数据类型分类
数据类型分类
数据类型 基本数据类型 boolean（布尔型）
number（数字型）
string（字符串型）
null（空型）
undefined（未定义型）
bigInt（大整数型）
symbol（符号型）
复杂数据类型 object（对象型）
2.2.2 常用数据类型
布尔型（boolean）
只有true（表示成功或成立）和false（表示失败或不成立）
var flag1 = true;
var flag2 = false;
数字型（number）
JavaScript中共的数字可以分为整数和浮点数，数字前面可以用“+、-”表示正、负
//整数
var bin = 0b11010; //二进制
var oct = 032; //八进制
var dec = 26; //十进制
var hex = 0x1a; //十六进制
//浮点数
//标准格式
var fnum1 = -7.26;
var fnum2 = 7.26;
//科学计数法
var fnum3 = 3.14E6;
var fnum4 = 8.96E-3;
//JavaScript中的最大值和最小值
//Number.MAX_VALUE 最大值
//Number.MIN_VALUE 最小值
字符串型（string）
JavaScript中使用单引号（''）或双引号（“”）来标注字符串
//单引号字符串
var num = ''; //空字符串
var slogan = '知识';
//双引号字符串
var total = ""; //空字符串
var str = "知识就是力量";
字符串的单引号、双引号可以嵌套使用（不推荐）
如果单引号中使用单引号，或双引号中使用双引号，需要使用"\"对单引号或双引号进行转义
//单引号中包含双引号
var color = '"red"blue'; //"red"blue
//双引号中包含单引号
var food = "'pizza'bread"; //'pizza'bread
//单引号中包含单引号
var say1 = 'I\'m...'; //I'm...
//双引号中包含双引号
var say2 = "\"Tom\""; //"Tom"
JavaScript中常用的转义字符
转义字符 含义
\' 一个单引号字符
\" 一个双引号字符
\n 换行符
\t 水平制表符
\f 换页符
\b 退格符
\xhh 由两位十六进制数字hh表示的ISO-8859-1字符。如“\x61”表示“a”
\v 垂直制表符
\r 回车符
\\ 反斜线
\0 空字符
\uhhhh 由 4位十六进制数字hhhh表示Unicode字符。如“\u597d”表示“好”
空型（null）
空型只有一个特殊的null值，表示变量未指向对象，null小写才表示空型
var a = null;
console.log(a); //null
未定义型（undefined）
未定义型只有一个特殊的值undefined，表示声明的变量还未被赋值
var a;
console.log(a); //undefined
多学一招：数字型中的特殊值
Infinity（无穷大）-Infinity（无穷小）和NaN（Not a Number ，非数字）
2.2.3 数据类型检测
JavaScript提供了typeof操作符，可以利用typeof操作符进行数据检测，typeof操作符以字符串形式返回检测结果
语法1：
typeof 需要进行数据类型检测的数据
语法2：
typeof(需要进行数据类型检测的数据)
console.log(typeof 2); //number
console.log(typeof '2'); //string
console.log(typeof true); //boolean
console.log(typeof null); //object 历史遗留问题
console.log(typeof undefined); //undefined
2.2.4 数据类型转换
数据转换为布尔型数据
使用Boolean()可以将给定数据转换为布尔型数据，转换时代表空或者否定的值（如空字符串、数字0、NaN、null和undefined）会被转换为false，其余的值会被转换为true
数据转换为数字型数据
JavaScript提供了parseInt()、parseFloat()和Number()，可以将数据转换为数字型数据
parseInt()
parseInt()会直接省略数据的小数部分，返回数据的整数部分，使用parseInt()将数据转换为数字型数据
console.log(parseInt('123.4')); //123
需要注意的是，使用parseInt()进行数据类型转换时，parseInt()会自动识别进制
console.log(parseInt('0xF'); //15
如果“0xF”省略0x开头，parseInt()将无法自动识别，此时可以通过第2个参数设置进制数，进制数的取值为2~36
console.log(parseInt('F')); //NaN
console.log(parseInt('F',16)); //15
parseFloat()
parseFloat()会将数据转换为数字型数据中的浮点数
console.log(parseFloat('123.4'); //123.4
console.log(parseFloat('3.14e-2'); //3.14
Number()
Number()用于将数据转换为数字型数据
console.log(Number('123.a'); //NaN
console.log(Number('123.4'); //123.4
不同类型数据转换为数字型数据的结果
待转换数据 parseInt()转换结果 parseFloat()转换结果 Number()转换结果
纯数字字符串 对应的数字 对应的数字 对应的数字
空字符串 NaN NaN 0
null NaN NaN 0
undefined NaN NaN NaN
false NaN NaN 0
true NaN NaN 1
数据转换为字符串型数据
JavaScript提供的String()或toString()进行转换，前者可以将任意类型数据转换为字符串型数据，后者只能将除null和undefined之外的数据类型转换为字符串型数据，toString()在进行数据类型转换时，可以通过参数设置，将数字转换为指定进制的字符串
var num1 = 12,num2 = 26;
console.log(String(num1));
console.log(num1.toString());
console.log(num2.toString(2));
2.3 运算符
2.3.1 算术运算符
JavaScript中常用的算术运算符
运算符 运算 示例 结果
+ 加 1+1 2
- 减 6-2 4
* 乘 6*6 36
/ 除 3/2 1.5
% 取模（取余） 5%7 5
** 幂运算 2**3 8
++ 自增（前置） a=2;b=++a; a=3;b=3
++ 自增（后置） a=2;b=a++; a=3;b=2
-- 自减（前置） a=2;b=--a; a=1;b=1
-- 自减（后置） a=;b=a--; a=1;b=2
注意：在进行取模运算时，运算结果的正负取决于被模数（%左边的数）的正负，与模数（%右边的数）的正负无关
· ··
多学一招 toFixed()方法
使用toFixed()方法可以规定浮点数的小数位，语法如下：
numObj.toFixed(digits)
numObj表示数字型数据或变量；digits表示小数点后数字的个数，超过该参数值会发生四舍五入，参数值介于0~20（包括20），如果忽略该参数，则默认值为0，该方法的返回值的结果是字符串
多学一招 隐式转换
JavaScript中，加号“+”可以用于字符串拼接，使用' '空字符和加号“+”连接其它数据，可以隐式转换为字符串类型，字符串通过算术运算符也可以隐式转换为数字类型
//利用隐式转换将数据转换为数字型数据
console.log('12'-0); //12
console.log('12'*1); //12
console.log('12'/1); //12
//利用隐式转换将数据转换为字符串型数据
console.log(12+''); //12
console.log(true+''); //true
console.log(null+''); //null
console.log(undefined+''); //undefined
【案例】根据用户输入的数据完成求和运算
<script>
var num1 = prompt('请输入第一个要进行运算的数据：');
var num2 = prompt('请输入第二个要进行运算的数据：');
var result = (Number(num1) + Number(num2)).toFixed(2);
if(result == 'NaN'){
alert('请输入合法的数据');
}else{
alert(result);
}
</script>
2.3.2 赋值运算符
JavaScript中常用的赋值运算符
运算符 运算 示例 结果
= 赋值 a=3,b=2; a=3;b=2;
+= 加并赋值 a=3,b=2;a+=b a=5;b=2;
字符串拼接并赋值 a='abc';a+='def'; a='abcdef';
-= 减并赋值 a=3,b=2;a-=b; a=1;b=2
*= 乘并赋值 a=3,b=2;a*=b; a=6;b=2
/= 除并赋值 a=3,b=2;a/=b; a=1.5;b=2
%= 取模并赋值 a=3,b=2;a%b; a=1;b=2
**= 幂运算并赋值 a=2;a**=3; a=8;
<<= 左移位并赋值 a=9,b=2;a<<=b; a=36;b=2;
>>= 右移位并赋值 a=-9,b=2;a>>=b; a=-3;b=2;
>>>= 无符号右移位并赋值 a=-9,b=2;a>>>=b a=1073741821;b=2
&= 按位与并赋值 a=3,b=9;a&=b; a=1;b=9;
^= 按位异或并赋值 a=3,b=9;a^=b; a=10;b=9
|= 按位或并赋值 a=3,b=9;a|=b; a=11;b=9
小提示：当“+=”运算符左右两边同为字符串型数据或有一边为字符串型数据时，将进行字符串拼接并赋值
2.3.3 比较运算符
JavaScript中常用的比较运算符
运算符 运算 示例 结果
> 大于 2>1 true
< 小于 2<1 false
>= 大于或等于 2>=1 true
<= 小于或等于 2<=1 false
== 等于 2==1 false
!= 不等于 2!=1 true
=== 全等 2===1 false
!== 不全等 2!==1 true
注意：“==”和“!=”在比较不同类型的数据时，首先会自动将要进行比较的数据转换为相同的数据类型，然后进行比较，而运算符“===”和“!==”在比较不同数据类型的数据时，不会进行数据类型的转换
2.3.4 逻辑运算符
JavaScript中常用的逻辑运算符
运算符 运算 示例 结果
&& 与 a&&b 如果a的值为true，则输出b的值；如果a的值为false，则输出a的值
|| 或 a||b 如果a的值为true，则输出a的值；如果a的值为false，则输出b的值
！ 非 a!b
若a为true，则结果为false，否则相反
注意：逻辑运算符在使用时，是按从左到右的顺序进行求值，因此运算时需要注意，可能会出现“短路”的情况。“短路”指的是，如果通过左表达式能够确定最终值，则不运算右表达式的值
2.3.5 三元运算符
三元运算符也称为三元表达式，使用问号“?”和冒号“:”两个符号来连接，根据条件表达式的值来决定问号后面的表达式和冒号后面的表达式哪个被执行，语法如下：
条件表达式 ? 表达式1 : 表达式2
var age = 18;
var status = age >= 18 ? '已成年' : '未成年';
console.log(status); //已成年
2.3.6 位运算符
位运算符用来对数据进行二进制运算，在运算时，位运算符会将参与运算的操作数视为由二进制数（0和1）组成的32位的串
位运算符
运算符 名称 说明
& 按位“与” 将操作数进行按位“与”运算，如果两个二进制位都是1，则该位的运算结果为1，否则为0
| 按位“或” 将操作数进行按位“或”运算，只要二进制位上有一个值是1，该位的运算结果为1，否则为0
~ 按位“非” 将操作数进行按位“非”运算，如果二进制位为0，则按位“非”的结果为1；如果二进制位为1，则按位非的结果为0
^ 按位“异或” 将操作数进行按位“异或”运算，如果二进制位相同，则按位“异或”的结果为0，否则为1
<< 左移 将操作数的二进制按照指定位数向左移动，运算时，右边的空位补0，左边移走的部分舍去
>> 右移 将操作数的二进制按照指定位数向右移动，运算时，左边的空位补根据原数的符号位补0或者1，原来是负数就补1，是正数就补0
>>> 无符号右移 将操作数的二进制按照指定位数向右移动，不考虑原数的正负，运算时，左边的空位补0
注意：JavaScript中的位运算仅能对数字型的数据进行运算。在对数字进行位运算之前，程序会将所有的操作数转换为二进制，然后逐位运算
例如：
使用“~15”对15进行按位“非”运算，过程如下：
~ 0000000 0000000 0000000 00001111
11111111 11111111 11111111 11111000
上述运算结果为补码，符号位（最左边的一位）是1表示负数，为了将其转换为十进制，我们需要计算其原码
11111111 11111111 11111111 11110000 补码
11111111 11111111 11111111 11101111 反码（补码减1）
10000000 00000000 00000000 00010000 原码
计算原码之后得到“~15”的结果对应的十进制数字为-16
2.3.7 运算符优先级
JavaScript中运算符的优先级
结合方向 运算符
无 ()
左 . [] new(有参数，无结合性)
右 new(无参数)
无 ++(后置) --(后置)
右 ! ~ -（负数） +（正数）++（前置）--（前置）typeof void delete
右 **
左 * / %
左 + -
左 << >> >>>
左 < <= > >= in instatnceof
左 == != === !==
左 &
左 ^
左 |
左 &&
左 ||
右 ?:
右 = += *= /= % <<= >>= >>>= &= ^= |=
左 ,
小提示：运算符优先级高低由上到下递减，同一个单元格的运算符具有相同的优先级，左结合方向表示同级运算符的执行顺序方向从左向右，右结合方向则表示同级运算符的执行顺序从右向左，小括号“()”是优先级最高的运算符，运算时，要先计算小括号内的表达式。当表达式中有多个小括号时，最内层小括号中的表达式优先级最高
【案例】计算圆的周长和面积
<script>
var r = prompt('请输入圆的半径');
r = Number(r);
var c = 2 * 3.14 * r;
var s = 3.14 * r * r;
alert('圆的周长为：' + c.toFixed(2));
alert('圆的面积为：' + s.toFixed(2));
</script>
2.5 流程控制
2.5.1 选择结构
if 语句
语法格式1：
if(条件表达式){
语句块;
}
语法格式2:
if(条件表达式){
语句块1;
}else{
语句块2;
}
语法格式3：
if(条件表达式1){
语句块1;
}else if(条件表达式2){
语句块2 }
...
else if(条件表达式n){
语句块n;
} else{
语句块n+1;
}
<script>
var score = 90;
if(score >= 90){
console.log('优秀');
}else if(score >= 80){
console.log('良好');
}else if(score >= 70){
console.log('中等');
}else if(score >= 60){
console.log('良好');
}else{
console.log('不及格');
}
</script>
switch语句
语法格式
switch(表达式){
case 常量1：
执行语句;
break;
case 常量2：
执行语句;
break;
...
default
执行语句;
break;
}
<script>
var week = 6;
switch(week){
case 1:
console.log('星期一');
break;
case 2:
console.log('星期二');
break;
case 3:
console.log('星期三');
break;
case 4:
console.log('星期四');
break;
case 5:
console.log('星期五');
break;
case 6:
console.log('星期六');
break;
case 7:
console.log('星期日');
break;
default:
console.log('请输入合法数1~7其中一个');
}
</script>
【案例】查询水果的价格
<script>
var fruit = prompt('请输入要查询的水果');
switch(fruit){
case '苹果':
alert('苹果的价格是4元/斤');
break;
case '香蕉':
alert('香蕉的价格是3元/斤');
break;
case '西瓜':
alert('西瓜的价格是2元/斤');
break;
case '葡萄':
alert('葡萄的价格是10元/斤');
break;
default:
alert('没有此水果');
}
</script>
2.5.2 循环结构
循环结构之一：while循环
1、凡是循环结构，就一定会有4个要素
①初始化条件
②循环条件 变量或表达式为boolean
③循环体
④迭代部分
2、while的格式
①
while(②){
③
④
}
执行过程：①→②→③→④→②→③→...→②
for和while可以相互转换
循环结构之一：do-while循环
1、凡是循环结构，就一定会有4个要素
①初始化条件
②循环条件 变量或表达式为boolean
③循环体
④迭代部分
2、while的格式
①
do{
③
④
}while(②);
执行过程：①→③→④→②→③→④...→②
循环结构之一：for循环
1、java中规范了3种循环结构：for、while、do-while
2、凡是循环结构，就一定会有4个要素
①初始化条件
②循环条件 变量或表达式为boolean
③循环体
④迭代部分
3、for循环的格式
for(①;②;④){
③；
}
执行过程：①→②→③→④→②→③→...→②
“无限”循环的结果的使用
1、格式：while(true)或for(;;)
嵌套循环的使用
1、嵌套循环：是指一个循环结构A的循环体是另一个循环结构B
-外层循环：循环结构A
-内层循环：循环结构B
2、说明：
①内层循环充当外层循环的循环体
②两层嵌套循环，外层循环控制行数，内层循环处理列数
③外层执行m次，内层循环执行n，内层循环的循环体执行m*n次
④实际开发基本不会出现三层循环，三层的循环结构少见
2.5.3 跳转语句
break和continue关键字的使用
使用范围 在循环结构中的作用 相同点
break： switch-case 在此关键字的后面不能声明执行语句
循环结构中 结束（或跳出）当前循环结构
continue： 循环结构中 结束（或跳出）当次循环
2、带标签的break和continue
3、开发中，break的使用频率要远高于continue
【案例】输出金字塔
<script>
var str = '';
var level = prompt('请设置金字塔的层数');
//获取输入的纯数字，其余情况皆转为NaN
level = parseInt(level) && Number(level);
//判断用户输入是否合法
if(isNaN(level)){
alert('金字塔层数必须是纯数字');
}
//循环遍历金字塔的层数
for(var i = 1;i <= level;++i){
//计算“*”前的空格并累加到str中
var blank = level - i;
for(var k = 0;k < blank; ++k){
str += ' ';
}
//计算“*”的数量并累加到str中
var star = i * 2 - 1;
for(var j = 0;j < star; ++j){
str += '*';
}
//换行
str += '\n';
}
console.log(str);
</script>
三、数组
3.1 数组基本概念
java中的数组：储存很多数据的容器，
特点：1.所有的数据的类型必须要一致
2.长度无法更改
javaScript中的数组：储存很多数据的容器，
特点：1.所有的数据的类型可以不一致
2.长度可以随意更改
数组是存储一系列值的集合，它是由一个或多个元素组成的，各元素之间使用逗号“,”分隔。
数组中的每个元素由“索引”和“值”构成。
索引：也可称为“下标”，用于识别元素，以数字表示，默认情况下从0开始依次递增。
值：元素的内容，可以是任意类型的数据。
3.2 如何创建数组
js中创建数组的两种方式：都要掌握
1.静态声明:声明数组的同时，将元素值都定下来。
var arr = [1,2,3,4,5,6,7]; //java是大括号 JS是中括号
var arr = []; //创建一个长度为0的空数组
2.动态声明：暂时只声明，赋值放到后续进行
var arr = new Array();//声明了一个空数组（长度为0）
arr[0] = 1; arr[1] = 2;
动态声明的注意事项：
写法1：var arr = new Array(); 创建了一个长度为0的空数组
写法2：var arr = new Array(10); 创建了一个长度为10的空数组
写法3：var arr = new Array(1,2,3,4,5); 创建了一个长度为0的空数组
注意事项：写法2和写法3的区分。如果括号内部只有一个数字，就表示长度，而非值
如果有若干个，才表示值
3.3 数组的基本操作
//常见的数组操作1:获取指定位置的元素 语法:arr[index] 下标从0开始
//常见的数组操作2:获取数组的长度，通过属性，xxx.length
// 注意事项:Java中获取数组长度通过方法：xxx.length()
//常见的数组操作3:遍历数组,根据for循环进行遍历
var arr = [1,2,3,"语文" , true , 22.22 , undefined , null];
// console.log(arr[5]);//获取下标为5的元素
// console.log(arr.length);
// for(var i = 0 ;i<arr.length;i++){
// console.log(arr[i]);
// }
//常见的数组操作4:随意地更改数组的长度
console.log("数组修改之前的长度为" + arr.length);
//方法1: 简单操作直接修改 ,不推荐
// arr.length = 100;
// console.log("数组修改之后的长度为" + arr.length);
//方法2:直接在数组的后面添加元素即可
arr[8] = "新元素1";
arr[9] = "新元素2";
arr[19] = "新元素3";
//修改元素
arr[0] = 111;
console.log("数组修改之后的长度为" + arr.length);
for(var i = 0 ;i<arr.length;i++){
console.log(arr[i]);
}
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")
//删除数组中指定的元素
var arr = [1,2,3,4,5];
// console.log(arr);
// delete arr[2];//准确地说法应该是: 讲指定位置的元素 修改成 empty而已 并没有实现真正的删除.
// console.log(arr);
//如何实现真正的删除: Java也好JS也好 都没有直接提供相对的方法.
//思路:创建一个新的数组,然后旧数组遍历 赋值给新数组.然后遍历的时候进行判断,如果到了那个值不想要,跳过
// var arr1 = [ ];
// var index = 0;
// for(var i = 0 ; i<arr.length;i++){
// if (arr[i]==3) {
// continue;
// }
// arr1[index] = arr[i];
// index++;
// }
// console.log(arr);
// console.log(arr1);
3.4 找出最大小值
var arr =[12,324,543,654,6,547,3,5443,534,5654,654,654,7,5,765];
//查找出最大值和最小值
var max = arr[0];
var min = arr[0];
for(var i = 0 ;i<arr.length;i++){
if( arr[i] > max ){
max = arr[i];
}
if(arr[i]<min){
min = arr[i];
}
}
console.log(max + "~~" + min);
3.5 菲波那切数列
/*
该数列又称为为兔子数列， 源自于澳大利亚的兔子衍生事件
若干年以前 一位农夫不小心弄丢了一对兔子，然后2年以后他的农场就没了
原因：兔子不仅可以公母繁殖，还可以公公 母母繁殖
兔子的繁殖能力特别强，强到什么地步 如下：
每对兔子 每第三个月都能够产下一对兔子。然后后续每个月都能产下一对兔子
问第10个月有多少对兔子：假设一开始就一对。
月份 对数
1 1
2 1
3 2 原有的一对 + 生下来的1对
4 3 原有的一对 + 生下来的2对
5 5 原有的一对 + 生下来的3对 + 最开始生下来的又生了
6 8
7 13
8 21
*/
//规律: 从第三个月开始 每个月的兔子数 = 前第1个月 + 前第2个月
//要求:显示前10对兔子的对数
var arr = new Array(10);
arr[0] = 1;
arr[1] = 1;
for(var i = 2;i<arr.length;i++){
arr[i] = arr[i-1] + arr[i-2];
}
console.log(arr)
3.6 数组排序
//数组的排序非常重要: 成绩 销量 热度 等等属性 都需要进行排序
var arr = [78,6213,5544,5432,213,654,756,767,654,876,87,69789,789,78];
//要求:从小到大排序.
//最常见的排序算法 : 冒泡排序
//相邻的两个数比较然后根据需求进行替换
//步骤1: 需要判断多少轮 arr.length-1
for(var i = 0 ; i<arr.length-1;i++){
//步骤2:比较 第i个数 和 后续的数一一比较 问题:比较多少次 arr.length-1-i
for(var j = i+1 ; j<arr.length;j++){
if(arr[i]>arr[j]){
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
console.log(arr);
3.7 二维数组
/*
javaScript中的数组：数据的类型可以不一致
也就是意味着数组里面可以再次存储数组 来实现二维甚至多维数组
一般来说掌握二维数组就够了。
二维数组：可以看成 几行几列
*/
//声明二维数组的语法:
//语法1: var arr = new Array( new Array(10) , new Array(9) , new Array(12) );
//语法2: var arr = [ [1,3] , [11,22,33] , [33,22,55] ];
/*
var arr = [
[1,2],
[2,3,4],
[4,5,6]
]
*/
//例题:如何创建一个二维数组,要求长度为100 且二维数组里面的每个数组长度也为100,暂时不知道元素内容
//写法1： 不推荐 var arr = new Array( new Array(10) , new Array(10) , new Array(10) , ... ,new Array(10) );
//写法2:
// var arr = new Array(100);//仅仅是一个一维数组
// for(var i = 0 ; i<100;i++){
// arr[i] = new Array(100);
// }
// console.log(arr);
//遍历二维数组思路: 先将二维数组看成一维数组
// var arr = [ [1,2,3,4] , [5,6,7,8] , [11,22,33,44] ];
// //如何遍历
// //1.先遍历总长度
// for(var i = 0 ; i<arr.length ; i++){
// //2.在遍历数组里面的数组
// for(var j = 0 ; j<arr[i].length ; j++){
// console.log(arr[i][j]);
// }
// }
// //如何获取二维数组中指定的数
// var index = arr[1][2] ; //7
// var index = arr[2][1] ; //22
//利用二维数组实现杨辉三角 姓名为杨辉吃饱了没事做,发明的一个三角形
//将杨辉三角的前10行打印在页面上.
/*
1
1 1
1 2 1
1 3 3 1
1 4 6 4 1
1 5 10 10 5 1
1 6 15 20 15 6 1
*/
//思路:1.找规律 几行几列的三角形 10行 和 "和行数相等的" 列
//第几行就有几列
//转换成二维数组,我们应该创建一个 长度为10的二维数组 ,然后数组里面的长度随之改变
var arr = new Array(10);
for(var i = 0;i<arr.length;i++){
arr[i] = new Array(i+1);
}
//以上就声明了一个可以容纳的容器
//赋值:
for(var i = 0 ; i<arr.length;i++){//i行数
for(var j = 0 ; j<arr[i].length ; j++){//j列数
if( j==0 || j==i ){
arr[i][j] = 1;
}else{
arr[i][j] = arr[i-1][j] + arr[i-1][j-1];
}
}
}
//以上知识点 均没有实际意义,单纯就是提升自己思维能力.解决问题的能力
for(var i = 0 ; i<arr.length;i++){
for(var j = 0 ; j<arr[i].length ; j++){
document.write(arr[i][j] + " ");
}
document.write("<br>");
}
四、函数
4.1 函数的相关概念
/*
JavaScript的函数理解为Java里面的方法，
把一些经常复用的代码，抽取出来封装在一个函数中。
提高程序的可读性，减少开发者的工作量，便于后期的维护。
Java中的方法的语法：
public 返回类型 方法名(数据类型 变量名 , 数据类型 变量 ...){
}
js中函数的分类：
A.内置函数（JS提供的）: console.log(); alert() confirm parseInt... ：
B.自定义函数（程序员自己写的）
其中自定义函数的声明语法如下：
function 方法名(变量名，变量名...){
}
调用： 方法名(参数列表);
函数定义与调用的编写顺序不分前后。
你可以先调用函数，再声明函数
*/
//声明一个无参函数
function a1(){
console.log(123);
}
a1();
//声明一个指定个数的有参函数
function a2(a,b,c){
console.log(a+b+c);
}
a2(1,2,3);
//声明一个若干个数的有参函数
function a3(... a){
for(var i = 0 ; i<a.length ; i++){
console.log(a[i]);
}
}
a3(1,1.1,true,undefined,null,"你好");
//有返回值的函数
function a4(a,b){
return a + b;
}
var sum = a4(10,20);
alert(sum)
4.2 变量的作用域
/*
和Java一样 JS的变量也分为局部变量和全局变量（Java的叫法是成员变量，只是概念和全局类似）
*/
function info() {
var age = 18;
}
info();
console.log(age);
//思考以上代码的执行结果是什么
//A.18 B.报错 C.null D.undefined
//答案:B 提示:age is not defined 表示未定义
//原因如下:age是在函数里面定义的理解为局部变量.但是console.log是在函数外调用的.
/*
全局变量：在所有函数之外声明（script标签内部的最开始几行），它的作用域称为全局作用域，在同一个页面文件中的所有脚本内都可以使用。
局部变量：在函数体内利用var关键字声明的变量称为局部变量，仅在该函数体内有效。
*/
4.3 函数进阶
//以下知识点掌握即可:用的很少,但是看到了需要知道意思.
//函数的声明 一般就是上面两个知识点即可.就是利用function声明
//不仅有函数 还有一个叫做函数表达式的东西
//函数表达式指的是将函数赋值给变量的表达式，
// 通过“变量名()”的方式即可完成函数的调用，小括号“()”内可以传入参数，示例代码如下。
//函数的写法:
function a1(a){
console.log("我被调用了。参数是" + a)
}
a1(123);
//函数表达式的写法:
var abc = function (a){
console.log("我被调用了。参数是" + a)
};
abc(567);
4.4 匿名函数
// 匿名函数自调用:HTML页面解析之后 自动执行的一段代码.只会执行一次.
//例如跳转网页之后提示:登录成功 加载成功
//语法如下:
// (function(){
// alert("登录成功！！！");
// })();
//下面是函数叫做a的函数
function a(){
alert(123);
}
//匿名函数指的就是:没有函数名的函数 但是又拥有了变量名
var a = function(){
alert(456);
}
4.5 箭头函数
//箭头函数了解即可:和函数表达式一样 比较鸡肋, 但是需要能看懂它.
//以下3个函数的实际意义完全一样.
function sum(a,b){
return a + b;
}
var fn = (a, b) => a + b;
var fn = (a,b) => {
return a + b;
};
4.6 递归函数
//递归函数:了解即可. 函数的内部调用自己函数本身.
//优点:代码简化. 缺点:难得想
//例如声明一个函数 求1-N的和
function sum(n){
var sum = 0;
for(var i = 1 ;i<=n;i++){
sum = sum + i;
}
return sum;
}
var i = sum(100);
alert(i);
//递归的核心1:鸿沟(临界值)
function sumDg(n){
if(n==1){
return 1
}else{
return n + sumDg(n-1);
}
}
alert(sumDg(100));
//案例:求菲不拉切序列 1 1 2 3 5 8 13 21
//求第N项值
function dg(n){
if(n==1 || n == 2){
return 1;
}else{
return dg(n-1) + dg(n-2);
}
}
五、对象
5.1 对象的概念
/*
在JavaScript中，对象属于复杂数据类型，
它是由属性和方法组成的一个对象。
属性是指对象的特征。
方法是指对象的行为。
下面以学生的特征和行为为例进行说明。
学生的特征：姓名、年龄和性别，这些特征可以用对象的属性来表示。
学生的行为：打招呼、唱歌、写作业，这些行为可以用对象的方法来表示。
*/
//将10个学生的成绩输出在页面上。
var arr = [1,2,32,543,65,35,35,654,46,31];
for(var i = 0 ;i<arr.length;i++){
if(i==arr.length-1){
document.write(arr[i] );
}else{
document.write(arr[i] + ',');
}
}
document.write("<hr>");
//将10个学生的全部信息(id name age sex)输出在页面上。
//传统的思路:定义40个变量 或者4个数组 或者二维数组等等
//按照对象的思想:10个学生理解10个对象 将10个对象放在一个数组里面即可
var s1 = {id:1001,name:"张三1" , age:18};
var s2 = {id:1002,name:"张三2" , age:18};
var s3 = {id:1003,name:"张三3" , age:18};
var s4 = {id:1004,name:"张三4" , age:18};
var s5 = {id:1005,name:"张三5" , age:18};
var s6 = {id:1006,name:"张三76" , age:18};
var s7 = {id:1007,name:"张三7" , age:18};
var s8 = {id:1008,name:"张三8" , age:18};
var s9 = {id:1008,name:"张三9" , age:18};
var s10 = {
id :10010,
name:"张三",
age:20,
};
var arr = [s1,s2,s3,s4,s5,s6,s7,s8,s9,s10];
// for(var i = 0 ;i<arr.length;i++){
// if(i==arr.length-1){
// document.write(arr[i] );
// }else{
// document.write(arr[i] + ',');
// }
// }
//注意:上述写法 打印的仅仅是外观的Object而非内部的属性。
// for(var i = 0 ;i<arr.length;i++){
// if(i==arr.length-1){
// document.write(arr[i].id + arr[i].name + arr[i].age +"<br>");
// }else{
// document.write(arr[i].id + arr[i].name + arr[i].age +"<br>");
// }
// }
//以上写法较为麻烦
for(var i = 0 ;i<arr.length;i++){
for(var sx in arr[i]){
document.write(arr[i][sx]);
}
document.write("<br>")
}
5.2 创建对象
//判断一个变量是否为对象的小技巧:通过console.log打印.
//如果打印的是一行字符串 就说明是基本数据类型
//如果打印的是一个可以折叠的数据 就表示对象
// var a = 11;
// console.log(a);
// var arr = [1,2,3,4];
// console.log(arr);
/*
如何创建一个JS的对象：
方法1：使用对象的字面量创建对象（理解为直接赋值）
例如：var arr = [1,2,3];，//静态声明数组 字面量创建
就是用大括号“{}”来标注对象成员，
每个对象成员使用键值对的形式保存，即 “key: value”的形式。
多个成员通过逗号隔开
键指的就是独一无二的属性
*/
// var student1 = { 'id' :1001 ,name:"张三" , age : 18 , 'sex-sex' : '男' } ;
// //其中键可以选择性的加引号
// console.log(student1);
// //如何访问对象里面的值的方法1: 通过对象名.属性名即可
// console.log(student1.id + "~" + student1.name + "~" + student1.age );
// //如果存在一些命名不规范的变量 无法通过对象名.属性名访问
// // console.log(student1.sex-sex);这行代码是报错的
// //访问对象里面的值的方法2:通过对象名[属性名]
// console.log(student1['sex-sex']);
// console.log(student1['name']);
//创建对象的补充:如果一开始只知道有对象,但是不知道它有什么属性或属性值,
//那么可以先创建一个空对象壳子
// var s123 = {};
// //后续再声明属性的同时进行赋值
// s123.id = 123;
// s123.name = "Lisi";
// s123.age = "男";
// console.log(s123.id);//123
// console.log(s123.dasd);//undefined
//创建对象的方法2:
//第一步:创建对象的函数(想象成Java的构造函数)
// function Person(id,name,age){
// this.id = id;
// this.name = name;
// this.age = age;
// }
// //第二步:new对象
// var p1 = new Person(123,"王五" , 20);
// console.log(p1);
//使用场景:如果对象很多 就用方法2 反之方法1
//补充:对象由:属性和方法
// var s1 = {
// id :11,
// name:"张三",
// age :18,
// study : function(){
// alert("成功调用了这个对象的这个方法");
// }
// };
// alert(s1.id);
// s1.study();
function Person(id,name,age){
this.id = id;
this.name = name;
this.age = age;
this.eat = function(){
alert("我吃拉面");
}
}
//第二步:new对象
var p1 = new Person(123,"王五" , 20);
p1.eat();
//创建对象的方法3:
//如果谁不知道给对象取什么名字,就叫做Object
var o = new Object();
o.id=1231;
o.name="李四";
console.log(o);
5.3 如何遍历一个对象
// var arr = [1,2,4,3];// console.log(arr);
var s10 = {
id :10010,
name:"张三",
age:20,
sex:'男',
height : 188,
weight :200
};
// console.log(s10);
//由于直接输出s10将只会显示object我们需要内部的属性值/
//方法1:如果只需要某一个属性值, 直接通过s10.属性名即可
//方法2:如果所有的属性值都需要,那么也可以通过s10.属性名 只是比较麻烦.
//学习:如何遍历对象:语法如下:
// for(var i = 0;i<a10.length;i++){
// //错误的写法:1.对象的键并不是012 其次对象并没有长度
// }
//i表示对象的下标(属性) s10表示遍历的对象
for(var i in s10){
console.log(s10[i]);
}
5.4 值对象和引用对象
//JS的参数传递 也分为值传递和引用传递var a = 111;
var b = "你好";
var c = true;
var d = [1,2,3];
function change(a,b,c,d){
a = 222;
b = "我好";
c = false;
d[0] = 123;
}
change(a,b,c,d);
console.log(a);//111
console.log(b);//你好
console.log(c);//true
console.log(d[0]);//123
5.5 Math对象
// Math对象的用法和Java中Math对象的用法几乎一致。// 唯一不同的就是 Java的数据类型分为int double等 但是js里面只有number
//第一个 Math.min(a,b,c,d,...);获取最小的值
// alert(Math.min(2,534,32,43,76,86));
// //第二个 Math.max(a,b,c,d,...);//获取最大值
// alert(Math.min(2,534,32,43,76,86));
//第三个:Math.ceil(a); 向上取整 舍去小数点 (但是Java是保留的)
// alert(Math.ceil(11.1));
//第四个:Math.floor(a); 向下取整 舍去小数点 (但是Java是保留的)
// alert(Math.floor(11.1));
//第五个 Math.round(x);四舍五入 如果是临界值都是往高的入
// alert(Math.round(1.5) + "~" + Math.round(-1.5));
//第六个:Math.random();返回一个随机数 范围 0~1 官方概念:可以取0但是不能取1 但是实际场景可以忽略0
// alert(Math.random());
5.6 猜数字案例
/*猜数字游戏:
无限通过promot弹窗来让用户输入数字
要求：1-100的随机数
*/
var r = Math.ceil(Math.random()*100);
var min = 1;
var max = 100;
var n = 0;//计数
while(true){//不知道用户要输入多少次
var userR = prompt("请输入你的数字，当前范围为" + min +"~" + max);
userR = parseInt(userR);
if( ! (userR>=min && userR<=max) ){
alert("你输入的数有误！");
continue;
}
n++;
//注意:prompt接受的值 都是string类型, 虽然string类型如果做数字运算会自动转成number 但是不推荐
if(userR==r){
alert("恭喜你才对了，一共猜了" + n + "次");
break;
}else if(userR>r){
max = userR;
alert("你猜大了,当前范围为" + min +"~" + max);
}else {
min = userR;
alert("你猜小了,当前范围为" + min +"~" + max);
}
}
5.7 模拟猜拳案例
//如何实现简化版AI猜拳/*
石头 剪刀 布
*/
var arr = ["石头" , "剪刀" , "布"];
//只需要利用随机数生成0-2的随机数 然后AI就拿到arr[rrr]
var ran =Math.floor(Math.random()*3 );
var r = arr[ran];//模拟AI出的选项
var userR = prompt("请输入:'石头'，'剪刀' , '布'");
//省略数据校验,假设用户一定会按规矩输入
if(r==userR){
alert("平了，你和AI都出的" + userR);
}else if( ( userR=="石头" && r=="剪刀" ) || ( userR=="剪刀" && r=="布" ) || ( userR=="布" && r=="石头" ) ){
alert("你赢了,你出的是" + userR + ",AI出的是" + r);
}else{
alert("你输了,你出的是" + userR + ",AI出的是" + r);
}
5.8 date对象
//区分date表示日期和data表示数据
//date对象创建的2种方式：
// //第一种 不放任何参数 表示获取当前时间
// var d = new Date();
// console.log(d);
//第二种方式:放若干个数字,分别表示年月日 时分秒 按照顺序 其中月份比较特殊 0表示1月
// var d = new Date(2020,11,11);//表示2020年12月11日 0点0分0秒
//date对象的常见方法:
var d = new Date(2020,11,11,12,6,33);;//表示2020年12月11日 0点0分0秒
console.log(d.getFullYear());//获取年份
console.log(d.getMonth() + 1);//获取月份 注意0表示1
console.log(d.getDate());//获取日期
console.log(d.getHours());//获取小时
console.log(d.getMinutes() );//获取分钟
console.log(d.getSeconds() );//获取秒
console.log(d.toLocaleString());//返回当前日期的字符串格式
console.log(d.getTime());//返回从1970年1月1日0时0分0秒 到指定时刻的毫秒数
5.9 倒计时案例
//计算当前时刻距离2024年1月1日0时 还差多少时间
var d1 = new Date();
var d2 = new Date(2024,0,1);
var sjc = d2.getTime() - d1.getTime(); //计算出两个时间节点的相差毫秒数
sjc = parseInt(sjc / 1000);//得到是 两者的秒数
var s = sjc%60;
var m = parseInt(sjc/60%60);
var h = parseInt(sjc/60/60%24);
var day = parseInt(sjc/60/60/24);
document.write("距离倒计时还剩下" + day +"天 " + h +"时" + m +"分" + s + "秒");
5.10 array对象
//array对象 之前学过一遍了。// var arr = [];
// arr.push("aa");//表示奖元素添加到数组的尾部
// console.log(arr);
// var arr = ['张三','分','阿萨德三','类似'];
// var str =arr.toString();//默认以,分割
// console.log(str);
// var str = arr.join(":");
// console.log(str);
//适用常见: 用户选择自己的爱好框
//数组的去重:
var arr = [12,543,654,,432,12,3,342,53,543,6,546,54,675,756,7,3,5,3456,46,54,654,756,42,34,234,23];
// //要求数组中重复的数字去掉.
console.log(arr.length + "这是原有的长度");
var newArr = [];
for(var i = 0 ;i<arr.length;i++){
if(newArr.indexOf(arr[i]) == -1){
newArr.push(arr[i]);
}
}
console.log(newArr);
5.11 string对象
//JS中的String对象的方法和Java几乎完全一致.// 判断输入的账号是否合法
// 要求：长度8-18位。必须以yyzy开头。账号的最后6位必须是纯数字组成。
var str = "yyzysaf111111";
// console.log(str.substring(str.length-6,str.length));
// console.log(Number(str.substring(str.length-6,str.length))) ;
var b = panduan(str);
alert(b);
function panduan(str){
if( !(str.length>=8 && str.length<=18) ){
alert("长度不符合条件");
return false;
}
if( ! str.startsWith("yyzy") ){
alert("不是以yyzy开头");
return false;
}
//思路:如何判断后6位是否为纯数字
//步骤1: 取出后6位 思路 通过subString(a,b);截取
//其中b是定死了 就是str.length 其中a=str.length-6
if(Number(str.substring(str.length-6,str.length))+"" =="NaN"){
alert("后6位不是纯数字");
return false;
}
return true;
}
六、DOM文档对象模型
6.1 dom简介
什么是API？应用程序编程接口（Application Programming Interface，API）是软件系统预先定义的接口，
用于软件系统不同组成部分的衔接。每一种开发语言都有自己的API。
例如console.log方法。就是JS的一个API。
文档对象模型（Document Object Model，DOM）用于处理HTML文档的编程接口。
翻译：对HTML内部的标签进行处理。
6.2 如何通过dom获取
<h3 id="c" name="b">我是h3标签</h3><h3 class="a">我是h3标签</h3>
<h3 class="a">我是h3标签</h3>
<p name="b" class="a">我是p标签</p>
<script>
//通过DOM节点获取HTML元素的4种方法 每种方法都要掌握.非常相似.
//方法1:通过标签名获取元素
var a = document.getElementsByTagName("h3");
//此时就已经获取到了页面上所有的h3标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
//至于怎么去处理,就是后续的任务.
//方法2:通过class名获取元素
var b = document.getElementsByClassName("a");
//此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
//方法3:通过name获取元素
var c = document.getElementsByName("b");
//此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
//方法4:通过id获取元素 因为id是唯一标识符 所以返回的是一个元素,可以直接处理
var d = document.getElementById("c");
</script>
6.3 如何操作结点
<h3 id="c" name="b">我是h3标签</h3>
<h3 class="a">我是h3标签1<a href="#">你好</a> </h3>
<input type="text" id="abc" value="739737680" />
<script>
/*
常见的操作节点的三个属性：
1.innerText表示给标签内部重新赋值或取值 这里是文本值
2.innerHtml表示给标签内部重新赋值或取值 这里是html值
注意以上2个方法只能作用于 非表单元素 例如 h标签 a标签 p标签等等
//第三个方法只能作用于表单元素
例如input
方法3： value表示给标签内部重新赋值或取值 这里是html值
*/
// var a = document.getElementsByTagName("h3");
// for(var i = 0 ;i<a.length;i++){
// console.log(a[i].innerText);//表示获取各个h3标签内部的文本值
// a[i].innerHTML = "<a href='#'>你好</a>";
// }
// var b = document.getElementsByClassName("a");
// for(var i = 0 ;i<b.length;i++){
// console.log(b[i].innerHTML);//表示获取各个h3标签内部的文本值
// }
var d = document.getElementById("abc");
// d.value = "账号123";
console.log(d.value);
</script>
6.4 如何操作结点的样式
<p id="abc" >你好，我是p标签</p>
<script>
var p = document.getElementById("abc");
//如何改变一个节点的样式:
//步骤1.思考需要修改什么样式
//步骤2.去css里面查看该样式的单词
//步骤3.按照提示来
//步骤4.通过 节点.style.xxx 表示取值或赋值
//例如我要修改字体颜色
// p.style.color = "red";
// console.log(p.style.color)
//例如我要修改背景色
// p.style.backgroundColor = "green"
//以上写法的缺点: 麻烦 每次只能修改一个样式
//所以: 如果样式很多,我们可以先将其封装到一个css里面
p.className = "abcd";//表示给该元素 赋予一个class为abcd的属性
</script>
6.5 js中的事件管理
<p id="a">你好</p><p>你好</p>
<p>你好</p>
<p>你好</p>
<hr>
<img src="img/1.PNG" />
<hr>
账号：<input type="text" id="aaa" /> <span id="bbb"></span> <!--提示用语 -->
<script>
//js中的事件: 用户对前台页面做出的一些操作 来触发一些函数
//例如用户的单击 双击 等等等等
//需求:用户点击id为a的元素 弹出一个窗口
//步骤1:获取元素
// 步骤2: 元素.事件名 = function(){代码体}
//步骤3 常见的事件名:
//单击事件 onclick
// document.getElementById("a").onclick = function(){
// alert(123);
// }
// //需求2:给所有的p标签加上点击事件 下面的写法是错误的 需要遍历
// // document.getElementsByTagName("p");.onclick = function(){
// // alert(123);
// // }
// var p = document.getElementsByTagName("p");
// for(var i = 0 ;i<p.length;i++){
// p[i].onclick = function(){
// alert(456);
// }
// }
//双击事件
// document.getElementById("a").ondblclick = function(){
// alert(123);
// }
//鼠标移入事件 悬浮事件
//需求:鼠标放上图片 图片就放大2倍 鼠标移出就恢复原状
//鼠标移入事件onmouseover
// document.getElementsByTagName("img")[0].onmouseover = function(){
// document.getElementsByTagName("img")[0].style.width = "400px";
// document.getElementsByTagName("img")[0].style.height = "400px";
// }
// //鼠标移出事件onmouseout
// document.getElementsByTagName("img")[0].onmouseout = function(){
// document.getElementsByTagName("img")[0].style.width = "200px";
// document.getElementsByTagName("img")[0].style.height = "200px";
// }
//输入账号,失去焦点就需要数据校验
document.getElementById("aaa").onblur = function(){
var str = document.getElementById("aaa").value;
if(str.length >10){
document.getElementById("bbb").innerText = "长度太长了";
document.getElementById("bbb").style.color = "red";
}else{
document.getElementById("bbb").innerText = "数据合格";
document.getElementById("bbb").style.color = "green";
}
}
</script>
6.6 js的属性
<a id="a" href="1_dom简介.html">进入1页面</a>
<button id="abc">按钮</button>
<img id="b" src="img/1.PNG" />
<h3></h3>
<button id="btn">开始点名</button>
<script>
//js获取元素的属性：
//元素的常见属性: id class src href
//需求:点击按钮 让这个a标签的href改成跳转到第二个页面
//需求 点击按钮,进入下一张图片
document.getElementById("abc").onclick = function(){
document.getElementById("a").setAttribute("href" , "2_如何通过DOM获取元素节点.html");
document.getElementById('b').setAttribute("src","img/2.PNG");
}
//点击开始点名按钮 来回切换
document.getElementById("btn").onclick = function(){
if(document.getElementById("btn").innerText=="开始点名"){
document.getElementById("btn").innerText = "停止点名"
}else{
document.getElementById("btn").innerText = "开始点名"
}
}
</script>
6.7 迷你版点名系统
<font id="1">张三1</font><font id="2">张三2</font>
<font id="3">张三3</font>
<font id="4">张三4</font>
<font id="5">张三5</font>
<hr>
<button id="btn">开始点名</button>
<script>
document.getElementById("btn").onclick = function(){
if(document.getElementById("btn").innerText=="开始点名"){
document.getElementById("btn").innerText = "停止点名"
//让5个名字对应的font标签的背景色改变
var r =Math.ceil(Math.random()*5);//(0,5)
document.getElementById(r).style.backgroundColor = "red";
}else{
document.getElementById("btn").innerText = "开始点名"
}
}
————————————————
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
