1. 设置定时器
1.1设置超时定时器
超时调用需要使用window对象的setTimeout()方法,该方法接受两个参数:调用函数或计算表达式和以毫秒为单位的时间(即在执行代码前需要等待多少毫秒)。
<!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>
<script>
// 超时定时器:超过规定时间后所执行的代码
// setTimeout(callback,time); time 毫秒
setTimeout(function(){
console.log("三秒之后执行");
},3000);
// 给超时定时器一个名字
var timeoutId = setTimeout(function(){
console.log("有名字的超时定时器");
},5000);
</script>
</body>
</html>
1.2 清除超时定时器
clearTimeout(); 注意:需要给超时定时器起名字才能清除
<!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>
<script>
setTimeout(function(){
console.log("三秒之后执行");
},3000);
// 给超时定时器一个名字
var timeoutId = setTimeout(function(){
console.log("有名字的超时定时器");
},5000);
// 通过 clearTimeout() 方法清除超时定时器
clearTimeout(timeoutId);
</script>
</body>
</html>
1.3 设置间歇定时器
间歇定时器与超时定时器类似,只不过它会按照指定的时间间隔重复执行代码,直到间歇定时器被取消或者页面被关闭。
设置间歇定时器的方法是setInterval(),它接受的参数与setTimeout()相同:要执行的代码和每次执行之前需要等待的毫秒数。
<!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>
<script>
// 间歇定时器 每多长事件执行一次
setInterval(function(){
console.log("每三秒执行一次");
},3000);
var intervalId = setInterval(function(){
console.log("有名字的间歇定时器");
},1000)
</script>
</body>
</html>
1.4 清除间歇定时器
调用setInterval()方法同样会返回一个定时器的唯一标识(ID)。要取消间歇定时器,可以用clearInterval()方法并传入相应的ID值就行了。
<!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>
<script>
// 间歇定时器 每多长事件执行一次
setInterval(function(){
console.log("每三秒执行一次");
},3000);
var intervalId = setInterval(function(){
console.log("有名字的间歇定时器");
},1000);
// 通过 clearInterval() 清除间歇定时器
clearInterval(intervalId);
</script>
</body>
</html>
2.JS动画
主要实现以下几种简单的动画效果(其实原理基本相同):
1.匀速动画:物体的速度固定
2.缓动动画:物体速度逐渐变慢
2.1 匀速动画
以物体左右匀速运动为例)
-
动画效果主要是用定时器setInterval()来实现的,每隔几毫秒让物体移动一点距离,通过不断调用定时器来达到让物体运动的效果。
-
将定时器放在一个函数内,定义物体的运动速度speed为10,判断物体的运动方向(向左走或向右走)来规定speed的正负;
-
然后将物体的offsetLeft加上速度speed 赋值给物体的left样式值(要给物体设置定位);
-
当物体到达目标位置时清除定时器;
<!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>
.father {
width: 1200px;
height: 800px;
position: relative;
margin: 0 auto;
border: 1px solid #ccc;
}
.box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div>
<input type="button" value="向右走">
<input type="button" value="向左走">
<input type="button" value="向上走">
<input type="button" value="向下走">
</div>
<div class="father">
<div class="box"></div>
</div>
<script>
var rightbtn = document.getElementsByTagName("input")[0];
var leftbtn = document.getElementsByTagName("input")[1];
var topbtn = document.getElementsByTagName("input")[2];
var bottombtn = document.getElementsByTagName("input")[3];
var father = document.getElementsByClassName("father")[0];
var son = document.getElementsByClassName("box")[0];
// btn.onclick = function(){
// son.style.left = son.offsetLeft + 10 + "px";
// }
var boxMove;
rightbtn.onclick = function () {
clearInterval(boxMove);
boxMove = setInterval(function () {
if (son.offsetLeft >= father.clientWidth - son.offsetWidth) {
clearInterval(boxMove);
}else{
son.style.left = son.offsetLeft + 10 + "px";
}
}, 50);
}
leftbtn.onclick = function () {
clearInterval(boxMove);
boxMove = setInterval(function () {
if (son.offsetLeft <= 0) {
clearInterval(boxMove);
} else {
son.style.left = son.offsetLeft - 10 + "px";
}
}, 50);
}
topbtn.onclick = function () {
clearInterval(boxMove);
boxMove = setInterval(function () {
if (son.offsetTop <= 0) {
clearInterval(boxMove);
} else {
son.style.top = son.offsetTop - 10 + "px";
}
}, 50);
}
bottombtn.onclick = function () {
clearInterval(boxMove);
boxMove = setInterval(function () {
if (son.offsetTop >= father.clientHeight - son.offsetHeight) {
clearInterval(boxMove);
} else {
son.style.top = son.offsetTop + 10 + "px";
}
}, 50);
}
</script>
</body>
</html>
2.2 缓动动画
(和匀速运动相同原理,只不过速度做些改变)
-
让速度等于目标值和当前位置之差/10,二者之差会越来越小,即速度speed也会越来越小;
-
二者之差除以十并不总是整数,可能会导致物体位置和目标值不能完全相等,所以需要对speed进行取整,大于0向上取整,小于0向下取整;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 1000px;
height: 800px;
border: 1px solid #ccc;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
</style>
<script src="animation.js"></script>
</head>
<body>
<input type="button" value="向右">
<input type="button" value="向左">
<div class="father">
<div class="son"></div>
</div>
<script>
var btn1 = document.getElementsByTagName("input")[0];
var btn2 = document.getElementsByTagName("input")[1];
var father = document.getElementsByClassName("father")[0];
var son = document.getElementsByClassName("son")[0];
var timer;
btn1.onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
// 900 810 729 656 590 ....
// 90 81 73 66 59 .... 1
son.style.left = son.offsetLeft + Math.ceil((900 - son.offsetLeft) / 10) + "px";
}, 30)
}
btn2.onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
son.style.left = son.offsetLeft + Math.floor((0 - son.offsetLeft) / 10) + "px";
}, 30)
}
</script>
</body>
</html>