1.定时器的应用一:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
/*开启绝对定位*/
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 点击按钮以后,使box1向右移动
*/
//获取box1
var box1 = document.getElementById("box1");
//获取btn01
var btn01 = document.getElementById("btn01");
//为btn01绑定一个单击响应函数
btn01.onclick = function(){
//开启一个定时器,控制box1移动
var timer = setInterval(function(){
//获取box1的当前的left值
var oldValue = parseInt(getStyle(box1,"left"));
//通过旧值来计算新值
var newValue = oldValue + 10;
//判断newValue是否大于800
if(newValue > 800){
newValue = 800;
}
//将box1的left值修改为新值
box1.style.left = newValue + "px";
//当box1移动到800px的位置时,停止移动
if(newValue == 800){
clearInterval(timer);
}
},30);
};
};
/*
* 用来获取任意元素的当前样式
* 参数:
* obj 要获取样式的元素
* name 要获取的样式的名字
*
* 在读取元素的样式时,如果元素没有设置样式,
* 则火狐、Chrome等浏览器会自动计算元素的样式值
* 而IE浏览器,有时用不会自动计算,而是返回默认值,比如宽度会返回auto
*
*/
function getStyle(obj , name){
//判断浏览器中是否含有getComputedStyle这个方法
if(window.getComputedStyle){
//支持正常的浏览器
return getComputedStyle(obj,null)[name];
}else{
//只支持IE
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">使box1向右移动</button>
<br /><br />
<div id="box1"></div>
<div style="width: 0px; height: 1000px; border-left:1px solid black ; position: absolute; left: 800px; top:0;"></div>
</body>
</html>
2.定时器的应用完善二:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
/*开启绝对定位*/
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
//定义一个变量来保存定时器的标识
var timer;
window.onload = function(){
/*
* 点击按钮以后,使box1向右移动
*/
//获取box1
var box1 = document.getElementById("box1");
//获取btn01
var btn01 = document.getElementById("btn01");
//获取btn02
var btn02 = document.getElementById("btn02");
//为btn01绑定一个单击响应函数
btn01.onclick = function(){
//关闭之前的定时器
clearInterval(timer);
//开启一个定时器,控制box1移动
timer = setInterval(function(){
//获取box1的当前的left值
var oldValue = parseInt(getStyle(box1,"left"));
//通过旧值来计算新值
var newValue = oldValue + 10;
//判断newValue是否大于800
if(newValue > 800){
newValue = 800;
}
//将box1的left值修改为新值
box1.style.left = newValue + "px";
//当box1移动到800px的位置时,停止移动
if(newValue == 800){
clearInterval(timer);
}
},30);
};
//为btn02绑定一个单击响应函数
btn02.onclick = function(){
clearInterval(timer);
//开启一个定时器,控制box1移动
timer = setInterval(function(){
//获取box1的当前的left值
var oldValue = parseInt(getStyle(box1,"left"));
//通过旧值来计算新值
var newValue = oldValue - 10;
//判断newValue是否小于0
if(newValue < 0){
newValue = 0;
}
//将box1的left值修改为新值
box1.style.left = newValue + "px";
//当box1移动到800px的位置时,停止移动
if(newValue == 0){
clearInterval(timer);
}
},30);
};
};
/*
* 用来获取任意元素的当前样式
* 参数:
* obj 要获取样式的元素
* name 要获取的样式的名字
*
* 在读取元素的样式时,如果元素没有设置样式,
* 则火狐、Chrome等浏览器会自动计算元素的样式值
* 而IE浏览器,有时用不会自动计算,而是返回默认值,比如宽度会返回auto
*
*/
function getStyle(obj , name){
//判断浏览器中是否含有getComputedStyle这个方法
if(window.getComputedStyle){
//支持正常的浏览器
return getComputedStyle(obj,null)[name];
}else{
//只支持IE
return 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: 0px; height: 1000px; border-left:1px solid black ; position: absolute; left: 800px; top:0;"></div>
</body>
</html>
3.定时器的应用完善三:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
/*开启绝对定位*/
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
//定义一个变量来保存定时器的标识
var timer;
window.onload = function(){
/*
* 点击按钮以后,使box1向右移动
*/
//获取box1
var box1 = document.getElementById("box1");
//获取btn01
var btn01 = document.getElementById("btn01");
//获取btn02
var btn02 = document.getElementById("btn02");
//为btn01绑定一个单击响应函数
btn01.onclick = function(){
move(box1 , 800 , 10);
};
//为btn02绑定一个单击响应函数
btn02.onclick = function(){
move(box1 , 0 , 10);
};
};
/*
* 定义一个move()函数来执行一些简单的动画效果
* 参数:
* obj 要执行动画的对象
* target 执行动画的目标位置
* speed 动画执行的速度
*/
function move(obj , target , speed){
//关闭之前的定时器
clearInterval(timer);
//判断向左移还是向右移
//0 --> 800 向右移
//起始位置 < 目标位置 则向右移动,速度为正
//800 --> 0 向左移
//起始位置 > 目标位置 则向左移动,速度为负
//获取元素的起始位置
var current = parseInt(getStyle(obj,"left"));
if(current > target){
//起始位置 > 目标位置 则向左移动,速度为负
speed = -speed;
}
//开启一个定时器,控制box1移动
timer = setInterval(function(){
//获取box1的当前的left值
var oldValue = parseInt(getStyle(obj,"left"));
//通过旧值来计算新值
var newValue = oldValue + speed;
//判断newValue是否大于800
/*
* 如果从0 向 800,执行动画,则值越来越大
* 如果从800向0执行动画,则值越来小
*/
if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)){
newValue = target;
}
//将box1的left值修改为新值
obj.style.left = newValue + "px";
//当box1移动到800px的位置时,停止移动
if(newValue == target){
clearInterval(timer);
}
},30);
}
/*
* 用来获取任意元素的当前样式
* 参数:
* obj 要获取样式的元素
* name 要获取的样式的名字
*
* 在读取元素的样式时,如果元素没有设置样式,
* 则火狐、Chrome等浏览器会自动计算元素的样式值
* 而IE浏览器,有时用不会自动计算,而是返回默认值,比如宽度会返回auto
*
*/
function getStyle(obj , name){
//判断浏览器中是否含有getComputedStyle这个方法
if(window.getComputedStyle){
//支持正常的浏览器
return getComputedStyle(obj,null)[name];
}else{
//只支持IE
return 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: 0px; height: 1000px; border-left:1px solid black ; position: absolute; left: 800px; top:0;"></div>
</body>
</html>
4.定时器的应用完善四:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
/*开启绝对定位*/
position: absolute;
left: 0;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
/*开启绝对定位*/
position: absolute;
top: 200px;
left: 0;
}
</style>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
//定义一个变量来保存定时器的标识
//var timer;
window.onload = function(){
/*
* 点击按钮以后,使box1向右移动
*/
//获取box1
var box1 = document.getElementById("box1");
//获取box2
var box2 = document.getElementById("box2");
//获取btn01
var btn01 = document.getElementById("btn01");
//获取btn02
var btn02 = document.getElementById("btn02");
//获取btn03
var btn03 = document.getElementById("btn03");
//为btn01绑定一个单击响应函数
btn01.onclick = function(){
move(box1 , "left" ,800 , 20);
};
//为btn02绑定一个单击响应函数
btn02.onclick = function(){
move(box1 , "left" ,0 , 10);
};
//为btn03绑定一个单击响应函数
btn03.onclick = function(){
//点击按钮以后,使box2向右移动
move(box2 , "left" , 500 , 10 , function(){
move(box2 , "width" , 500 , 10 , function(){
move(box2 , "height" , 500 , 10 , function(){
move(box2 , "top" , 0 , 10 , function(){
});
});
});
});
};
};
</script>
</head>
<body>
<button id="btn01">使box1向右移动</button>
<button id="btn02">使box1向左移动</button>
<button id="btn03">使box2向右移动</button>
<br /><br />
<div id="box1"></div>
<div id="box2"></div>
<div style="width: 0px; height: 1000px; border-left:1px solid black ; position: absolute; left: 800px; top:0;"></div>
</body>
</html>
抽出来的js代码:
/*
* 定义一个move()函数来执行一些简单的动画效果
* 参数:
* obj 要执行动画的对象
* attr 执行动画时要修改的属性
* target 执行动画的目标位置
* speed 动画执行的速度
* callback 回调函数,当动画执行完毕以后,该回调函数会执行
*/
function move(obj, attr, target, speed, callback) {
//关闭之前的定时器
/*
* 一般都会将定时器的标识作为执行动画对象的属性保存,这样可以确保只有当前对象能访问到定时器
*/
clearInterval(obj.timer);
//判断向左移还是向右移
//0 --> 800 向右移
//起始位置 < 目标位置 则向右移动,速度为正
//800 --> 0 向左移
//起始位置 > 目标位置 则向左移动,速度为负
//获取元素的起始位置
var current = parseInt(getStyle(obj, attr));
if(current > target) {
//起始位置 > 目标位置 则向左移动,速度为负
speed = -speed;
}
//开启一个定时器,控制box1移动
obj.timer = setInterval(function() {
//获取box1的当前的left值
var oldValue = parseInt(getStyle(obj, attr));
//通过旧值来计算新值
var newValue = oldValue + speed;
//判断newValue是否大于800
/*
* 如果从0 向 800,执行动画,则值越来越大
* 如果从800向0执行动画,则值越来小
*/
if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) {
newValue = target;
}
//将box1的left值修改为新值
obj.style[attr] = newValue + "px";
//当box1移动到800px的位置时,停止移动
if(newValue == target) {
clearInterval(obj.timer);
//调用回调函数
callback && callback();
}
}, 30);
}
/*
* 用来获取任意元素的当前样式
* 参数:
* obj 要获取样式的元素
* name 要获取的样式的名字
*
* 在读取元素的样式时,如果元素没有设置样式,
* 则火狐、Chrome等浏览器会自动计算元素的样式值
* 而IE浏览器,有时用不会自动计算,而是返回默认值,比如宽度会返回auto
*
*/
function getStyle(obj, name) {
//判断浏览器中是否含有getComputedStyle这个方法
if(window.getComputedStyle) {
//支持正常的浏览器
return getComputedStyle(obj, null)[name];
} else {
//只支持IE
return obj.currentStyle[name];
}
}