前言
教你学会JavaScript分成四大部分：
教你完全学会JavaScript（BOM篇--更新中）
教你完全学会JavaScript（jQuery篇--等待）
目录
然后就得到了 Math.floor(Math.random() * (max - min + 1)) + min
一、JS的三种书写方式
1.行内式的js（直接写到元素的内部）
<!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>
<!-- 行内式：点击xiaoming弹出xiaohong -->
<input type="button" value="xiaoming" onclick="alert('xiaohong')">
</body>
</html>
2.内嵌式的js
<!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>
<!-- 内嵌式js -->
<script>
alert('hello')
</script>
</head>
<body>
<!-- 点击xiaoming弹出xiaohong -->
<!-- <input type="button" value="xiaoming" onclick="alert('xiaohong')"> -->
</body>
</html>
3.外部式js
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>
<!-- 内嵌式js -->
<script>
// alert('hello')
</script>
<!-- 外部js -->
<script src="js/xuexi.js"></script>
</head>
<body>
<!-- 点击xiaoming弹出xiaohong -->
<!-- <input type="button" value="xiaoming" onclick="alert('xiaohong')"> -->
</body>
</html>js文件
alert('你是风儿，我是沙子')
二、JS注释
<!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>
<script>
//1.单行注释 ctrl+/
/*
2.多行注释 shift+alt+a
*/
</script>
</head>
<body>
</body>
</html>三、JS的输入输出
<!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>
<script>
//这是一个输入框
prompt('请输入你的爱好')
// 弹出警示框
alert('你的爱好是')
// console 控制台输出 测试用的 按F12
console.log('我是能在F12的console中看到的')
</script>
</head>
<body>
</body>
</html>
四、JS的变量
1.变量：用于存放数据的容器，通过变量名获取数据。
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>
<script>
var age;//声明一个age的变量
var name;//声明一个name的变量
var hobby;//声明一个hobby的变量
var gander;//声明一个gander的变量
age=18;
name='小伦';
hobby='写代码';
gander='女';
console.log(age);
console.log(name);
console.log(hobby);
console.log(gander);
</script>
</head>
<body>
</body>
</html>
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>
<script>
var age;//声明一个age的变量
var name;//声明一个name的变量
var hobby;//声明一个hobby的变量
var gander;//声明一个gander的变量
age=18;
name='小伦';
hobby='写代码';
gander='女';
console.log(age);
console.log(name);
console.log(hobby);
console.log(gander);
// 变量的初始化
var number='12345678'
console.log(number)
</script>
</head>
<body>
</body>
</html>
4.变量案例：
弹出一个输入框，提示用户输入姓名。弹出一个对话框，输出用户刚才输入的姓名。
<!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>
<script>
//用户输入姓名存储到myname的变量
var myname=prompt('请输入你的名字：');
// 输出用户名
alert('你的名字是：'+myname);
</script>
</head>
<body>
</body>
</html>
5.变量语法扩展
<!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>
<script>
// 更新变量（小伦变小罗）
var myname='小伦';
console.log(myname);
var myname='小罗';
console.log(myname)
// 声明多个变量
var age=18,
name='小伦',
hobby='写代码',
gander='女';
// 声明变量的特殊情况
// 1.声明变量不赋值 undefinded
var number;
console.log(number);
// 2.不声明直接赋值 可以用
qq=111;
console.log(qq);
// 3.不声明不赋值会报错
console.log(address);
</script>
</head>
<body>
</body>
</html>
6.变量案例：交换两个变量
<!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>
<script>
var temp;
var apple1='苹果1';
var apple2='苹果2';
temp=apple1;
apple1=apple2;
apple2=temp;
console.log(apple1);
console.log(apple2);
</script>
</head>
<body>
</body>
</html>五、数据类型
数据类型的简介：不同的数据所需占用的存储空间是不同的。
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>
<script>
var num=10;
var PI=3.14;
// 八进制 0-7在程序数字前面加0表示八进制
var num1=010;
// 010 转换成十进制 等于 8
console.log(num1);
var num2=012;
console.log(num2);
// 十六进制 0-9 a-f
var num3=0x9;//结果是9
console.log(num3);
var num4=0xa;//结果是10
console.log(num4);
//数字型的最大值
console.log(Number.MAX_VALUE);//1.7976931348623157e+308
//数字型的最小值
console.log(Number.MIN_VALUE);//5e-324
//无穷大
console.log(Number.MAX_VALUE*2);//Infinity
//无穷小
console.log(-Number.MAX_VALUE*2);//-Infinity
//非数字
console.log('小伦'-100);//NaN
//isNaN 用来判断一个变量是否为非数字的类型，返回true或者false
console.log(isNaN('小伦'));//true
console.log(isNaN(12));//false
//字符串型String 单引号和双引号里面的都是字符串型
var str1='12';
var str2='我是爱吃"臭豆腐"的小伦';
console.log(str1);
console.log(str2);
//转义符的作用
var str3='我\'是\"爱\\吃"臭豆腐"\n的小\t伦';
console.log(str3);
// 检测获取字符串长度 length
var str='my name is andy';
console.log(str.length);
//字符串的拼接
console.log('我是'+'小伦');
console.log('小伦'+18);
console.log('小伦'+true);
console.log(12+12);
console.log('12'+12);
</script>
</head>
<body>
</body>
</html>
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>
<script>
var age=prompt('请输入你的年龄：');
var str='你今年已经'+age+'岁';
alert(str);
</script>
</head>
<body>
</body>
</html>
3. 布尔型，undefinded和null
<!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>
<script>
var flag=true;
var flag1=false;
console.log(flag+1);//true参加加法运算当成1来看 2
console.log(flag1+1);//false参加加法运算当成0来看 1
// 如果一个变量声明没赋值 就是undefinded未定义数据类型
var str;
console.log(str);
//undefinded
var variable=undefined;
console.log(variable+'hello');//undefindedhello
console.log(variable+1)//NaN undefinded和数字相加最后的结果是NaN
//null空值
var space=null;
console.log(space+'hello');//nullhello
console.log(space+1);//1
</script>
</head>
<body>
</body>
</html>
4.获取变量的数据类型
<!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>
<script>
var num=10;
console.log(typeof num);//number
var str='hello';
console.log(typeof str);//string
var flag=true;
console.log(typeof flag);//boolean
var vari=undefined;
console.log(typeof vari);//undefinded
var timer=null;
console.log(typeof timer);//object
// 举个例子
var age=prompt('请输入你的年龄');
console.log(age);
console.log(typeof age);//string
</script>
</head>
<body>
</body>
</html>
5.数据类型转换
（1）转换成字符串
（2）转换成数字型
（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>
<script>
// (1)转换成字符串
//1.toString 把数字型转换为字符串型
var num=10;
var str=num.toString();
console.log(str);
console.log(typeof str);
//2.String 把数字型转换为字符串型
console.log(String(num));
// 3.加号拼接字符串 和字符串拼接的结果都是字符串
console.log(num+'');
//（2）转换成数字型
// 1.parseInt
var age=prompt('请输入你的年龄：');
console.log(parseInt(age));
console.log(parseInt('3.14'));//取整 3
console.log(parseInt('3.94'));//取整 3
console.log(parseInt('100px'));//去掉单位 100
// 2.parseFloat把字符型转换为数字型 得到小数 浮点数
console.log(parseFloat('3.14'));//3.14
console.log(parseFloat('3.94'));//3.94
console.log(parseFloat('100px'));//去掉单位 100
//3.利用Number
var str='12';
console.log(Number(str));
// 4.利用算数运算符-*/
console.log('123'-'120');//两个字符型的转换成数字型的
</script>
</head>
<body>
</body>
</html>
（4）案例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>
<script>
var year=prompt('请输入你的出生年份：');
var age=2023-year;
alert('你今年已经'+age+'岁了');
</script>
</head>
<body>
</body>
</html>
（5）案例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>
<script>
var num1=prompt('请你输入第一个值：');
var num2=prompt('请你输入第二个值：');
// 因为上面取到的值是字符串型的，我们要把它们转换成数字型的才可以相加
var result=parseFloat(num1)+parseFloat(num2);
alert('相加的结果是:'+result);
</script>
</head>
<body>
</body>
</html>
六、JavaScript运算符
（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>
<script>
// 1.算数运算符
console.log(1+1);
console.log(1-1);
console.log(1/1);
console.log(1*1);
console.log(4%2);//0
console.log(3%5);//3
console.log(0.07+0.3);//浮点数精度有问题
// 2.表达式：是由数字、运算符、变量等组成的式子
console.log(1+1);//2就是返回值
// 3.递增和递减的运算符,(++)(--)放前面是前置运算符，放后面是后置运算符
console.log('3.前置后置运算符对比：')
//前置运算符：先自加一 然后返回值
var num1=10;
console.log(++num1 + 10);
//后置运算符：先放回原值 后自加一
var age=10;
console.log(age++ + 10);//先把原值返回10 +10，然后自加1
console.log(age);
</script>
</head>
<body>
</body>
</html>（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>
<script>
// 前置运算符
var a=10;
++a;//a=11
var b=++a + 2;//a=12
console.log(b);
//后置运算符
var c=10;
c++;//11
var d=c++ + 1;//c++=11 c=12
console.log(d); //13
var e=10;
var f=e++ + ++e;//e++=10 ++e=11 ==> 21 ==> 22
console.log(f);
</script>
</head>
<body>
</body>
</html>（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>
<script>
// 双等符号与三等运算符
console.log(18=='18');//true
console.log(18==='18');//false
</script>
</head>
<body>
</body>
</html>（4）逻辑运算符
短路运算（逻辑中断）：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值了。
<!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>
<script>
// 逻辑与短路运算:表达式1结果为真则返回表达式2
console.log(123 && 456);//除了0其他数字都是真的 456
console.log(0 && 456);//0
//逻辑或短路运算: 如果表达式1结果为真则返回表达式1;如果表达式1结果为假则返回表达式2;
console.log(123 || 456);//123
console.log(0 || 456);//456
</script>
</head>
<body>
</body>
</html>（5）运算符优先级
七、流程控制
1、分支流程控制if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 1. if 的语法结构 如果if
// if (条件表达式) {
// // 执行语句
// }
// 2. 执行思路 如果 if 里面的条件表达式结果为真 true 则执行大括号里面的 执行语句
// 如果if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码
// 3. 代码体验
if (3 < 5) {
alert('沙漠骆驼');
}
</script>
</head>
<body>
</body>
</html>2.进入网吧案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 弹出 prompt 输入框，用户输入年龄， 程序把这个值取过来保存到变量中
// 使用 if 语句来判断年龄，如果年龄大于18 就执行 if 大括号里面的输出语句
var age = prompt('请输入您的年龄:');
if (age >= 18) {
alert('go！');
}
</script>
</head>
<body>
</body>
</html>3.if else分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 1. 语法结构 if 如果 else 否则
// if (条件表达式) {
// // 执行语句1
// } else {
// // 执行语句2
// }
// 2. 执行思路 如果表达式结果为真 那么执行语句1 否则 执行语句2
// 3. 代码验证
var age = prompt('请输入您的年龄:');
if (age >= 18) {
alert('开开心心上网');
} else {
alert('滚不要来');
}
// 5. if里面的语句1 和 else 里面的语句2 最终只能有一个语句执行 2选1
// 6. else 后面直接跟大括号
</script>
</head>
<body>
</body>
</html>4.判断闰年
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 算法：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被 400 整除的就是闰年
// 弹出prompt 输入框，让用户输入年份，把这个值取过来保存到变量中
// 使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行 else里面的输出语句
// 一定要注意里面的且 && 还有或者 || 的写法，同时注意判断整除的方法是取余为 0
var year = prompt('请您输入年份：');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
alert('您输入的年份是闰年');
} else {
alert('您输入的年份是平年');
}
</script>
</head>
<body>
</body>
</html>5.if else if分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 伪代码 按照从大到小判断的思路
// 弹出prompt输入框，让用户输入分数（score），把这个值取过来保存到变量中
// 使用多分支 if else if 语句来分别判断输出不同的值
var score = prompt('请您输入分数:');
if (score >= 90) {
alert('宝贝，你是我的骄傲');
} else if (score >= 80) {
alert('宝贝，你已经很出色了');
} else if (score >= 70) {
alert('你要继续加油喽');
} else if (score >= 60) {
alert('孩子，你很危险');
} else {
alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
}
</script>
</head>
<body>
</body>
</html>6三元表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 用户输入0~59之间的一个数字
// 如果数字小于10，则在这个数字前面补0,（加0 拼接） 否则 不做操作
// 用一个变量接受这个返回值，输出
var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
// 三元表达式 表达式 ？ 表达式1 ：表达式2
var result = time < 10 ? '0' + time : time; // 把返回值赋值给一个变量
alert(result);
</script>
</head>
<body>
</body>
</html>7.switch分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 1. switch 语句也是多分支语句 也可以实现多选1
// 2. 语法结构 switch 转换、开关 case 小例子或者选项的意思
// switch (表达式) {
// case value1:
// 执行语句1;
// break;
// case value2:
// 执行语句2;
// break;
// ...
// default:
// 执行最后的语句;
// }
// 3. 执行思路 利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句 如果都没有匹配上，那么执行 default里面的语句
// 4. 代码验证
switch (8) {
case 1:
console.log('这是1');
break;
case 2:
console.log('这是2');
break;
case 3:
console.log('这是3');
break;
default:
console.log('没有匹配结果');
}
</script>
</head>
<body>
</body>
</html>8.switch的注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// switch注意事项
var num = 1;
switch (num) {
case 1:
console.log(1);
case 2:
console.log(2);
case 3:
console.log(3);
break;
}
// 1. 我们开发里面 表达式我们经常写成变量
// 2. 我们num 的值 和 case 里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1
// 3. break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case
</script>
</head>
<body>
</body>
</html>9.查询水果案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中。
// 将这个变量作为 switch 括号里面的表达式。
// case 后面的值写几个不同的水果名称，注意一定要加引号 ，因为必须是全等匹配。
// 弹出不同价格即可。同样注意每个 case 之后加上 break ，以便退出 switch 语句。
// 将 default 设置为没有此水果。
var fruit = prompt('请您输入查询的水果:');
switch (fruit) {
case '苹果':
alert('苹果的价格是 3.5/斤');
break;
case '榴莲':
alert('榴莲的价格是 35/斤');
break;
default:
alert('没有此水果');
}
</script>
</head>
<body>
</body>
</html>八、循环
（更新中）
九、Math函数
1.猜数字游戏
Math.random()给我们返回一个在0-1范围内的随机数。
但我们不想要一个随机的小数；我们想要一个任意随机数。我们可以通过我们的Math.random()的结果乘以任意数值区间得到它。举个例子，如果我们想要一个在0-10之间的随机数，我们需要乘以10，然后结果中的0.4会变成4。如果我们想要一个7-11的随机数，即(7,8,9,10,11)。
这个结果我们可以通过Math.random() * (max - min + 1)来得到它。
我们不仅仅想要一个小数，我们想要一个整数。Math.floor()用来砍掉小数后的数值，让3.14159变成了3。
这就是我们通过 Math.floor(Math.random() * (max - min + 1)).得到的。
现在我们得到了一个从0开始到我们定义的任意范围的数据。我们想要一个介于7-11的数值，但是现在只得到了0-5。为了把它变成7-10，我们只需要把任意我们得到的值加上7。7是我们的最小值。
然后就得到了 Math.floor(Math.random() * (max - min + 1)) + min
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 猜数字游戏
// 1.随机生成一个1~10 的整数 我们需要用到 Math.random() 方法。
// 2.需要一直猜到正确为止，所以需要一直循环。
// 3.while 循环更简单
// 4.核心算法：使用 if else if 多分支语句来判断大于、小于、等于。
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1, 10);
while (true) { // 死循环
var num = prompt('你来猜？ 输入1~10之间的一个数字');
if (num > random) {
alert('你猜大了');
} else if (num < random) {
alert('你猜小了');
} else {
alert('你好帅哦，猜对了');
break; // 退出整个循环结束程序
}
}
// 要求用户猜 1~50之间的一个数字 但是只有 10次猜的机会
</script>
</head>
<body>
</body>
</html>2.随机点名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 1.Math对象随机数方法 random() 返回一个随机的小数 0 =< x < 1
// 2. 这个方法里面不跟参数
// 3. 代码验证
console.log(Math.random());
// 4. 我们想要得到两个数之间的随机整数 并且 包含这2个整数
// Math.floor(Math.random() * (max - min + 1)) + min;
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));
// 5. 随机点名
var arr = ['张三', '三丰', '疯子', '小路', '小礼帽', '小猪'];
// console.log(arr[0]);
console.log(arr[getRandom(0, arr.length - 1)]);
</script>
</head>
<body>
</body>
</html>3.Math的绝对值和三个取整方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 1.绝对值方法
console.log(Math.abs(1)); // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型
console.log(Math.abs('hello')); // NaN
// 2.三个取整方法
// (1) Math.floor() 地板 向下取整 往最小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
// (2) Math.ceil() ceil 天花板 向上取整 往最大了取值
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
// (3) Math.round() 四舍五入 其他数字都是四舍五入，但是 .5 特殊 它往大了取
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.5)); // 2
console.log(Math.round(1.9)); // 2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // 这个结果是 -1
</script>
</head>
<body>
</body>
</html>4.封装自己的数字对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 利用对象封装自己的数学对象 里面有 PI 最大值和最小值
var myMath = {
PI: 3.141592653,
max: function() {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
},
min: function() {
var min = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] < min) {
min = arguments[i];
}
}
return min;
}
}
console.log(myMath.PI);
console.log(myMath.max(1, 5, 9));
console.log(myMath.min(1, 5, 9));
</script>
</head>
<body>
</body>5.Math最大值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
console.log(Math.PI); // 一个属性 圆周率
console.log(Math.max(1, 99, 3)); // 99
console.log(Math.max(-1, -10)); // -1
console.log(Math.max(1, 99, '小伦')); // NaN
console.log(Math.max()); // -Infinity
</script>
</head>
<body>
</body>
</html>十、数组
1.创建数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 创建数组的两种方式
// 1. 利用数组字面量
var arr = [1, 2, 3];
console.log(arr[0]);
// 2. 利用new Array()
// var arr1 = new Array(); // 创建了一个空的数组
// var arr1 = new Array(2); // 这个2 表示 数组的长度为 2 里面有2个空的数组元素
var arr1 = new Array(2, 3); // 等价于 [2,3] 这样写表示 里面有2个数组元素 是 2和3
console.log(arr1);
</script>
</head>
<body>
</body>
</html>2.翻转数组（♥）＋检测是否为数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 翻转数组
function reverse(arr) {
// if (arr instanceof Array) {
if (Array.isArray(arr)) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
} else {
return 'error 这个参数要求必须是数组格式 [1,2,3]'
}
}
console.log(reverse([1, 2, 3]));
console.log(reverse(1, 2, 3));
// 检测是否为数组
// (1) instanceof 运算符 它可以用来检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
// (2) Array.isArray(参数); H5新增的方法 ie9以上版本支持
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));
</script>
</head>
<body>
</body>
</html>3.添加或者是删除数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 添加删除数组元素方法
// 1. push() 在我们数组的末尾 添加一个或者多个数组元素 push 推
var arr = [1, 2, 3];
// arr.push(4, 'pink');
console.log(arr.push(4, 'pink'));
console.log(arr);
// (1) push 是可以给数组追加新的元素
// (2) push() 参数直接写 数组元素就可以了
// (3) push完毕之后，返回的结果是 新数组的长度
// (4) 原数组也会发生变化
// 2. unshift 在我们数组的开头 添加一个或者多个数组元素
console.log(arr.unshift('red', 'purple'));
console.log(arr);
// (1) unshift是可以给数组前面追加新的元素
// (2) unshift() 参数直接写 数组元素就可以了
// (3) unshift完毕之后，返回的结果是 新数组的长度
// (4) 原数组也会发生变化
// 3. pop() 它可以删除数组的最后一个元素
console.log(arr.pop());
console.log(arr);
// (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
// (2) pop() 没有参数
// (3) pop完毕之后，返回的结果是 删除的那个元素
// (4) 原数组也会发生变化
// 4. shift() 它可以删除数组的第一个元素
console.log(arr.shift());
console.log(arr);
// (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
// (2) shift() 没有参数
// (3) shift完毕之后，返回的结果是 删除的那个元素
// (4) 原数组也会发生变化
</script>
</head>
<body>
</body>
</html>4.筛选数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
// newArr[newArr.length] = arr[i];
newArr.push(arr[i]);
}
}
console.log(newArr);
</script>
</head>
<body>
</body>
</html>5.数组排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 数组排序
// 1. 翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);
// 2. 数组排序（冒泡排序）
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b) {
// return a - b; 升序的顺序排列
return b - a; // 降序的顺序排列
});
console.log(arr1);
</script>
</head>
<body>
</body>
</html>6.获取数组元素索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 返回数组元素索引号方法 indexOf(数组元素) 作用就是返回该数组元素的索引号 从前面开始查找
// 它只返回第一个满足条件的索引号
// 它如果在该数组里面找不到元素，则返回的是 -1
// var arr = ['red', 'green', 'blue', 'pink', 'blue'];
var arr = ['red', 'green', 'pink'];
console.log(arr.indexOf('blue'));//-1
// 返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找
var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.lastIndexOf('blue')); // 4
</script>
</head>
<body>
</body>
</html>
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
