1、定时器
如果一个函数是定时器调用的，则定时器里函数的this是window
间歇调用：var 定时器标识 = setInterval(函数，时间毫秒)；间歇调用只执行一次，相当于一个定时炸弹。
clearInterval(定时器标识)； 清除定时器
超时调用：var 定时器标识 = setTimeout(函数，时间毫秒)；隔一段时间执行一次
clearTimeout(定时器标识)； 清除定时器
案例1：弹窗定时器（超时定时器使用）
<!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>
img{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<script>
window.onload = function (){
var img = document.getElementsByTagName("img")[0];
img.onclick = function (){
// 点击img时，图片隐藏
img.style.display = "none";
var n = setTimeout(function(){
// 触发计时器，2秒后图片显示
img.style.display = "block";
},2000);
}
}
</script>
</head>
<body>
<img src="./image/index_global3_pic_1.jpg" alt="">
</body>
</html>
案例2：发送验证码（间歇定时器使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var btn = document.getElementById("btn");
var num = 5;
var timer = null;
var onOff = true; // 开关
// 点击发送验证码
btn.onclick = function(){
if(onOff){
onOff = false;
} else {
return;
}
timer = setInterval(function(){
num--;
btn.value = num + "秒之后重新发送";
if(num <= 0){
clearInterval(timer);
btn.value = "重新发送";
num = 5;
onOff = true;
}
},1000);
}
}
</script>
</head>
<body>
<input type="text" class="txt">
<input type="button" value="点击发送验证码" id="btn">
</body>
</html>
运动框架（看文件）
1、第一步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 10px;
top:50px;
}
</style>
<script>
window.onload = function () {
var btn = document.getElementById("btn");
var box = document.getElementById("box");
// console.log(getStyle(box,"width"));
// 点击按钮触发事件，找到box中最初的left属性，然后加10像素把值从新赋给left
btn.onclick = function () {
var left = parseInt(getStyle(box, "left"));
box.style.left = left + 10 + "px";
}
}
function getStyle(obj, attr) {
if(window.getComputedStyle){
//IE9以上支持
return getComputedStyle(obj)[attr];
} else {
// IE8及以下
return obj.currentStyle[attr];
}
}
</script>
<body>
<button id = "btn">按钮</button>
<div id="box"></div>
</body>
</html>
2、第二步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 10px;
top:50px;
}
</style>
<script>
window.onload = function () {
var btn = document.getElementById("btn");
var box = document.getElementById("box");
// console.log(getStyle(box,"width"));
// 点击按钮触发事件，找到box中最初的left属性，然后加10像素把值从新赋给left
btn.onclick = function () {
setInterval (function () {
var left = parseInt(getStyle(box, "left"));
box.style.left = left + 10 + "px";//这一步是不断赋值，不断输出才能动起来
},1000);
}
}
function getStyle(obj, attr) {
if(window.getComputedStyle){
//IE9以上支持
return getComputedStyle(obj)[attr];
} else {
// IE8及以下
return obj.currentStyle[attr];
}
}
</script>
<body>
<button id = "btn">按钮</button>
<div id="box"></div>
</body>
</html>
3、第三步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 10px;
top:50px;
}
</style>
<script>
window.onload = function () {
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var timer = null;
// console.log(getStyle(box,"width"));
// 点击按钮触发事件，找到box中最初的left属性，然后加10像素把值从新赋给left
btn.onclick = function () {
timer = setInterval (function () {
var speed = parseInt(getStyle(box, "left")) + 10;
//只是不断给left加值，在没有加PX的情况下，是没有办法输出的，如果写成：var left = parseInt(getStyle(box, "left")) + 10 + "px";
// 定时器不会在500px的地方停止
if(speed >= 500){
clearInterval(timer);
speed = 500;
}
box.style.left = speed + "px";
},1000);
}
}
// 虽然解决了到500px就停止的情况，但是在多次连续点击按钮的情况下，运动（红色方块）会加速
function getStyle(obj, attr) {
if(window.getComputedStyle){
//IE9以上支持
return getComputedStyle(obj)[attr];
} else {
// IE8及以下
return obj.currentStyle[attr];
}
}
</script>
<body>
<button id = "btn">按钮</button>
<div id="box"></div>
</body>
</html>
4、第四步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 10px;
top:50px;
}
</style>
<script>
window.onload = function () {
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var timer = null;
btn.onclick = function () {
clearInterval(timer); //在第三个运动框架的基础上，添加一个清除定时器，
//在每次点击的时候都清除一遍之前点击的，然后只执行下面一次的点击
timer = setInterval (function () {
var speed = parseInt(getStyle(box, "left")) + 10;
if(speed >= 500){
clearInterval(timer);
speed = 500;
}
box.style.left = speed + "px";
},1000);
}
}
function getStyle(obj, attr) {
if(window.getComputedStyle){
//IE9以上支持
return getComputedStyle(obj)[attr];
} else {
// IE8及以下
return obj.currentStyle[attr];
}
}
</script>
<body>
<button id = "btn">按钮</button>
<div id="box"></div>
</body>
</html>
5、第五步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 10px;
top:50px;
}
</style>
<script>
window.onload = function () {
var btn = document.getElementById("btn");
var box = document.getElementById("box");
// var timer = null; //在第4步的基础上，把：var timer = null;改成box的自定义属性，解决封装对外界条件依赖过多的问题
btn.onclick = function () {
clearInterval(box.timer); //box的自定义属性box.timer
box.timer = setInterval (function () { //box的自定义属性box.timer
var speed = parseInt(getStyle(box, "left")) + 10;
if(speed >= 500){
clearInterval(box.timer); //box的自定义属性box.timer
speed = 500;
}
box.style.left = speed + "px";
},25);
}
}
function getStyle(obj, attr) {
if(window.getComputedStyle){
//IE9以上支持
return getComputedStyle(obj)[attr];
} else {
// IE8及以下
return obj.currentStyle[attr];
}
}
</script>
<body>
<button id = "btn">按钮</button>
<div id="box"></div>
</body>
</html>
6、左右移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 10px;
top:50px;
}
</style>
<script>
window.onload = function () {
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var box = document.getElementById("box");
// var timer = null; //在第4步的基础上，把：var timer = null;改成box的自定义属性，解决封装对外界条件依赖过多的问题
// 向右移动
btn1.onclick = function () {
clearInterval(box.timer); //box的自定义属性box.timer
box.timer = setInterval (function () { //box的自定义属性box.timer
var speed = parseInt(getStyle(box, "left")) + 10;
if(speed >= 500){
clearInterval(box.timer); //box的自定义属性box.timer
speed = 500;
}
box.style.left = speed + "px";
},25);
}
//向左移动
btn2.onclick = function () {
clearInterval(box.timer); //box的自定义属性box.timer
box.timer = setInterval (function () { //box的自定义属性box.timer
var speed = parseInt(getStyle(box, "left")) - 10;
if(speed <= 10){
clearInterval(box.timer); //box的自定义属性box.timer
speed = 10;
}
box.style.left = speed + "px";
},25);
}
}
function getStyle(obj, attr) {
if(window.getComputedStyle){
//IE9以上支持
return getComputedStyle(obj)[attr];
} else {
// IE8及以下
return obj.currentStyle[attr];
}
}
</script>
<body>
<button id = "btn1">右</button>
<button id = "btn2">左</button>
<div id="box"></div>
</body>
</html>
7、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 10px;
top:50px;
}
</style>
<script>
window.onload = function () {
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var box = document.getElementById("box");
btn1.onclick = function () {
move (box, "left", 10, 500); //left的属性向左移动是负数，向右移动是正数
}
btn2.onclick = function () {
move (box, "left", -10, 10); //点击按钮2的时候调用move函数
}
// 找出向左向右移动的共同代码，然后定义一个函数。把向左向右移动的代码不同的地方找出来，然后进行
// 参数传递，接着把要变的参数进行替换，可以对比运动框架6 obj是指元素，left指元素属性，dir指-10或者+10，target是这个红色块要到达的目标地方
function move (obj,attr,dir,target) {
clearInterval(obj.timer);
obj.timer = setInterval (function () {
var speed = parseInt(getStyle(obj, attr)) + dir;
// 向左移动
if(speed <= target && dir < 0){
clearInterval(box.timer);
speed = target;
}
// 向右移动
if(speed >= target && dir > 0){
clearInterval(box.timer);
speed = target;
}
obj.style[attr] = speed + "px";
},25);
}
}
function getStyle(obj, attr) {
if(window.getComputedStyle){
//IE9以上支持
return getComputedStyle(obj)[attr];
} else {
// IE8及以下
return obj.currentStyle[attr];
}
}
</script>
<body>
<button id = "btn1">右</button>
<button id = "btn2">左</button>
<div id="box"></div>
</body>
</html>
8、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 10px;
top:50px;
}
</style>
<script>
window.onload = function () {
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var box = document.getElementById("box");
btn1.onclick = function () {
move (box, "left", 500); //left的属性向左移动是负数，向右移动是正数
}
btn2.onclick = function () {
move (box, "left", 10); //点击按钮2的时候调用move函数
}
// 找出向左向右移动的共同代码，然后定义一个函数。把向左向右移动的代码不同的地方找出来，然后进行
// 参数传递，接着把要变的参数进行替换，可以对比运动框架6 obj是指元素，left指元素属性，dir指-10或者+10，target是这个红色块要到达的目标地方
function move (obj,attr,target) {
clearInterval(obj.timer);
obj.timer = setInterval (function () {
var speed = parseInt(getStyle(obj, attr));
// -----------------
var dir = speed < target ? 10 : -10;
speed = speed + dir;
//---------------------------
if((speed <= target && dir < 0) || (speed >= target && dir > 0)){
clearInterval(box.timer);
speed = target;
}
obj.style[attr] = speed + "px";
},25);
}
}
function getStyle(obj, attr) {
if(window.getComputedStyle){
//IE9以上支持
return getComputedStyle(obj)[attr];
} else {
// IE8及以下
return obj.currentStyle[attr];
}
}
</script>
<body>
<button id = "btn1">右</button>
<button id = "btn2">左</button>
<div id="box"></div>
</body>
</html>
9、使用
<!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>
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left:0;
top:0;
}
</style>
<script src="./move.js"></script>
<script>
window.onclick =function(){
var box = document.getElementById("box");
box.onclick = function () {
move(box,"left",500,function(){
move(box,"top",500,function(){
move(box,"left",0,function(){
move(box,"top",0,function(){
move(box,"width",500,function(){
alert("我到了");
});
});
});
});
});
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
move.js 文件
function getStyle(obj, attr) {
if(window.getComputedStyle){
//IE9以上支持
return getComputedStyle(obj)[attr];
} else {
// IE8及以下
return obj.currentStyle[attr];
}
}
function move (obj,attr,target,callback) {
clearInterval(obj.timer);
obj.timer = setInterval (function () {
var speed = parseInt(getStyle(obj, attr));
//console.log('speed',speed)
//console.log('target',target)
// -----------------
var dir = speed < target ? 10 : -10;
console.log(dir)
speed = speed + dir;
//---------------------------
if((speed <= target && dir < 0) || (speed >= target && dir > 0)){
speed = target;
console.log('speed = target',speed)
}
obj.style[attr] = speed + "px";
if(speed === target){
clearInterval(obj.timer);
if(callback){
callback();
}
}
},25);
}