Heim >Web-Frontend >js-Tutorial >javascript延时重复执行函数 lLoopRun.js_javascript技巧

javascript延时重复执行函数 lLoopRun.js_javascript技巧

WBOY
WBOYOriginal
2016-05-16 19:11:481573Durchsuche

function lLoopRun(sFuncLoop,sFuncEnd,nDelay) {
//writen by http://fengyan.iecn.cn

//sFuncLoop >> 字符串型,需要重复执行的Javascript函数或语句(多个函数或语句请用;分隔)  
//sFuncEnd >> 字符串型,用于中止重复执行动作(sFuncLoop)的Javascript函数或语句 
//nDelay >> 数字型,重复执行的时间间隔(毫秒数) 
 var vintervalId = null;
 var runString  = sFuncLoop;
 var stopString  = sFuncEnd;
 var delayTime  = nDelay;
 //var nCount = 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);
}

几个实例代码:
水平往复运动: 

 

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

执行次数:0


javascript延时重复执行函数 lLoopRun.js_javascript技巧
<script> <br><!-- <br>function chgPos(sId,n){ <br> var o = document.getElementById(sId); <br> o.style.left = (parseInt(o.style.left)+n)+"px"; <br>} <br><br>function chgPosStop(sId,nMax){ <br> var o = document.getElementById(sId); <br> if(parseInt(o.style.left)<0){isReBack = false;} <br> if(parseInt(o.style.left)>nMax){isReBack = true;} <br> if(isReBack) { <br> nNum=-Math.abs(nNum); <br> } else { <br> nNum=Math.abs(nNum); <br> } <br>} <br><br>var nNum=10; <br>var isReBack = false; <br>lLoopRun("chgPos(&#146;IECN&#146;,nNum);","chgPosStop(&#146;IECN&#146;,600)",20); <br>--> <br></script>
 
 


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

执行次数:0


javascript延时重复执行函数 lLoopRun.js_javascript技巧
<script> <br><!-- <br><br>function chgPos(sId,n){ <br> var o = document.getElementById(sId); <br> o.width = (parseInt(o.width)+n); <br>} <br><br>function chgPosStop(sId,nMax){ <br> var o = document.getElementById(sId); <br> if(parseInt(o.width)<10){isReBack = false;} <br> if(parseInt(o.width)>nMax){isReBack = true;} <br> if(isReBack) { <br> nNum=-Math.abs(nNum); <br> } else { <br> nNum=Math.abs(nNum); <br> } <br> //return parseInt(o.style.left)>nMax || (parseInt(o.style.top)>nMax-200); <br>} <br><br>var nNum=10; <br>var isReBack = false; <br>lLoopRun("chgPos(&#146;IECN&#146;,nNum);","chgPosStop(&#146;IECN&#146;,500)",20); <br>--> <br></script>
 
 


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

执行次数:0


javascript延时重复执行函数 lLoopRun.js_javascript技巧
<script> <br><!-- <br>function chgPos(sId,n){ <br> var o = document.getElementById(sId); <br> o.style.top = (parseInt(o.style.top)+n)+"px"; <br>} <br><br>function chgPosStop(sId,nMax){ <br> var o = document.getElementById(sId); <br> if(parseInt(o.style.top)<0){isReBack = false;} <br> if(parseInt(o.style.top)>nMax){isReBack = true;} <br> if(isReBack) { <br> nNum=-Math.abs(nNum); <br> } else { <br> nNum=Math.abs(nNum); <br> } <br> //return parseInt(o.style.top)>nMax || (parseInt(o.style.top)>nMax-200); <br>} <br><br>var nNum=10; <br>var isReBack = false; <br>lLoopRun("chgPos(&#146;IECN&#146;,nNum);","chgPosStop(&#146;IECN&#146;,300)",20); <br>--> <br></script>
 
 


渐变显示(图片): 
 
 
lLoopRun.js 应用实例: 渐变显示效果 
 
 
 
<script></script>
 
 

执行次数:0


javascript延时重复执行函数 lLoopRun.js_javascript技巧

刷新再次查看演示效果
<script> <br><!-- <br>function chgOpacity(sId,n){ <br> var o = document.getElementById(sId); <br> if (o.filters) { <br> o.filters[0].Opacity = parseInt(o.filters[0].Opacity) + n; <br> } else { <br> o.style.opacity= eval(document.defaultView.getComputedStyle(o,null).getPropertyValue(&#146;opacity&#146;)) + (n*100/10000); <br> } <br>} <br><br>function chgOpacityStop(sId){ <br> var o = document.getElementById(sId); <br> if (o.filters) { <br> return parseInt(o.filters[0].Opacity)>=99; <br> } else { <br> return eval(o.style.opacity)>=0.99; <br> } <br>} <br><br>lLoopRun("chgOpacity(&#146;IECN&#146;,1);","chgOpacityStop(&#146;IECN&#146;)",20); <br>--> <br></script>
 
 


原文:http://fengyan.iecn.cn/blog-html-do-showone-uid-35653-type-blog-itemid-2320.html 
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn