注:在本案例中强调了如何获取一个元素的当前属性值(getStyle方法),和封装后的使元素移动的移动方法(move)
首先看一下简单的左右移动效果:
源码解析:
<!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>定时器的应用</title>
<style>
*{
padding: 0px;
margin: 0px;
}
#box1{
width: 100px;
height: 100px;
background-color: tomato;
position: absolute;
left: 200px;
}
</style>
<script>
window.onload = function(){
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var box1 = document.getElementById("box1");
//点击按钮以后,使box1向右移动
btn01.onclick = function(){
move(box1, 400, 10);
}
//点击按钮以后,是box1向左移动
btn02.onclick = function(){
move(box1, 0, 10);
};
};
var timer;
//创建一个可以执行简单动画的函数
/*
参数:
obj:要执行动画的对象
target: 执行动画的目标位置
speed: 移动的速度(正数向右移动,负数向左移动)
*/
function move(obj, target, speed){
clearInterval(timer);
var current = parseInt(getStyle(box1, "left"));
//判断速度的正负值
//如果从0向400移动,则speed为正
//如果从400向0移动,则speed为负
if(current > target){
speed = -speed;
}
timer = setInterval(function(){
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, "left"));
console.log(oldValue);
//在旧值的基础上增加
var newValue = oldValue + speed ;
//将新值设置给box1
obj.style.left = newValue + "px";
if(speed < 0 && newValue <= target){
obj.style.left = target + "px";
clearInterval(timer);
}else if(speed > 0 && newValue >= target){
obj.style.left = target + "px";
}
}, 10);
}
function getStyle(obj, name){
//此处条件不可直接使用getComputedStyle作为参数,因为在浏览器中变量没找到会报错
// 而作为window的属性使用,属性找不到会返回false,如果是IE8浏览器则会返回false
// 如果是IE8以上的版本或者其他类型浏览器,则返回true
if(window.getComputedStyle){
//正常浏览器的方式,具有getComputedStyle方法
return getComputedStyle(obj, null)[name];
}else{
//IE8的方式,没有getComputedStyle方法
return obj.currentStyle[name];
}
//另一种方法
//该方法有缺陷,因为IE9/10/11即含有currentStyle属性有含有getComputedStyle方法
// if(obj.currentStyle){
// return obj.currentStyle[name];
// }else{
// return obj.getComputedStyle[name];
// }
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box1向左移动</button>
<br><br>
<div id="box1"></div>
<div id="box2" style="border-left: solid 1px black; height: 1000px; position: absolute;
left: 500px; top: 0px;"></div>
</body>
</html>
下面看一下升级版的四个按钮控制效果:
源码解析:
<!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>定时器的应用</title>
<style>
*{
padding: 0px;
margin: 0px;
}
#box1{
width: 30px;
height: 30px;
background-color: tomato;
position: absolute;
top: 50px;
left: 0px;
}
#box3{
width: 100px;
height: 100px;
/* background-color: tomato; */
position: absolute;
left: 0px;
top: 200px;
}
</style>
<script>
window.onload = function(){
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var btn03 = document.getElementById("btn03");
var btn04 = document.getElementById("btn04");
var btn05 = document.getElementById("btn05");
var btn06 = document.getElementById("btn06");
var box1 = document.getElementById("box1");
var box3 = document.getElementById("box3");
//点击按钮以后,使box1向右移动
// btn01.disabled = true;
// btn02.disabled = true;
// btn03.disabled = true;
// btn04.disabled = true;
// btn05.disabled = true;
//强调回调函数的作用
btn01.onclick = function(){
move(box1, "left", 470, 10);
}
//点击按钮以后,是box1向左移动
btn02.onclick = function(){
move(box1, "left", 0, 10);
};
//单击按钮以后,box3向左移动
btn03.onclick = function(){
move(box3, "left", 400, 10);
};
//单击按钮后,box1向下移动
btn05.onclick = function(){
move(box1, "top", 470, 20)
}
//单击按钮后,box1向上移动
btn04.onclick = function(){
move(box1, "top", 50, 10);
}
};
/*
目前我们的定时器的标识由全局变量timer保存
所有的执行正在执行的定时器都在这个变量中保存
*/
var timer;
//创建一个可以执行简单动画的函数
/*
参数:
obj:要执行动画的对象
st: 要执行动画的样式,比如:left、top、width
target: 执行动画的目标位置
speed: 移动的速度(正数向右移动,负数向左移动)
callback: 回调函数,这个函数将会在动画执行完毕以后执行
*/
function move(obj, st, target, speed, callback){
clearInterval(obj.timer);
var current = parseInt(getStyle(box1, st));
//判断速度的正负值
//如果从0向400移动,则speed为正
//如果从400向0移动,则speed为负
console.log(current + " " + target);
if(current > target){
speed = -speed;
}
obj.timer = setInterval(function(){
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, st));
console.log(oldValue);
//在旧值的基础上增加
var newValue = oldValue + speed ;
//将新值设置给box1
obj.style[st] = newValue + "px";
if(speed < 0 && newValue <= target){
obj.style[st] = target + "px";
clearInterval(obj.timer);
//动画执行完毕,调用回调函数
callback && callback(); //如果有callback则执行,否则不执行
}else if(speed > 0 && newValue >= target){
obj.style[st] = target + "px";
clearInterval(obj.timer);
//动画执行完毕,调用回调函数
callback && callback(); //如果有callback则执行,否则不执行
}
}, 10);
}
function getStyle(obj, name){
//此处条件不可直接使用getComputedStyle作为参数,因为在浏览器中变量没找到会报错
// 而作为window的属性使用,属性找不到会返回false,如果是IE8浏览器则会返回false
// 如果是IE8以上的版本或者其他类型浏览器,则返回true
if(window.getComputedStyle){
//正常浏览器的方式,具有getComputedStyle方法
return getComputedStyle(obj, null)[name];
}else{
//IE8的方式,没有getComputedStyle方法
return obj.currentStyle[name];
}
//另一种方法
//该方法有缺陷,因为IE9/10/11即含有currentStyle属性有含有getComputedStyle方法
// if(obj.currentStyle){
// return obj.currentStyle[name];
// }else{
// return obj.getComputedStyle[name];
// }
}
</script>
</head>
<body>
<button id="btn02">点击按钮以后box1向左移动</button>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn03">点击按钮以后box3向左移动</button>
<br>
<button id="btn04">点击按钮以后box1向上移动</button>
<button id="btn05">点击按钮以后box1向下移动</button>
<button id="btn06">点击按钮后图形循环一周</button>
<br><br>
<div id="box1"></div>
<div id="box2" style="border-left: solid 1px black; height: 450px; position: absolute;
left: 500px; top: 50px;"></div>
<div id="box3"></div>
<div id="box4" style="border-top: solid 1px black; width: 500px; position: absolute;
top: 50px;"></div>
<div id="box5" style="border-top: solid 1px black; width: 500px; position: absolute;
top: 500px;"></div>
</body>
</html>
以下为凸显该练习中的回调函数作用的效果:
源码解析:
<!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>定时器的应用</title>
<style>
*{
padding: 0px;
margin: 0px;
}
#box1{
width: 30px;
height: 30px;
background-color: tomato;
position: absolute;
top: 50px;
left: 0px;
}
#box3{
width: 100px;
height: 100px;
/* background-color: tomato; */
position: absolute;
left: 0px;
top: 200px;
}
</style>
<script>
window.onload = function(){
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var btn03 = document.getElementById("btn03");
var btn04 = document.getElementById("btn04");
var btn05 = document.getElementById("btn05");
var btn06 = document.getElementById("btn06");
var box1 = document.getElementById("box1");
var box3 = document.getElementById("box3");
//点击按钮以后,使box1向右移动
btn01.disabled = true;
btn02.disabled = true;
btn03.disabled = true;
btn04.disabled = true;
btn05.disabled = true;
btn06.onclick = function(){
move(box1, "left", 470, 10, function(){
move(box1, "top", 470, 10,function(){
move(box1, "left", 0, 10,function(){
move(box1, "top", 50, 10, function(){
console.log("循环执行一周结束!");
});
});
});
});
}
// //点击按钮以后,是box1向左移动
// btn02.onclick = function(){
// move(box1, "left", 0, 10);
// };
// //单击按钮以后,box3向左移动
// btn03.onclick = function(){
// move(box3, "left", 400, 10);
// };
// //单击按钮后,box1向下移动
// btn05.onclick = function(){
// move(box1, "top", 470, 20)
// }
// //单击按钮后,box1向上移动
// btn04.onclick = function(){
// move(box1, "top", 50, 10);
// }
};
/*
目前我们的定时器的标识由全局变量timer保存
所有的执行正在执行的定时器都在这个变量中保存
*/
var timer;
//创建一个可以执行简单动画的函数
/*
参数:
obj:要执行动画的对象
st: 要执行动画的样式,比如:left、top、width
target: 执行动画的目标位置
speed: 移动的速度(正数向右移动,负数向左移动)
callback: 回调函数,这个函数将会在动画执行完毕以后执行
*/
function move(obj, st, target, speed, callback){
clearInterval(obj.timer);
var current = parseInt(getStyle(box1, st));
//判断速度的正负值
//如果从0向400移动,则speed为正
//如果从400向0移动,则speed为负
console.log(current + " " + target);
if(current > target){
speed = -speed;
}
obj.timer = setInterval(function(){
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, st));
console.log(oldValue);
//在旧值的基础上增加
var newValue = oldValue + speed ;
//将新值设置给box1
obj.style[st] = newValue + "px";
if(speed < 0 && newValue <= target){
obj.style[st] = target + "px";
clearInterval(obj.timer);
//动画执行完毕,调用回调函数
callback && callback(); //如果有callback则执行,否则不执行
}else if(speed > 0 && newValue >= target){
obj.style[st] = target + "px";
clearInterval(obj.timer);
//动画执行完毕,调用回调函数
callback && callback(); //如果有callback则执行,否则不执行
}
}, 10);
}
function getStyle(obj, name){
//此处条件不可直接使用getComputedStyle作为参数,因为在浏览器中变量没找到会报错
// 而作为window的属性使用,属性找不到会返回false,如果是IE8浏览器则会返回false
// 如果是IE8以上的版本或者其他类型浏览器,则返回true
if(window.getComputedStyle){
//正常浏览器的方式,具有getComputedStyle方法
return getComputedStyle(obj, null)[name];
}else{
//IE8的方式,没有getComputedStyle方法
return obj.currentStyle[name];
}
//另一种方法
//该方法有缺陷,因为IE9/10/11即含有currentStyle属性有含有getComputedStyle方法
// if(obj.currentStyle){
// return obj.currentStyle[name];
// }else{
// return obj.getComputedStyle[name];
// }
}
</script>
</head>
<body>
<button id="btn02">点击按钮以后box1向左移动</button>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn03">点击按钮以后box3向左移动</button>
<br>
<button id="btn04">点击按钮以后box1向上移动</button>
<button id="btn05">点击按钮以后box1向下移动</button>
<button id="btn06">点击按钮后图形循环一周</button>
<br><br>
<div id="box1"></div>
<div id="box2" style="border-left: solid 1px black; height: 450px; position: absolute;
left: 500px; top: 50px;"></div>
<div id="box3"></div>
<div id="box4" style="border-top: solid 1px black; width: 500px; position: absolute;
top: 50px;"></div>
<div id="box5" style="border-top: solid 1px black; width: 500px; position: absolute;
top: 500px;"></div>
</body>
</html>
希望本文能够对你有所帮助,加油^ _ ^!