定时器的应用(二)
<!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 type="text/css">
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
// 获取box1
var box1 = document.getElementById("box1");
// 获取btn01
var btn01 = document.getElementById("btn01");
// 获取btn02
var btn02=document.getElementById("btn02");
/* // 定义一个变量，用来保存定时器的标识
var timer; */
// 点击按钮以后，使box1向右移动（left值增大）
btn01.onclick = function () {
// box1.style.left="200px";//点击按钮 向右移动200px
move(box1, 800, 10);
};
// 点击按钮以后，使box2向左移动（left值减小）
btn02.onclick = function () {
move(box1,0,10);
};
};
// 定义一个变量，用来保存定时器的标识
var timer;
// 尝试创建一个可以执行简单动画的函数
/*
参数：
obj:要执行动画的对象
target：执行动画的目标位置
speed:移动的速度(正数向右移动，负数向左移动)
*/
function move(obj,target,speed){
// 关闭上一个定时器
clearInterval(timer);
// 获取元素目前的位置
var current = parseInt(getStyle(obj, "left"));
// 判断速度的正负值
// 如果从0向800移动,则speed为正
// 如果从800向0移动,则speed为负
if (current>target)
// 此时速度我负值
speed=-speed;
// 开启一个定时器，用来执行动画效果
timer = setInterval(function () {
// 获取box2的原来的left值
var oldValue = parseInt(getStyle(obj, "left"));
// 在旧值的基础上增加
var newValue = oldValue + speed;
// 判断newValue是否大于800
// 从800向0移动
// 向左移动时，需要判断newValue是否小于target
// 向右移动时，需要判断newValue是否大于target
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
// 将新值设置给box1
obj.style.left = newValue + "px";
// 当元素移动到0px时，使其停止执行动画
if (newValue == target) {
// 达到目标，关闭定时器
clearInterval(timer);
}
}, 30);
}
/*
定义一个函数，用来获取指定元素的当前的样式
参数：
obj 要获取样式的元素
name 要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
// 正常浏览器的方式,具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
// IE8的方式,没有getComputedStyle()方法
return obj.currentStyle[name];
}
// return window.getComputedStyle? getComputedStyle(obj, null)[name]: obj.currentStyle[name];
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box1向左移动</button>
<br /><br />
<div id="box1"></div>
<div style="width:0;height:1000px;border-left:1px black solid; position:absolute;left:800px;top:0;"></div>
</body>
</html>
点击向右按钮
点击向左按钮
