目录
定时器的应用(一)
<!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
var box1=document.getElementById("box1");
//获取btn01
var btn01=document.getElementById("btn01");
//定义一个变量,用来保存定时器的标识
var timer;
//点击按钮以后,使box1向右移动(left值增大)
btn01.onclick=function(){
//开启一个定时器。用来执行动画效果
setInterval(function(){
//获取box1的原来的left值
var oldValue=parseInt(getStyle(box1,"left"));
alert(oldValue);
//开启一个定时器,用来执行动画效果
var timer=setInterval(function(){
//获取box1的原来的left值
//关闭上一个定时器
clearInterval(timer);
var oldValue=parseInt(getStyle(box1,"left"));
//在旧值的基础上增加
var newValue=oldValue+19;
//判断newValue是否大于800
if (newValue>800) {
newValue=800;
}
//将新值设置给box1
box1.style.left=newValue+"px";
//当元素移动到800px时,使其停止执行动画
if (newValue>=800) {
//达到目标,关闭定时器
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];
}
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<br /><br />
<div id="box1"></div>
<div style="width: 0;height: 1000px;border-left:1px;black solid;position: absolute;top: 0;"></div>
</body>
</html>
定时器的应用(二)
<!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
var box1=document.getElementById("box1");
//获取btn01
var btn01=document.getElementById("btn01");
//获取btn02
var btn02=document.getElementById("btn01");
//点击按钮以后,使box1向右移动(left值增大)
btn01.onclick=function(){
//开启一个定时器。用来执行动画效果
setInterval(function(){
//获取box1的原来的left值
var oldValue=parseInt(getStyle(box1,"left"));
alert(oldValue);
//开启一个定时器,用来执行动画效果
var timer=setInterval(function(){
//获取box1的原来的left值
//关闭上一个定时器
clearInterval(timer);
var oldValue=parseInt(getStyle(box1,"left"));
//在旧值的基础上增加
var newValue=oldValue+19;
//判断newValue是否大于800
if (newValue>800) {
newValue=800;
}
//将新值设置给box1
box1.style.left=newValue+"px";
//当元素移动到800px时,使其停止执行动画
if (newValue>=800) {
//达到目标,关闭定时器
clearInterval(timer);
}
},30);
};
//点击按钮以后,使box1向左移动(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;
}
var oldValue=parseInt(getStyle(obj,"left"));
//在旧值的基础上增加
var newValue=oldValue+speed;
//判断newValue是否大于800
//从800向0移动
//向左移动时,需要判断newValue是否小于target
//向右移动时,需要判断newValue是否大于target
if ((speed<0&&new Value<target)||(speed>0&&newValue>target)) {
newValue=target;
}
//将新值设置给box1
obj.style.left=newValue+"px";
//当元素移动到800px时,使其停止执行动画
if (newValue=0) {
//达到目标,关闭定时器
clearInterval(timer);
}
}
/*
* 定义一个函数,用来获取指定元素的当前的样式
* 参数:
* obj 要获取样式得到元素
* name 要获取的样式名
*/
function getStyle(obj,name){
if (window.getComputedStyle) {
//正常浏览器的方式,具有getComputedStyle()方法
return getCompu