JavaScript3
JavaScript3
大纲
JS - Math对象
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS - Math对象</title>
</head>
<body>
<script>
// abs 绝对值
var a = -5.58;
console.log(Math.abs(a)); // 5.58
// round 取整 四舍五入
console.log(Math.round(a)); // -6
// ceil 向上 取整
console.log(Math.ceil(a)); // -5
// floor 向下 取整
console.log(Math.floor(a)); // -6
// max 最大数
console.log(Math.max(1,6,9,5,3,8)); // 9
// min 最小值
console.log(Math.min(1,6,9,5,3,8)); // 1
// random() 随机数 默认0-1的小数
console.log(Math.random()); // 0.85510 每次刷新都不一样
// Math.random()*10 变个位数的小数
console.log(Math.random()*10); // 7.01628 每次刷新都不一样
// Math.floor 变成一个整数
console.log(Math.floor(Math.random()*10)); // 7 每次刷新都不一样
// toFixed(2) 保留两位小数
console.log(Math.random().toFixed(2)); // 0.90 每次刷新都不一样
</script>
</body>
</html>
JS - 日期对象
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS - date对象</title>
</head>
<body>
<script>
var data = new Date;
// getFullYear 获取年
var year = data.getFullYear();
console.log(year); // 2022
// getMouth 获取月 月份要加1才是北京时间
var mouth = data.getMonth()+1;
console.log(mouth); // 5
// getDate 获取日
var da = data.getDate();
console.log(da); // 5
// getDay 获取周几
var week = data.getDay();
console.log(week); // 4
// getHours 获取小时
var hou = data.getHours();
console.log(hou); // 16
// getMinutes 获取分钟
var mi = data.getMinutes();
console.log(mi); // 57
// getSeconds 获取秒数
var mao = data.getSeconds();
console.log(mao); // 21
// Date.now 时间戳 距离格林威治时间（1970年1月1日00点）多久
var no = Date.now();
console.log(no); // 1651741164814 秒数
// 当秒数小于10的时候，前面加个0，方便对齐
if (mao<10){
mao = "0" + mao;
</script>
</body>
</html>
JS - 函数
含义：通常是把一系列重复使用的操作封装成一个方法，方便调用
定义：function funName( ){ }
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS - 函数</title>
<style>
div{
width: 100px;
height: 100px;
background-color: gold;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<script>
var box1 = document.getElementsByTagName("div")[0];
var box2 = document.getElementsByTagName("div")[1];
// 定义函数 函数调用可以在定义函数的上方，或者下方，调用的时候不加括号也可以
// 格式：function 函数名 (参数) {代码}
function func(){
// 弹出警示框
alert("今天天气很好，适合外出旅行！")
}
// 通过点击事件 调用函数
box1.onclick = func;
box2.onclick = func;
</script>
</body>
</html>
JS - 函数参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS - 函数参数</title>
</head>
<body>
<script>
function func(x){
alert(x);
alert(typeof x);
}
// // 参数为数字
// func(520);
// // 参数为数组 相当于是个整体
// func([1,2,3,6]);
// // 参数为字符串
// func("hello world")
// // 如果实参比形参多，那么就取前面的实参，后面的参数不要
// function f1(a,b){
// console.log(a+b)
// }
// f1(1,2,3,4,5,6) // 1+2=3
// 如果形参的个数多于实参的个数，多余的形参会被定义为undefined,最终的结果是NaN
function f2(e,f,g){
console.log(e+f+g)
}
f2(2,5) // NaN
</script>
</body>
</html>
JS - 函数返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS - 函数返回值</title>
</head>
<body>
<script>
// 返回值，函数只是实现某种功能，最终的结果需要返回给函数的调用者，需要return返回
// 只要函数遇到return，后面的代码则不会再执行
function getResult(){
return 666;
}
// 写法一:
console.log(getResult()); // 666
// 写法二:
var a = getResult()
console.log(a) // 666
</script>
</body>
</html>
JS - 函数 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS - 函数案例</title>
</head>
<body>
<input type="button" value="改变样式" id="btn">
<div id="box">这是一个div盒子</div>
<script>
var inpu = document.getElementById("btn");
var di = document.getElementById("box");
// 定义函数
function func(color_s,size_s) {
di.style.color = color_s;
di.style.fontSize = size_s;
}
// 触发事件
inpu.onclick = function (){
func("blue","30px")
}
</script>
</body>
</html>
JS - 函数不定长参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS - 函数不定长参数</title>
</head>
<body>
<script>
// arguments 里面存储了所有传递过来的实参
// es5 写法 规则
function sum() {
console.log(arguments.length); // 7 伪数组
console.log(arguments.length[0]); // undefined
}
sum(1,2,3,4,5,6,7);
</script>
</body>
</html>
JS - 函数作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS - 函数作用域</title>
</head>
<body>
<script>
// 全局作用域 定义在script标签中
// 局部作用域 定义在函数内部
// 特殊情况，如果在函数内部没有声明，直接定义的变量也是全局变量
var a = 20; // 全局变量
function demo() {
a = 10; // 函数内部，没声明，全局变量，后定义的变量覆盖了前定义的变量
return a;
}
var box = demo();
console.log(box); // 10
console.log(a); // 10
// 函数形参是局部变量
console.log(argu);
function demo1(argu) {
return argu; // argu is not defined
}
</script>
</body>
</html>
JS - 函数块级作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS - 函数块级作用域</title>
</head>
<body>
<script>
// js 里面没有块级作用域
java(){
int num = 10; // 块级作用域
}
// js 块级作用域是在 es6 当中所增
</script>
</body>
</html>
JS - 函数预解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS - 函数预解析</title>
</head>
<body>
<script>
// 案例1
console.log(num); // num is not defined
// 案例2
console.log(num); // undefined
var num = 10;
// 解析：
var num;
console.log(num);
num = 10;
// 案例3
fn();
function fn() {
console.log(12); // 12
}
// 案例4
func();
var func = function () {
console.log(25); // func is not a function
}
// 解析：
var func;
func();
func = function () {
console.log(25);
}
// 浏览器，通过js引擎，执行js代码，分两步，先通过预解析，再执行代码
// 预解析时，js引擎会把js里面的var，还有function提升到当前作用域最前面
// 代码执行，按照书写顺序从上往下
// 预解析，分为变量预解析（变量提升），函数解析（函数提升）
// 变量提升：即把所有的变量声明提升到当前作用域的最前面，不提示赋值操作
// 函数提升：把所有的函数声明放到作用域的最前面，不调用函数
</script>
</body>
</html>
JS - 函数预解析案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS - 函数预解析案例</title>
</head>
<body>
<script>
// 案例1
// var num = 100;
// func();
// function func() {
// console.log(num); // undefined
// var num = 20;
// }
// // 解析：
// var num;
// function func() {
// var num;
// console.log(num); // undefined
// num = 20;
// }
// num = 100;
// func();
// 案例2
// var num1 = 100;
// function fun() {
// console.log(num1); // undefined
// var num1 = 20;
// console.log(num1); // 20
// }
// fun();
// // 解析
// var num1;
// function fun() {
// var num1;
// console.log(num1); // undefined
// num1 = 20;
// console.log(num1); // 20
// }
// num1 = 100;
// fun();
// 案例3
// var a = 10;
// f1();
// function f1() {
// var b = 8;
// console.log(a); // undefined
// console.log(b) // 8
// var a = "hello world"
// }
// // 解析
// var a;
// function f1() {
// var b;
// var a;
// b = 8;
// console.log(a); // undefined
// console.log(b) // 8
// a = "hello world"
// }
// a = 10;
// f1();
// 案例4
f1();
console.log(c); // 9
console.log(b); // 9
console.log(a); // 9
function f1(){
var a = b= c = 9; // var a=9;b=9;c=9;
console.log(a); // 9
console.log(b); // 9
console.log(c); // a is not defined
}
// 解析
function f1(){
var a;
a = 9;
b = 9;
c = 9;
console.log(a); // 9
console.log(b); // 9
console.log(c); // 9
}
f1();
console.log(c); // 9
console.log(b); // 9
console.log(a); // a is not defined
</script>
</body>
</html>
JS - 定时器
setTimeout 定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS - 定时器 </title>
</head>
<body>
<button>停止定时器</button>
<script>
// setTimeout 定时器
// 格式： setTimeout（调用函数，[延迟的毫秒数]） 1000毫秒 = 1秒
// 定义定时器的时候一般要给个名字，方便清空定时器
// 时间到了，就去调用这个函数，只调用一次
var btn = document.getElementsByTagName("button")[0];
var timer = setTimeout(function () {
console.log("时间到了")
},2000)
btn.onclick = function () {
// clearTimeout 清空定时器,一定要知道定时器的名字是什么
clearTimeout(timer)
}
</script>
</body>
</html>
setInterval 定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS - 定时器 </title>
</head>
<body>
<button>开启计时器</button>
<button>关闭计时器</button>
<script>
// setInterval 定时器 每隔这个延时时间，就去调用这个函数，重复调用
// clearInterval 清除定时器
// 案例1
var begin = document.getElementsByTagName("button")[0];
var stop = document.getElementsByTagName("button")[1];
// 定时器为全局变量的时候，其他的函数才可以访问，否则访问不了
var timer = null; // 空对象
begin.onclick = function () {
timer = setInterval(function (){
console.log("开始执行");
},1000)
}
stop.onclick = function () {
clearInterval(timer);
}
// 案例2
setInterval(function () {
console.log("持续输出")
},1000)
</script>
</body>
</html>
