目录
定时器
定时器分类
-
延迟定时器：多长时间之后才执行一次 （只执行一次 ）
-
应用场景：广告弹出
-
-
间歇性定时器：没隔多长时间就执行一次（只要不清除就一直执行）
-
应用场景：轮播图，倒计时
-
延迟定时器：一般支持最小值4ms
间歇性定时器：一般支持最小毫秒值 10ms
定时器的设置
延迟定时器
-
基本语法：setTimeout(fun,time)
-
fun:函数，可以传递实名函数或匿名函数
-
time：时间，单位是ms（单位省略） 1s = 1000ms
-
setTimeout(function(){
console.log("哈哈哈");
},3000);
function test(){
console.log("呵呵呵");
}
setTimeout(test,6000);延迟定时器的使用
3秒显示图片，点击关闭按钮后关闭
<div>
<img src="./img/11.jpg" alt="">
<span>X</span>
</div>
<script>
var div = document.getElementsByTagName("div")[0];
var span = document.getElementsByTagName("span")[0];
// 设置定时器
setTimeout(function () {
div.style.display = "block";
}, 3000);
span.onclick = function () {
div.style.display = "none";
}
</script>间歇性定时器
-
基本语法：setInterval(fun,time)
-
fun:函数，可以传递实名函数或匿名函数
-
time：时间，单位是ms（单位省略） 1s = 1000ms
-
// 间歇性定时器
// 传递匿名函数
setInterval(function(){
console.log("hello world");
},1000);
// 传递实名函数
function test1(){
console.log("哈喽");
}
setInterval(test1,3000);间歇性定时器使用（倒计时）
界面显示十秒倒计时
<span>10</span>
<script>
var span = document.getElementsByTagName("span")[0];
var n = 10;
// 设置定时器
var timer = setInterval(function(){
n--;
console.log(n);
// 判断
if(n < 0){
n = 0;
// 清除定时器 是不会执行下一次了，当前这一次函数体的内容要执行完毕
clearInterval(timer);
console.log("哈哈");
}
// 赋值
span.innerHTML = n;
},1000);
</script>定时器的清除
清除延迟定时器
-
基本语法：clearTimeout(timerId);
-
timerId:当前定时器的返回值,是一个唯一的数值。
-
清除间歇性定时器
- 基本语法：clearInterval(timerId);
- timerId:当前定时器的返回值,是一个唯一的数值。
var btns = document.getElementsByTagName("button");
// 设置定时器
var timer1 = setTimeout(function(){
console.log("哈哈哈，我是5秒后执行的");
},5000);
var timer2 = setInterval(function(){
console.log("哈喽");
},2000);
console.log(timer1,timer2);
// 清除定时器
btns[0].onclick = function(){
clearTimeout(timer1);
}
btns[1].onclick = function(){
clearInterval(timer2);
}运动函数的封装
单方向匀速运动
// 获取元素
var div = document.getElementsByTagName("div")[0];
var btn = document.getElementsByTagName("button")[0];
// 定义变量保存定时器的返回值
var timer = null;
// 绑定事件 div left 10 ->1000
btn.onclick = function () {
// 防止用户多次点击 在设置定时器之前先清除定时器
clearInterval(timer);
// 设置定时器
timer = setInterval(function () {
// 先获取当前的样式值 getStyle函数封装请看文章中的前面渲染样式
var curVal = parseFloat(getStyle(div, "left"));
// 每次在原来的基础上去增加一个固定值
var speed = curVal + 10;
// 清除定时器
if (speed >= 1000) {
// 重新给speed进行赋值 因为speed可能大于目标值
speed = 1000;
clearInterval(timer);
}
console.log(timer);
// 设置
div.style.left = speed + 'px';
}, 50);
}
/*
作用：获取经过浏览器渲染的样式
@para:参数
eleObj:元素对象
attr:样式属性
@return:具体的样式值
*/
function getStyle(eleObj, attr) {
// 判断兼容
if (eleObj.currentStyle) { //IE下
return eleObj.currentStyle[attr];
} else { //非IE
return getComputedStyle(eleObj)[attr];
}
}
反复匀速运动
// 获取元素
var div = document.getElementsByTagName("div")[0];
var btn = document.getElementsByTagName("button");
// 定义变量保存定时器的返回值
var timer = null;
// 绑定事件 div left 10 ->1000
btn[0].onclick = function () {
div.style.backgroundImage = "url('./img/right.gif')";
// 防止用户多次点击 在设置定时器之前先清除定时器
clearInterval(timer);
// 设置定时器
timer = setInterval(function () {
// 先获取当前的样式值
var curVal = parseFloat(getStyle(div, "left"));
// 每次在原来的基础上去增加一个固定值
var speed = curVal + 10;
//到达目标值清除定时器
if (speed >= 1000) {
// 重新给speed进行赋值 因为speed可能大于目标值
speed = 1000;
clearInterval(timer);
}
// 设置
div.style.left = speed + 'px';
}, 50);
}
// 1000 -> 10
btn[1].onclick = function () {
div.style.backgroundImage = "url('./img/left.gif')";
// 防止用户多次点击先清除定时器
clearInterval(timer);
// 设置定时器
timer = setInterval(function () {
// 先获取当前的样式值
var curVal = parseFloat(getStyle(div, "left"));
// 每次在原来的基础上去减少一个固定值
var speed = curVal - 10;
//到达目标值清除定时器
if (speed <= 10) {
// 重新给speed赋值
speed = 10;
}
// 设置
div.style.left = speed + 'px';
}, 50);
}
</script>简单的封装
// 定义变量保存定时器的返回值
var timer = null;
// 绑定事件 div left 10 ->1000
btn[0].onclick = function () {
move(div, "left", 10, 1000);
}
// 1000 -> 0
btn[1].onclick = function () {
move(div, "left", -10, 0);
}
/*
作用：匀速运动
@para:参数
eleObj：元素对象
attr:样式属性
step:步长
target:目标值
*/
function move(eleObj, attr, step, target) {
// 防止用户多次点击先清除定时器
clearInterval(timer);
// 设置定时器
timer = setInterval(function () {
// 先获取当前的样式值
var curVal = parseFloat(getStyle(eleObj, attr));
// 每次在原来的基础上去增加一个固定值
var speed = curVal + step;
// 到达目标值清除定时器
if ((speed >= target && step > 0) || (speed <= target && step < 0)) {
// 给speed重新赋值为目标值
speed = target;
// 清除定时器
clearInterval(timer);
}
// 设置样式值
eleObj.style[attr] = speed + 'px';
}, 50);
}封装的完善
// 绑定事件 div left 10 ->1000
btn[0].onclick = function () {
move(div, "left", 10, 1000);
}
// 1000 -> 0
btn[1].onclick = function () {
move(div, "left", 10, 0);
}
/*
作用：匀速运动
@para:参数
eleObj：元素对象
attr:样式属性
step:步长
target:目标值
*/
function move(eleObj, attr, step, target) {
// 判断步长的正负
// 初始值小于目标值step正数，初始值大于目标值step为负数
step = parseFloat(getStyle(eleObj, attr)) < target ? step : -step;
// 防止用户多次点击先清除定时器
clearInterval(eleObj.timer);
// 设置定时器并且将定时器的返回值保存元素的自定义属性上
eleObj.timer = setInterval(function () {
// 先获取当前的样式值
var curVal = parseFloat(getStyle(eleObj, attr));
// 每次在原来的基础上去增加一个固定值
var speed = curVal + step;
if ((speed >= target && step > 0) || (speed <= target && step < 0)) {
// 给speed重新赋值为目标值
speed = target;
// 清除定时器
clearInterval(eleObj.timer);
}
// 设置样式值
eleObj.style[attr] = speed + 'px';
}, 50);
}