JavaScript 基础一
JavaScript 基本概念
javaScript组成：ecmascript（基础语法）：规定了js基础语法核心知识 如：变量、分支、循环语句、对象等
web apls：DOM 操作文档，控制页面机进行移动、大小、添加删除等；
BOM 操作浏览器，页面弹窗、检测窗口宽度，存储数据到浏览器；
DOM属于BOM
JavaScript：运行在客户端浏览器的编程语言，实现人机交互的效果
javascript：网页特效，用户点击网页时网页所作出的反应；表单验证，针对表单的数据合法性进行判断；数据交互，获取后台数据，渲染到前端页面；服务端编程（node.js）
运行环境：
谷歌浏览器运行环境： DOM、BOM、xhr、内置对象 -> 待执行的js代码 -> v8引擎
noode.js运行环境： fs、path、其他、api、内置对象 -> 待执行的js代码 -> v8引擎
JavaScript 书写位置
JavaScript三种添加方式：内部、内联、外部
内部
<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>
alert("nihaoasdghaksjdghjas")
</script>
</head>注意：我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。
外部
<body>
<script src="./neibu.js"></script>
</body>
内联
<body>
<button onclick="alert('逗你玩')">点击我</button>
</body>
外面写双引号里面写单引号，需要注意下；
不常用，容易写错；
输入和输出语法
<body>
<!-- 输出 -->
<!-- 第一种直接写在body标签里面 -->
<script>
document.write('hhhh')
</script>
<!-- 第二种通过alert（''）里面添加 -->
<script>
alert('kongzhitaidayin');
</script>
<!-- 第三种控制输出台语法进行调试 -->
<script>
console.log('kongzhitaidayin');
</script>
<!-- 输入 -->
<script>
// 获取用户输入的文字内容
// 自定义一个变量=用户输入的内容
// （hhhh就是自定义变量）
hhhh = prompt('你的名字');
document.write(hhhh)
</script>
</body>
变量
变量的基本概念与使用
变量：就是一个容器，存放数据的；
变量是通过 let（声明关键字） 变量名； let（固定的） age；
可以同时声明多个变量，但是不允许多次使用同一个声明变量
<body>
<script>
let userName;
userName = '123';
// 注意加单引号
console.log(userName);
// 不需要等号和引号
//常用写法，控制台
let age;
age = '456';
alert(age)
//弹窗式写法
let comeFrom;
comeFrom = '789';
document.write(comeFrom);
//写在body标签里面
</script>
<script>
let num1 = '10', num2 = '20', teap;
teap = num1;
num1 = num2;
num2 = teap;
console.log(num1, num2)
//数据交换需要先设置一个空变量；
</script>
</body>
变量的本质
内存：是计算机储存数据的地方，相当于一个大盒子；
变量：则是内存（大盒子)里面的一个小盒子;
变量命名规则与规范
规则：不能使用关键字 JavaScript自身所包含的代码，开头可以使用下划线、字母或者$符号 但是不能数字开头 ，区分大小写如 Age 和 age 是不同的变量 ;
规范：遵守小驼峰命名法，ü第一个单词首字母小写，后面每个单词首字母大写。例：user Name；
数据类型
js数据分为一下两大类
基本数据类型：nubber 数字型；sting 字符串型；boolean 布尔型；undefined 未定义型；null 空类型；
引用数据类型：object 对象；function 函数；array 数组；
数字类型（number）：正数、负数、小数；
let score=100;未加引号，属于数字类型
tips（js是属于弱数据类型需要赋值才可以确认，Java属于强数据类型 必须是整数）；
字符串类型（string）：由 单引号 双引号 或者 （ ` 反引号）包裹都是字符串，推荐使用单引号；
tips（单引号或者双引号都必须成对使用，双引号或者单引号都可以互相嵌套，外双内单或外单内双）；
布尔类型（boolean）：用于表示肯定（true）或者否定（false）；
未定义类型（undefined）：只声明变量没有赋值，用于测试用户是否有数据进行反馈；
空类型（null）： null 与 undefined 的区别在于 null 表示赋值了但是内容为空 undefined 没有赋值；null空类型相当于 a 标签链接里面放入 # 只是内容还有完善；
数据转换
typeof：用于检测 声明变量是是哪个数据类型；
<body>
<script>
let age = ('18');
let number = (555);
let boolean = (true);
let agee
let ageee = (null)
console.log(typeof age)
console.log(typeof number)
console.log(typeof true)
console.log(typeof agee)
console.log(typeof ageee)
</script>
</body>
隐式转换
运算符在在运算过程中，系统会自动转换；
除了 加 以外的运算 如 减 乘 除都会自动转换成数字类型；
let number1 = +prompt('输入一个数字');
let number2 = +prompt('输入一个数字');
let total = (number1 + number2);
console.log(total);
显示转换：自己写代码告诉系统转换成那种类型；
number（数据）转成数字类型，字符串里面有非数字时 会转换失败显示NAN，但是NAN也是数字类型的一种，代表的是非数字； parselnt 保留整数 parsefloat 可以保留小数；
<script>
let age = 18
let str = (age + '')
console.log(typeof str)
let age = 18
let str = String(age)
console.log(typeof str)
let age = '18'
let str = 0 * age
console.log(typeof str)
</script>
\
JavaScript 基础二
运算符
算术运算符
算术运算符：加、减、乘、除、取余（求模）
<script>
console.log(4 % 12)
// 前面的数值小于后面的数值 输出都为前面的数值本身 =4
console.log(17 % 4)
// 输出值为 1 意思就是 4乘以4等于16与17的差值为 1
</script>
练习
<script>
let r = prompt('输入半径')
console.log(Math.PI * r * r)
</script>
赋值运算
赋值运算符：= 将等号右边的值赋予给左边, 要求左边必须是一个变量
<script>
let num = 1
num += 9
console.log(num)
let num1 = 1
num1 -= 9
console.log(num1)
let num2 = 1
num2 *= -9
console.log(num2)
let num3 = 98
num3 %= 9
console.log(num3)
//let num = 10 ， num 加5 怎么写呢？
let num=10
num += 5
输出结果为 15
</script>
一元运算符
前置自增：先自加再使用（++在前，先加）
后置自增：先使用再自加（++在后，后加）
前置自增和后置自增单独使用没有区别，合在一起使用则有区别，在写项目时后置自增i++使用比较多
<script>
let i = 1
console.log(i++ + 2) // 3
// 先运算 i+2=3
// 在运算 i++
// 输出结果为i=2
let i = 1
console.log(i++ + ++i + i)
// console.log((i++) + (++i) + i)
//第一步 i++浏览器输出结果 1 ；但是i=2 因为第二步 i+=1 浏览器不会显示
//因第一步得到 i=2 所以 i=2 赋值给 (++i)浏览器输出为 3 , i=3,赋值给最后一个 i 所以最后一个i=3
// i++ =1 ++1=3 i=3 结果为 7
</script>
比较运算符
NaN不等于任何值，包括它本身，l尽量不要比较小数，因为小数有精度问题；
不同类型之间比较会发生隐式转换：最终把数据隐式转换转成number类型再比较；开发中如果进行准确的比较 使用=== 或者！ ==
| Ø> ： 左边是否大于右边 |
|---|
| Ø<： 左边是否小于右边 |
| Ø>=： 左边是否大于或等于右边 |
| Ø<=： 左边是否小于或等于右边 |
| Ø==： 左右两边是否相等,将两边的数据进行转换为数值 |
| Ø===： 左右两边是否类型和值都相等 |
| Ø!==： 左右两边是否不全等 |
| Ø比较结果为boolean类型，即只会得到true或false |
逻辑运算符
短路运算：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行
&& 左边为false 否定时 就短路 后面的内容就不会显示，反之则相反
<script>
// 一假则假 && 左边为false 右边就不再去执行
// 工作中常见的写法
// 如果今天还下雨 那我就去吃海鲜
// 不下雨 不去吃海鲜了
// let rain = false;
// 左边成立了 右边才会去执行
// rain && console.log('下雨 去吃海鲜');
</script>
|| 左边为 true 为肯定时 就短路 后面的内容不会显示，反之则相反
<script>
// 逻辑或 一真则真
// 只要 || 左边 成立了为true，右边就不再去执行
// console.log(100 > 3 || 2 > 6 || 9 > 10 || 10 > 11 || 13 > 20);
// 工作中 常用的技巧
// 如果下雨，那么我就不玩了
let rain = false;
rain || console.log('去玩');
// 两个短路运算 逻辑或 和 逻辑与
// 工作中的语法 逻辑与来说 满足了 就去执行
// 工作中的语法 逻辑或来说 不满足了 就去执行
</script>
| 符号 | 名称 | 读法 | 特点 | 口诀 | ||
|---|---|---|---|---|---|---|
| && | 逻辑与 | 并且 | 符号两边为true结果才为 true | 一假则假 | ||
| ** | ** | 逻辑或 | 或者 | 符号两边有一个true就为true | 一真则真 | |
| ! | 逻辑非 | 取反 | true变false false变true | 真变假，假变真 |
下列数值设置成布尔类型后为 false
<script>
// 哪一些值转成 布尔类型后 false
// undefined null 0 空字符串 false NaN
console.log( Boolean(undefined) );
console.log( Boolean(null) );
console.log( Boolean(0) );
console.log( Boolean("") );
console.log( Boolean(false) );
console.log( Boolean(NaN) );
console.log( Boolean('') );
</script>
练习
能被四整除，但不能被100整除
<script>
let num = prompt('输入数字')
console.log((num % 4 === 0) && (100 % num !== 0))
</script>
语句
表达式和语句
表达式和语句的区别：表达式计算出一个值表达式 3 + 4，语句用来自行以使某件事发生(做什么事)语句 alert() 弹出对话框
分支语句
程序三大流程控制语句
顺序结构、分支结构、循环结构
//if语句
//小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
<script>
//单分支
let number = +prompt('请输入巅峰赛分数')
if (number < 2000) {
alert('人菜瘾大')
}
//双分支
let number = +prompt('请输入巅峰赛分数')
if (number < 2000) {
alert('人菜瘾大')
} else {
alert('富士康9号流水线打螺丝')
}
//多分支
let number = +prompt('请输入巅峰赛分数')
if (number < 2000) {
alert('人菜瘾大')
} else if (number < 2100) {
alert('富士康9号流水线打螺丝')
}
else if (number < 2300) {
alert('7号流水线')
} else {
alert('123456')
}
</script>
三元运算符
一般用于取值
<script>
// let num1 = +prompt('数值')
// let num2 = +prompt('数值')
// num1 > num2 ? console.log(num1) : console.log(num2)
// let num3 = +prompt('数值')
// num3 < 10 ? console.log('0' + num3) : console.log(num3)
let num4 = +prompt('数值一')
let num5 = +prompt('数值二')
let num6 = prompt('输入运算符')
if (num6 == '-') { console.log(num4 - num5) }
// console.log(num4 - num5)
// console.log(num4 / num5)
// console.log(num4 * num5)
</script>
循环结构
断点调试
浏览器打开调试界面：按F12打开开发者工具；点到sources一栏；选择代码文件
断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来
while循环
while循环是无限循环又叫死循环，满足大括号里面的条件会无限循环，只有不满足括号里面的条件才会停止循环或者设置break终止循环
循环三要素：变量初始值、终止条件、变量变化量
<script>
//死循环
let i = 1
while (i) {
document.write(`1111111111<br>`)
++i
}
let i = 1
let num = +prompt('数值')
while (i <= num) {
document.write('月薪过万<br>')
i++
}
let i = 1
let sum = 0
while (i <= 100) {
if (i % 2 === 0) {
sum += i
}
i++
}
console.log(sum)
let i
while (1) {
i = prompt('你爱我吗')
if (i == '爱') {
i !== '爱'
}
}
let sum = 0
let i = 1
while (i <= 100) {
if (i % 5 === 0) {
sum = sum + i
}
i++
}
console.log(sum)
let i = 0
while (i <= 100) {
i = i + 0
i++
console.log(i)
}
</script>
let i
let i1
let i2
let money = 1000
while (i !== 4) {
i = +prompt(`
1.存钱
2.取钱
3.查看余额
4退出功能`)
if (i == 1) {
i1 = prompt('存钱金额')
money = money + i1
}
if (i == 2) {
i2 = prompt('取款金额')
money = money - i2
}
if (i == 3) {
alert(`余额 ${money}`)
}
}
练习补充
console.log('2'>'19')
//两个字符串比较，出现两位数值的先把前面的十位数拿出来作比较 '2' > '1' 输出为 true
console.log('2'>19)
//运算符两侧一个字符串和一个数字，会先把字符串转成数字，在进行比较
\
JavaScript 基础三
循环
for循环
for循环：重复执行代码，声明起始值、循环条件、变化值都是写在一起
for循环与while循环的区别：当明确循环次数的时候使用for循环，不明确循环次数时使用while循环
<script>
for (let i = 1; i <= 100; i++) {
i = i + 1
console.log(i)
}
//一到一百的偶数求和
let sum = 0
for (let i = 0; i <= 100; i++) {
if (i % 2 === 0) {
sum = sum + i
}
}
console.log(sum)
for (let i = 1; i <= 500; i++) {
document.write(i, `这是小星星⭐<br>`)
}
</script>
退出循环
break：退出循环、跳出本次循环
continue：结束本次循环，继续下次循环
循环嵌套
嵌套循环 外循环一次,内循环全部循环一次
<script>
// 嵌套循环 外循环一次,内循环全部循环一次
// day输出1次时 i输出5次
for (let day = 1; day <= 3; day++) {
document.write(`${day}天<br>`)
for (let i = 1; i <= 5; i++) {
document.write(`${i}<br>`)
}
}
for (i = 1; i <= 5; i++) {
for (i1 = 1; i1 <= 5; i1++) {
document.write(`⭐`)
}
document.write(`<br>`)
}
// 三角形
for (i = 1; i <= 5; i++) {
for (i1 = 1; i1 <= i; i1++) {
document.write('⭐')
}
document.write('<br>')
}
// 九九乘法表
for (i = 1; i <= 9; i++) {
for (i1 = 1; i1 <= i; i1++) {
document.write(`${i1}*${i}=${i1 * i}`)
}
document.write('<br>')
}
let i = 0
for (; i <= 10; i++) {
if (i % 2 == 0) {
continue
}
console.log(i)
if (i === 7) { break }
}
console.log(i)
let num = 10
for (let i = 0; i < 10; i++) {
num++
if (i == 3) {
break
}
console.log(num)//写在里面是，先判断在输出
}
console.log(num)//写在外面是，先输出i在进行判断
</script>
\
数组
数组：按照顺序用于储存数据的数据类型，数组里面的内容叫 元素 每个内容都是有编号的又叫做 索引、下标 索引下标时从零开始的
声明语法：使用复数 如arr list 名词s items Stus
tips：数组在进行输出时直接选择 console.log 来进行输出 而不要选择 alert 和 document.write 因为这个输出会转成字符串不属于数组 不带【】中括号
<script>
let names = ['nihao', 'nihao']
console.log(names)
// 数组的遍历
let names = ['数组1', '数组2', '数组3', '数组4']
for (let i = 1; i < names.length; i++) {
console.log(names[i])
}
//console.log(names[2])
//console.log(names.length)
//数组的选择方式
</script>
数组增加
<script>
let arr = [12, 1, 522, 45]
// 在最后增加一个元素
arr.push(10)
// 在最前面增加一个元素
arr.unshift（22）
console.log(arr)
// 去除数组里面的 0 元素 并生成新的数字
let arr = [1, 8, 6, 94, , 0, 3, 55]
let num = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] > 0) {
num.push(arr[i])
}
}
console.log(num)
</script>
数组删除
<script>
let arr = [2, 37, 5, 35, 43, 85]
// 删除最后一个
arr.pop()
//删除第一个
arr.shift()
//选择删除数组的第几个
arr.splice(2)
// 第一个 1 选择索引下标为 1 的元素
// 第二个 1 删除索引下标为 1 的元素
// 并把原来索引下标为 1 的元素替换成 9999
arr.splice(1, 1, "9999")
// 第一个 2 选择索引下标为 2 的元素
// 第二个 0 表示不删除任何元素，并且元素 9999 会把 原来索引下标为 2 的元素 往后面挤
// 全程没有元素减少，只有增加元素
arr.splice(2, 0, "9999")
console.log(arr)
</script>
动态树状图案例解析
第一步
需求分析：
1、通过动态图的得到四个输入框，并且需要用户自行输入数字决定树状图柱子的高度
2、还得到每个树状图柱子有自己的样式
第二步
实现需求
1、先写静态页面并设置好样式
2、根据需要设置一个空数组，通过输入框得到用户输入的数据，配合数组增加功能，将数据添加到之前设置的空数组里面，
3、设置循环静态页面标签填入循环内
4、根据效果图进行调整
<body>
<!-- <div class="box">
<div style="height: 30px;">
<p>100</p>
<span>第一季度</span>
</div>
</div> -->
<script>
let arr = []
let htmlstr = `<div class="box">`
for (let i = 0; i < 4; i++) {
arr.push(+prompt('输入数值'))
}
for (index = 0; index < arr.length; index++) {
htmlstr += (`
<div style="height: ${arr[index]}px;">
<p> ${arr[index]}</p>
<span>第${index}季度</span>
</div>`)
}
htmlstr += `</div>`
document.write(htmlstr)
</script>
</body>
\
JavaScript 基础四
函数
函数：精简代码、提高效率、方便多次使用，函数又叫做执行特定任务的代码块
函数命名规范
1.和变量命名一致 2.使用小驼峰命名法 3.前缀应该为动词
函数不调用不会执行
<script>
// 函数声明
// 函数里面可以填写任何内容（所有循环、数组等都可以进行调用）
function hit() {
console.log('打你一下')
console.log('打你两下')
console.log('给你一jio')
}
// 函数调用次数 一个调用一次、两个调用两次
hit()
hit()
</script>
函数求奇数和
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
function sum(arr) {
let sum = 0
for (index = 0; index < arr.length; index++) {
if (arr[index] % 2 !== 0) {
sum += arr[index]
}
}
console.log(sum)
}
sum(arr)
函数传参
函数传参分为：形参和实参 在调用函数括号里面是实参 写在声明函数括号里面是形参
实参是什么形参就是什么，需要设置多个实参需用逗号隔开，且实参数据的顺序和个数需要与形参填写一致，否则输出会显示 undefined 未定义数据类型
总分求和
let arr1 = [31, 68, 350]
let arr2 = [41, 58, 15]
function sum(arr) {
let total = 0
for (index = 0; index < arr.length; index++) {
total += arr[index]
}
console.log(total);
}
sum(arr1)
sum(arr2)
函数返回值
在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
函数内部只能运行到 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写
return会立即结束当前函数
函数可以没有 return，这种情况函数默认返回值为 undefined
<script>
function getmax(a, b) {
if (a > b) {
return a
} else {
return b
}
}
console.log(getmax(2, 6))
</script>
作用域
全局作用和局部作用域=全局变量和局部变量
全局作用域写在 script 里面 所有代码都可以调用
局部作用域写在for while function 里面叫做 局部作用域 只能在自己这个区域使用不能跨区域
就近原则
JavaScript 基础五
对象
对象：是一种数据类型；无序的数据的集合，可以详细描述某个事物；
对象使用方法
属性：信息或叫特征（名词）。 比如 手机尺寸、颜色、重量等…
方法：功能或叫行为（动词）。 比如 手机打电话、发短信、玩游戏…
tips：
1.属性名和属性值之间使用英文 : 分隔
2.多个属性之间使用英文 , 分隔
3.属性就是依附在对象上的变量（外面是变量，对象内是属性）
4.属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
对象访问
对象访问属性有两种方式：点形式 对象.属性 [ ] 形式 对象[ ‘ 属性 ’ ]
两种方式的区别：点后面的属性名一定不要加引号 [ ] 里面的属性名加引号，除非它是一个变量
let goods = {
phone: '(小米)',
name: '小米10青春版',
num: 10213122,
weight: '0.55kg',
address: '中国大陆',
}
//对象加【】的方式获取里面的属性方式 中括号里面一定要加点 引号
//如果没有加引号则是 选择一个变量 若是没有这个变量则是 输出 und
document.write(`${goods['name']}${goods['address']}`)
//对象加 . 获取属性方式
console.log(`${goods.name}${goods.address}`)
let name = {
names: '你好',
age: 20,
jump: function () {
document.write('唱跳rap篮球')
}
}
console.log(`${name.jump}`)
console.log(name['age'])
操作对象
对象本质是无序的数据集合, 操作数据无非就是 增 删 改 查 语法：
有则修改，无则添加
<script>
// let person = {
// // username: '程序猿',
// };
// 增加 一个新的属性
// person.username="普通人";
// 修改
// person.username = '普通人';
// 增加属性和修改属性都是同样的写法
// 如果该属性对象中没有，表示新增
// 如果该属性对象中已经存在，表示修改
// person.username = '普通人';
// console.log(person);
// 新增方法也是可以的
let person = {};
// 新增一个方法 匿名函数 固定写法
person.sayHi = function () {
document.write('这个是我们新增的sayHi 方法');
};
person.sayHi(); // 调用方法
// 声明一个对象
let person={
username:"海贼王"
};
// 不想看了 给删除掉
delete person.username; // 删除对象中的 username属性
console.log(person.username); // undefined
</script>
\
遍历对象
对象没有像数组一样的length属性,所以无法确定长度,
对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标
遍历对象语句：for in
遍历对象中, for key in obj,获得对象属性是那个，获得值是
获得对象属性是 key
获得对象值是 obj[key]
//遍历对象 属性名和属性值获取练习
let goods = {
name: '小米',
height: 120,
windth: '60g',
hit: function () {
document.write('打电话')
}
}
for (const key in goods) {
console.log(key)
console.log(goods[key])
}
<script>
// 遍历对象案例
// let students = [ // { name: '小明', age: 18, gender: '男', hometown: '河北省' }, // { name: '小红', age: 19, gender: '女', hometown: '河南省' }, // { name: '小刚', age: 17, gender: '男', hometown: '山西省' }, // { name: '小丽', age: 18, gender: '女', hometown: '山东省' } // ]
// let htmlStr = `<table>
// <caption></caption>
// <dl>
// <tr>
// <th>序号</th>
// <th>姓名</th>
// <th>年龄</th>
// <th>性别</th>
// <th>家乡</th>
// </tr>`
// for (let index = 0; index < students.length; index++) {
// htmlStr += `
// <tr>
// <td>${index + 1}</td>
// <td>${students[index].name}</td>
// <td>${students[index].age}</td>
// <td>${students[index].gender}</td>
// <td>${students[index].hometown}</td>
// </tr>
// `
// }
// htmlStr += ` </dl>
// </table>`
// document.write(htmlStr)
let students = [ { name: '小明', age: 18, gender: '男', hometown: '河北省' }, { name: '小红', age: 19, gender: '女', hometown: '河南省' }, { name: '小刚', age: 17, gender: '男', hometown: '山西省' }, { name: '小丽', age: 18, gender: '女', hometown: '山东省' } ]
let htmlStr = `<table>
<caption></caption>
<dl>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>`
for (let index = 0; index < students.length; index++) {
htmlStr += `<tr><td>${index + 1}</td>`
for (const key in students[index]) {
htmlStr += `<td>${students[index][key]}</td>`
}
htmlStr += `</tr>`
}
htmlStr += `</dl></table>`
document.write(htmlStr)
</script>
内置对象
1.random：生成0-1之间的随机数（包含0不包括1）
2.ceil：向上取整
3.floor：向下取整
4.max：找最大数
5.min：找最小数
6.pow：幂运算
7.abs：绝对值
//ceil向上取整
//floor向下取整
let stochastic = Math.ceil((Math.random() * 10))
console.log(stochastic)
//round四舍五入
let stochastic = Math.round((Math.random() * 5) + 5)
console.log(stochastic)
//通用公式
function get(min, max) {
return Math.round(Math.random() * (max - min)) + min
}
案例
<script>
//随机点名
//let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
// function getRandom(min, max) {
// return Math.round(Math.random() * (max - min) + min);
// }
// let index = getRandom(0, arr.length - 1);
// console.log(arr[index]);
// function get(min, max) {
// return Math.round(Math.random() * (max - min)) + min
// }
// while (arr.length > 0) {
// let arrrandon = get(0, arr.length - 1)
// console.log(arr[arrrandon])
// arr.splice(arrrandon, 1)
// }
//猜大小
let Roguelike = Math.round(Math.random() * 10)
while (1) {
let num = +prompt('输入数值')
if (num > Roguelike) {
alert('大了')
} else if (num < Roguelike) {
alert('小了')
} else if (num == Roguelike) {
alert('对了')
break
}
}
</script>