javascript延时重复执行函数 lLoopRun.js_Javascript教程-查字典教程网
javascript延时重复执行函数 lLoopRun.js
javascript延时重复执行函数 lLoopRun.js
发布时间:2016-12-30 来源:查字典编辑
摘要:functionlLoopRun(sFuncLoop,sFuncEnd,nDelay){//writenbyhttp://fengyan.i...

functionlLoopRun(sFuncLoop,sFuncEnd,nDelay){

//writenbyhttp://fengyan.iecn.cn

//sFuncLoop>>字符串型,需要重复执行的Javascript函数或语句(多个函数或语句请用;分隔)

//sFuncEnd>>字符串型,用于中止重复执行动作(sFuncLoop)的Javascript函数或语句

//nDelay>>数字型,重复执行的时间间隔(毫秒数)

varvintervalId=null;

varrunString=sFuncLoop;

varstopString=sFuncEnd;

vardelayTime=nDelay;

//varnCount=0;//执行次数//为便于测试,应用时就将此行注释掉

this._doLoop=function(){

if(vintervalId&&!eval(stopString)){

eval(runString);

//nCount++;//记录执行次数//为便于测试,应用时就将此行注释掉

}else{

window.clearInterval(vintervalId);

vintervalId=null;

}

//document.getElementById("TestCount").innerHTML=nCount;//输出执行次数//为便于测试,应用时就将此行注释掉

}

window.clearInterval(vintervalId);

vintervalId=window.setInterval(this._doLoop,delayTime);

}

几个实例代码:

水平往复运动:

<html>

<head>

<title>lLoopRun.js应用实例:水平往复运动</title>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<metaname="Author"content="CnLei,枫岩"/>

<styletype="text/css">

#IECN{position:absolute;}

</style>

<scripttype="text/javascript"src="lLoopRun.js"></script>

</head>

<body>

<p>执行次数:<strongid="TestCount">0</strong></p>

<imgid="IECN"src="http://bbs.iecn.net/attach-iecn/upload/7574.gif"style="left:0px;top:0px;"width="120"/>

<scripttype="text/javascript">

<!--

functionchgPos(sId,n){

varo=document.getElementById(sId);

o.style.left=(parseInt(o.style.left)+n)+"px";

}

functionchgPosStop(sId,nMax){

varo=document.getElementById(sId);

if(parseInt(o.style.left)<0){isReBack=false;}

if(parseInt(o.style.left)>nMax){isReBack=true;}

if(isReBack){

nNum=-Math.abs(nNum);

}else{

nNum=Math.abs(nNum);

}

}

varnNum=10;

varisReBack=false;

lLoopRun("chgPos(’IECN’,nNum);","chgPosStop(’IECN’,600)",20);

-->

</script>

</body>

</html>

自动伸缩大小:

<html>

<head>

<title>lLoopRun.js应用实例:自动伸缩大小</title>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<metaname="Author"content="CnLei,枫岩"/>

<scripttype="text/javascript"src="lLoopRun.js"></script>

</head>

<body>

<p>执行次数:<strongid="TestCount">0</strong></p>

<imgid="IECN"src="http://bbs.iecn.net/attach-iecn/upload/7574.gif"style="left:0px;top:0px;"width="120"/>

<scripttype="text/javascript">

<!--

functionchgPos(sId,n){

varo=document.getElementById(sId);

o.width=(parseInt(o.width)+n);

}

functionchgPosStop(sId,nMax){

varo=document.getElementById(sId);

if(parseInt(o.width)<10){isReBack=false;}

if(parseInt(o.width)>nMax){isReBack=true;}

if(isReBack){

nNum=-Math.abs(nNum);

}else{

nNum=Math.abs(nNum);

}

//returnparseInt(o.style.left)>nMax||(parseInt(o.style.top)>nMax-200);

}

varnNum=10;

varisReBack=false;

lLoopRun("chgPos(’IECN’,nNum);","chgPosStop(’IECN’,500)",20);

-->

</script>

</body>

</html>

垂直往复运动:

<html>

<head>

<title>lLoopRun.js应用实例:垂直往复运动</title>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<metaname="Author"content="CnLei,枫岩"/>

<styletype="text/css">

#IECN{position:absolute;}

</style>

<scripttype="text/javascript"src="lLoopRun.js"></script>

</head>

<body>

<p>执行次数:<strongid="TestCount">0</strong></p>

<imgid="IECN"src="http://bbs.iecn.net/attach-iecn/upload/7574.gif"style="left:0px;top:0px;"width="120"/>

<scripttype="text/javascript">

<!--

functionchgPos(sId,n){

varo=document.getElementById(sId);

o.style.top=(parseInt(o.style.top)+n)+"px";

}

functionchgPosStop(sId,nMax){

varo=document.getElementById(sId);

if(parseInt(o.style.top)<0){isReBack=false;}

if(parseInt(o.style.top)>nMax){isReBack=true;}

if(isReBack){

nNum=-Math.abs(nNum);

}else{

nNum=Math.abs(nNum);

}

//returnparseInt(o.style.top)>nMax||(parseInt(o.style.top)>nMax-200);

}

varnNum=10;

varisReBack=false;

lLoopRun("chgPos(’IECN’,nNum);","chgPosStop(’IECN’,300)",20);

-->

</script>

</body>

</html>

渐变显示(图片):

<html>

<head>

<title>lLoopRun.js应用实例:渐变显示效果</title>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<metaname="Author"content="CnLei,枫岩"/>

<styletype="text/css">

body{background:#080;color:#fff;}

#IECN{

background:#fff;

filter:Alpha(opacity=10);

-moz-opacity:.10;

opacity:.10;

}

</style>

<scripttype="text/javascript"src="lLoopRun.js"></script>

</head>

<body>

<p>执行次数:<strongid="TestCount">0</strong></p>

<imgid="IECN"src="http://bbs.iecn.net/attach-iecn/upload/7574.gif"style="left:0px;top:0px;"width="120"/><br/><br/>刷新再次查看演示效果

<scripttype="text/javascript">

<!--

functionchgOpacity(sId,n){

varo=document.getElementById(sId);

if(o.filters){

o.filters[0].Opacity=parseInt(o.filters[0].Opacity)+n;

}else{

o.style.opacity=eval(document.defaultView.getComputedStyle(o,null).getPropertyValue(’opacity’))+(n*100/10000);

}

}

functionchgOpacityStop(sId){

varo=document.getElementById(sId);

if(o.filters){

returnparseInt(o.filters[0].Opacity)>=99;

}else{

returneval(o.style.opacity)>=0.99;

}

}

lLoopRun("chgOpacity(’IECN’,1);","chgOpacityStop(’IECN’)",20);

-->

</script>

</body>

</html>

原文:http://fengyan.iecn.cn/blog-html-do-showone-uid-35653-type-blog-itemid-2320.html

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类