Day11(动画)
一、什么是默认参数
+ 默认参数
- 在定义形参的时候可以给形参赋值 如果函数调用的时候传了参数 就会使用传入实参 如果函数调用的时候没有传这个参数 使用默认的参数
- 函数形参相当于在函数内部声明了一个变量
- 函数实参相当于给形参赋值
二、函数的不定形参
普通函数里面有arguments
第二种方式:
function max(...args){
console.log(arguments)
console.log(args)
}
es6箭头函数里面没有arguments,es6里面只有一种方式
一个函数里面最多只能有一个不定形参
不定形参必须位于所有参数的最后
三、解构赋值
- 将数组或者对象里面的数据快速取出赋值给一个变量
- var [变量名] = 数组
四、展开运算符
+ 展开运算符
- ...
- 主要作用是用于合并数组和对象
五、简单版动画
<!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>
.box {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: palegreen;
}
.box2 {
top: 150px;
background-color: red;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<script>
var box = document.querySelector(".box1");
console.log(box)
box.onclick = function () {
// box.style.left = '400px'
let id = setInterval(() => {
// 让元素box在当前位置的基础上加上40px
let currentLeft = getComputedStyle(box).left;
currentLeft = parseInt(currentLeft);
// 判断是否到达终点
if (currentLeft === 400) {
// 到达终点
clearInterval(id);
} else {
// 没有到达终点
box.style.left = currentLeft + 40 + "px";
}
}, 80);
};
var box2 = document.querySelector(".box2");
console.log(box)
box2.onclick = function () {
// box.style.left = '400px'
let id = setInterval(() => {
// 让元素box在当前位置的基础上加上40px
let currentLeft = getComputedStyle(box2).top;
currentLeft = parseInt(currentLeft);
// 判断是否到达终点
if (currentLeft === 400) {
// 到达终点
clearInterval(id);
} else {
// 没有到达终点
box2.style.top = currentLeft + 25 + "px";
}
}, 80);
};
</script>
</body>
</html>