定时器
for瞬间完成，没有时间依据
for(var i=0;i<100;i++){
console.log(i);
}var timer=setInterval(函数，毫秒); 重复执行 clearInterval(timer); 清空定时器
var timer=setTimeout(函数，毫秒); 执行一次 (像炸弹一样执行一次) clearInterval(timer);
var i=0;
var timer=null;
function a(){
document.title=i++;
if(i==6){
clearInterval(timer);
}
}
timer= setInterval(a,1000);广告效果
window.onload= function () {
//找到图片
var oimg=document.getElementById('oimg');
//2s之后图片显示并且居中
setTimeout(function () {
oimg.style.display='inline-block';
//2s之后消失
setTimeout(function () {
oimg.style.display='none';
},2000)
},2000)
};替换背景
var sum=0;
var timer=null;
var begin=document.getElementById('begin');
var stop=document.getElementById('stop');
function fnbg(){
var bg=['1.jpg','2.jpg','3.jpg'];
document.body.style.background='url('+bg[sum]+')';
console.log(document.body.style.background);
sum++;
sum%=bg.length;
}
begin.onclick= function () {
timer=setInterval(fnbg,1000);
};
stop.onclick= function () {
clearInterval(timer);
}仿qq，移入移出
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#qq{
width: 200px;
height: 400px;
background: #eee;
}
#title{
width: 240px;
height: 180px;
background: yellow;
position: absolute;
left: 210px;
top: 0;
display: none;
}
</style>
<script>
window.onload= function () {
var qq=document.getElementById('qq');
var title=document.getElementById('title');
var timer=null;
qq.onmouseover= function () {
title.style.display='block';
};
qq.onmouseout= function () {
timer=setTimeout(function () {
title.style.display='none';
},200)
};
title.onmouseover= function () {
clearInterval(timer);
title.style.display='block';
};
title.onmouseout= function () {
title.style.display='none';
};
};
</script>
</head>
<body>
<div id="qq"></div>
<div id="title"></div>
</body>
</html>往前走
window.onload= function () {
var btn=document.getElementById('btn');
var div1=document.getElementById('div1');
btn.onclick= function () {
clearInterval(div1.timer);
div1.timer=setInterval(function () {
var speed=parseInt(getStyle(div1,'left'))+2;
if(speed>800){
speed=800;
}
div1.style.left=speed+'px';
if(speed==800){
clearInterval(div1.timer);
}
},30)
};
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
};往前往后走
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 60px;
background: red;
}
</style>
<script>
window.onload= function () {
var btn=document.getElementById('pre');
var hou=document.getElementById('hou');
var div1=document.getElementById('div1');
btn.onclick= function () {
clearInterval(div1.timer);
div1.timer=setInterval(function () {
var speed=parseInt(getStyle(div1,'left'))+12;
if(speed>800){
speed=800;
}
div1.style.left=speed+'px';
if(speed==800){
clearInterval(div1.timer);
}
},30)
};
hou.onclick= function () {
clearInterval(div1.timer);
div1.timer=setInterval(function () {
var speed=parseInt(getStyle(div1,'left'))+-12;
if(speed<10){
speed=10;
}
div1.style.left=speed+'px';
if(speed==10){
clearInterval(div1.timer);
}
},30)
};
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
};
</script>
</head>
<body>
<input type="button" value="往前" id="pre"/>
<input type="button" value="往后" id="hou"/>
<div id="div1"></div>
</body>
</html>封装一下函数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 60px;
background: red;
}
</style>
<script>
window.onload= function () {
var btn=document.getElementById('pre');
var hou=document.getElementById('hou');
var div1=document.getElementById('div1');
btn.onclick= function () {
fnmove(div1,12,800);
};
hou.onclick= function () {
fnmove(div1,-12,10);
};
function fnmove(obj,dir,target){
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var speed=parseInt(getStyle(obj,'left'))+dir;
console.log(speed);
if(speed>target && dir>0){
speed=target;
}
if(speed<target && dir<0){
speed=target;
}
obj.style.left=speed+'px';
if(speed==target){
clearInterval(obj.timer);
}
},30)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
};
</script>
</head>
<body>
<input type="button" value="往前" id="pre"/>
<input type="button" value="往后" id="hou"/>
<div id="div1"></div>
</body>
</html>上下左右走
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 60px;
background: red;
}
</style>
<script>
window.onload= function () {
var btn=document.getElementById('pre');
var hou=document.getElementById('hou');
var div1=document.getElementById('div1');
var shang=document.getElementById('shang');
var xia=document.getElementById('xia');
btn.onclick= function () {
fnmove(div1,'left',12,800);
};
hou.onclick= function () {
fnmove(div1,'left',-12,10);
};
shang.onclick= function () {
fnmove(div1,'top',-12,60);
};
xia.onclick= function () {
fnmove(div1,'top',12,500);
};
function fnmove(obj,attr,dir,target){
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var speed=parseInt(getStyle(obj,attr))+dir;
if(speed>target && dir>0){
speed=target;
}
if(speed<target && dir<0){
speed=target;
}
obj.style[attr]=speed+'px';
if(speed==target){
clearInterval(obj.timer);
}
},30)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
};
</script>
</head>
<body>
<input type="button" value="往前" id="pre"/>
<input type="button" value="往后" id="hou"/>
<input type="button" value="往上" id="shang"/>
<input type="button" value="往下" id="xia"/>
<div id="div1"></div>
</body>
</html>回调函数顺时针走
<!DOCTYPE html>
<html id="aaaa">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#odiv{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 50px;
}
</style>
<script>
window.onload= function () {
var btn=document.getElementById('btn');
var odiv=document.getElementById('odiv');
btn.onclick= function () {
domove(odiv,'left',20,500, function () {
domove(odiv,'top',20,500, function () {
domove(odiv,'left',20,0, function () {
domove(odiv,'top',20,50);
})
})
});
};
function domove(obj,attr,dir,itarget,fn){
dir=parseInt(getStyle(obj,attr))<itarget?dir:-dir;
clearInterval( obj.timer);
obj.timer=setInterval(function () {
var speed=parseInt(getStyle(obj,attr))+dir;
if(speed>itarget && dir>0){
speed=itarget;
}
if(speed<itarget && dir<0){
speed=itarget;
}
obj.style[attr]=speed+'px';
if(speed==itarget){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
};
</script>
</head>
<body>
<input type="button" value="走" id="btn"/>
<div id="odiv"></div>
</body>
</html>一串div往上往下走
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.a{
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<script>
var str='';
var timer=null;
var num=0;
var len=20;
var bTrue=true;
var odiv=document.getElementsByTagName('div');
for(var i=0;i<len;i++){
str+='<div class="a" style="left:'+i*60+'px"></div>';
}
document.body.innerHTML=str;
document.onclick= function () {
if(bTrue){
toxia();
}else{
toshang();
}
};
function toxia(){
clearInterval(timer);
timer=setInterval(function () {
domove(odiv[num],20,500,'top');
num++;
if(num==len){
clearInterval(timer);
bTrue=false;
}
},60)
}
function toshang(){
clearInterval(timer);
timer=setInterval(function () {
num--;
domove(odiv[num],20,0,'top');
if(num==0){
clearInterval(timer);
bTrue=true;
}
},60)
}
function domove(obj,dir,itarget,attr,fn){
dir=parseInt(getByClass(obj,attr))<itarget?dir:-dir;
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var speed=parseInt(getByClass(obj,attr))+dir;
if(speed>=itarget && dir>0){
speed=itarget;
}
if(speed<=itarget && dir<0){
speed=itarget;
}
obj.style[attr]=speed+'px';
if(speed==itarget){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
function getByClass(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
</script>
</body>
</html>图片抖动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#oimg{
width: 200px;
position: absolute;
left: 200px;
top: 200px;
}
#oimg1{
width: 200px;
position: absolute;
left: 500px;
top: 200px;
}
</style>
<script>
window.onload= function () {
var oimg=document.getElementById('oimg');
var oimg1=document.getElementById('oimg1');
oimg.onclick=fn;
oimg1.onclick=fn;
function fn() {
var _this=this;
getDou( _this,'top', function () {
getDou(_this,'left');
});
}
function getDou(obj,attr,fn){
var arr=[];
var num=0;
var len=20;
for(var i=len;i>=0;i-=2){
arr.push(i,-i);
}
clearInterval(obj.timer);
obj.timer=setInterval(function () {
obj.style[attr]=parseInt(getByClass(obj,attr))+arr[num]+'px';
num++;
if(num==len){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30);
}
function getByClass(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
};
</script>
</head>
<body>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.01.02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读