目录
一、定时器的应用
（1）定时器的应用1
设置一个动画，功能：实现点击按钮后方块到指定划竖线地方停止
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定时器</title>
<style>
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color:red;
position: absolute;
left: 0;
}
</style>
<script>
window.onload = function(){
// 获取box1
var box1 = document.getElementById("box1");
// 获取btn01
var btn01 = document.getElementById("btn01");
// 定义变量，保存定时器标识
var timer;
// 点击按钮以后，使box1向右移动(left值增大)
btn01.onclick = function(){
// 关闭上一个定时器,防止按钮重复点击产生影响
clearInterval(timer);
//开启一个定时器，用来执行动画效果
timer = setInterval(function(){
// 获取box1原来的left值
// var oldValue = getStyle(box1,"left");
// 由于有单位px，转为整数,消除单位
var oldValue =parseInt( getStyle(box1,"left"));
// 在旧值的基础上增加
var newValue = oldValue + 6;
// 判断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){
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
};
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<br><br>
<div id="box1"></div>
<div style="width: 1px;height: 800px;border-left: 1px black solid; position: absolute;left: 800px;top: 0;"></div>
</body>
</html>（2）定时器的应用2
增加功能：多一个可以按下使方块向左移动的按钮
首先在html中添加按钮btn02
<button id="btn02"></button>获取btn02,在Js开头位置添加
var btn02 = document.getElementById("btn02");写btn02.onclick代码，可以通过修改btn01.onclick代码获得，修改如下
// 点击按钮以后，使box1向左移动（left值减小）
btn02.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
var oldValue =parseInt( getStyle(box1,"left"));
var newValue = oldValue - 6;
// 从800向0移动
if(newValue < 0){
newValue = 0;
}
box1.style.left = newValue + "px";
// 当元素移动到0px时，使其停止执行动画
if(newValue == 800){
clearInterval(timer);
}
},30);
};尝试创建一个可以执行简单动画的函数，先提取计时器标识变量，从window.onload中提取出来
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() {
var oldValue = parseInt(getStyle(obj, "left"));
var newValue = oldValue + speed;
// 向左移动，需要判断newVaule 是否小于target
// 向右移动，需要判断newVaule 是否大于target
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
// 将新值设置给box1
obj.style.left = newValue + "px";
// 当元素移动到800px时，使其停止执行动画
if (newValue == 800) {
clearInterval(timer);
}
}, 30);
};按钮点击事件修改为
// 点击按钮以后，使box1向右移动（left值增大）
btn01.onclick = function() {
move(box1, 800, 10)
};
// 点击按钮以后，使box1向左移动（left值减小）
btn02.onclick = function() {
move(box1, 0, 10)
};（3）定时器的应用3
增加了一个黄色的方块box2，两个按钮，其中一个按钮是btn03点击按钮以后box2向左移动,另一个按钮是btn04，用于测试修改box2样式的；
主要是修改了函数的功能，从只能修改元素left的值到可以修改元素多个样式值，且部分正负，最后把函数封装为单独的tools.js代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定时器3</title>
<style>
* {
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;
left: 0;
top: 200px;/* 往下挪，防止盖住 */
}
</style>
<script src="./js/tools.js"></script>
<script>
window.onload = function() {
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var btn03 = document.getElementById("btn03");
var btn04 = document.getElementById("btn04");
btn01.onclick = function() {
move(box1, "left",800, 20)
};
// 点击按钮以后，使box1向左移动（left值减小）
btn02.onclick = function() {
move(box1,"left", 0, 10)
};
// 点击按钮后box2向右移动（left值减小）
btn03.onclick = function() {
move(box2,"left",800, 10)
};
// 测试
btn04.onclick = function() {
// move(box2,"width", 800,10)
// move(box2,"height", 800,10)
// move(box2,"top", 800,10)
move(box2,"width", 800,10,function(){
move(box2,"height", 800,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>
<button id="btn04">测试</button>
<br><br>
<div id="box1"></div>
<div id="box2"></div>
<div style="width: 1px;height: 1800px;border-left: 1px black solid; position: absolute;left: 800px;top: 0;">
</div>
</body>
</html>
tools.js
// 获取元素当前样式函数
function getStyle(obj, name) {
if (window.getComputedStyle) {
return getComputedStyle(obj, null)[name];
} else {
return obj.currentStyle[name];
};
};
// 修改元素样式函数
/*
参数：
obj:要执行动画的对象
attr:要执行动画的样式，比如：left top width height
target：执行动画的目标位置
speed：移动的速度（正数向右移动，负数向左移动
callback:回调函数，在动画执行完毕后执行
*/
function move(obj, attr,target, speed,callback) {
clearInterval(obj.timer);
// 获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
// 如果从0向800移动，则speed为正
// 如果从800向0移动，则speed为负
if (current > target) {
// 此时速度应为负值
speed = -speed;
};
obj.timer = setInterval(function() {
var oldValue = parseInt(getStyle(obj,attr));
var newValue = oldValue + speed;
// 向左移动，需要判断newVaule 是否小于target
// 向右移动，需要判断newVaule 是否大于target
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
// 将新值设置给box1
// obj.style.left = newValue + "px";
// 函数加了参数attr后修改为,因为sttr是变量，所以用[]，不用.
obj.style[attr] = newValue + "px";
// 当元素移动到800px时，使其停止执行动画
if (newValue == target) {
clearInterval(obj.timer);
// 动画执行完毕调用回调函数
// callback();
// 有给回调函数的参数才调用回调函数
callback && callback();
}
}, 30);
};参考：
1.bilibili视频：尚硅谷JavaScript基础&实战|JS入门到精通全套完整版
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
