javascript5 定时器功能
定时器功能:
定时器功能是window对象方法，涉及到 定时器和延时器，具体 看代码
定时器
timer=setInterval(function (){},300)
清除定时器：
clearInterval(time1);
延时器：
setTimerout() 延时调用，不马上执行，间隔一段时间，才调用，只调用一次
清除延时器：clearTimerout()
<script type="text/javascript">
window.onload=function () {
//seInterval()
//定时调用，可以将一个函数，没个一段被调用一次
//参数：回调函数，给函数每个一段时间被调用一次
//每次间隔时间单位毫秒级
//clearInterval();可以关闭定时器，方法中需要一个定时器的标准
var num = 1;
//获取定时器的对象
var time1 = setInterval(function () {
count.innerHTML = num++;
if (num > 100) {
clearInterval(time1);
}
}, 100);
//setTimerout() 延时调用，不马上执行，间隔一段时间，才调用，只调用一次
//clearTimerout()
var timer=setInterval(function (){
console.log(num++)
},10);
}
</script>
开启一个定时器前，先关闭一个定时器
定时器功能开发：
1 需求1 图片自动切换功能
1.1 首先定义一个数组，存储图片地址；
1.2 开启一个定时器，进行图片自动切换；循环切换使用到取余运算；
<script type="text/javascript">
window.onload=function (){
var img01=document.getElementById("img01")
var btn01=document.getElementById("btn01")
var btn02=document.getElementById("btn02")
//创建一个数组
var imgArr = ["img/001.jpg", "img/002.jpg", "img/003.jpg", "img/004.png", "img/005.png", "img/006.jpg"]
var timer;
var index=0;
btn01.onclick=function () {
//开启一定时器，先清除一个定时器
clearInterval(timer)
setInterval(function () {
index++;
index = index % imgArr.length;
img01.src = imgArr[index];
}, 1000)
};
btn02.onclick=function (){
clearInterval(timer);
}
}
</script>
2 div控制上下移动功能；
2.1开启一个定时器，获取当前位置var oldPostion=parseInt(getStyle(obj,attr));
2.2 计算出移动后的位置 newPostion=oldPostion+speed(移动)
2.3 直接赋值给 对象obj.style[""]=newPosition+"px"
<script type="text/javascript">
//获取对象obj的当前样式的函数
function getStyle(obj,name){
if (window.getComputedStyle){
return getComputedStyle(obj,null)[name]
}else{
//Ie8支持
return obj.currentStyle(name)
}
}
function move(obj,attr,speed,target,callback){
// 参数，传递要执行obj；attr：要执行动画的样式,
// 移动速度speed;
// target:要执行到目标；
//callback ：回调函数，这个函数最后执行
var current_left= parseInt(getStyle(obj,attr))
// 关闭一个定时器，
if (current_left>target){
speed=-speed
}
clearInterval(obj.timer)
//开启定时器，用来执行动画效果
obj.timer=setInterval(function () {
//涉及获取当前样式的函数功能
var oldPosition=parseInt(getStyle(obj,attr));
var newPosition=oldPosition+speed;
if (speed>0&&newPosition>target || speed<0&&newPosition<target){
newPosition=target
clearInterval(obj.timer);
callback();
}
obj.style[attr] =newPosition+ "px";
// console.log(div01.style.left);
},100);
}
window.onload=function (){
var btn01= document.getElementById('btn01')
var btn02= document.getElementById('btn02')
var div01=document.getElementById('div01')
var div02=document.getElementById('div02')
// document.onkeydown=function (event){
// event=event ||window.event
// console.log(event.keyCode);
// switch (event.keyCode){
// case 37:
// move(div01,10,500);
// console.log(event.keyCode);
// break;
//
//
// case 39:
// move(div01,10,0);
// console.log(event.keyCode);
// break;
// }
// }
btn01.onclick=function (){
// move(div01,"top",10,500);
move(div01,"left",10,500,function (){
move(div02,"width",10,500,function (){
move(div02,"height",10,600,function (){
move(div02,"top",10,0,function (){
alert("执行完毕")
})
})
})
});
};
btn02.onclick=function (){
move(div01,-10,0)
};
}
</script>
3 需求开发 div 用定时器控制速度；使用键盘事件控制方向
<script type="text/javascript">
window.onload=function (){
var dir=0;
var box1= document.getElementById('box1')
setInterval(function (){
var speed = 10;
switch (dir){
case 37:
box1.style.left=box1.offsetLeft - speed + "px";
break;
case 38:
box1.style.top=box1.offsetTop - speed + "px";
break;
case 39:
box1.style.left=box1.offsetLeft + speed + "px";
break;
case 40:
box1.style.top=box1.offsetTop + speed + "px";
break;
}
},30)
document.onkeydown=function (event){
//浏览器兼容性问题
event=event||window.event
console.log(event.keyCode)
if (event.ctrlKey){
speed=400;
}
dir=event.keyCode
}
}
</script>
