### map
map :映射,由键值对构成的容器
set(key,value) 向集合中添加一个元素:key以存在,则为改,不存在则为增
get(键) 根据键去取值
delete(键) 删除集合中的某个数
has(键) 判断集合中是否有某个值
clear() 清空集合
### es6模板字符串
"" 和'' 不支持换行 无法直接用innerHTML=直接添加元素
所以有`` 可以直接把html中的复制过来写进结构
dom对象.innerHTML = `<li></li>`
ES6模板字符串使用变量 ${变量名} oUl.innerHTML += `<li>${i}</li>`;
### es6新增数组迭代方法
遍历:对数组的每个元素执行相同的操作
1:循环数组
2:操作每个元素(功能)
ES5新增数组的迭代遍历函数
1: forEach
功能:遍历数组,执行回调函数
参数:forEach(回调函数)
function(元素数值,[元素下标],[数组名]){
}
返回值:无
2: map
map和forEach功能几乎一模一样
唯一的区别:map可以有返回值,该返回值是由回调函数return构成的数组
return 是啥,就是一堆返回值构成的一个数组
3: filter
功能:过滤,根据回调函数返回的布尔值,决定是否保留该元素
运动的步骤:
1、开始运动前,先清除已有定时器 (因为:是连续点击按钮,物体会运动越来越快,造成运动混乱)
2、开启定时器,计算速度
3、把运动和停止隔开(if/else),判断停止条件,执行运动
匀速运动
<!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>
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
position: absolute;
background-color: hotpink;
top:200px;
}
#box1{
width: 100px;
height: 100px;
position: absolute;
background-color: hotpink;
top:400px;
}
</style>
</head>
<body>
<button>运动</button>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>
<script>
let btn = document.querySelector("button")
let obox = document.querySelector("#box")
let obox1 = document.querySelector("#box1")
let time;
// 封装的思想 可以实现重复的调用
function Move(obj){
clearInterval(time)
time = setInterval(function(){
obj.style.left =obj.offsetLeft + 5 +"px";
if(obox.offsetLeft == 200){
clearInterval(time)
}
},50)
}
btn.onclick = function(){
Move(obox)
// Move(obox1)
}
</script>