javascript延时重复执行函数 lLoopRun.js

  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);

  }

  几个实例代码:

  水平往复运动:

  <html>

  <head>

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

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

  <meta name="Author" content="CnLei,枫岩" />

  <style type="text/css">

  #IECN {position:absolute;}

  </style>

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

  </head>

  <body>

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

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

  <script type="text/javascript">

  <!--

  function chgPos(sId,n){

  var o = document.getElementById(sId);

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

  }

  function chgPosStop(sId,nMax){

  var o = 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);

  }

  }

  var nNum=10;

  var isReBack = false;

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

  -->

  </script>

  </body>

  </html>

  自动伸缩大小:

  <html>

  <head>

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

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

  <meta name="Author" content="CnLei,枫岩" />

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

  </head>

  <body>

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

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

  <script type="text/javascript">

  <!--

  function chgPos(sId,n){

  var o = document.getElementById(sId);

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

  }

  function chgPosStop(sId,nMax){

  var o = 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);

  }

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

  }

  var nNum=10;

  var isReBack = false;

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

  -->

  </script>

  </body>

  </html>

  垂直往复运动:

  <html>

  <head>

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

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

  <meta name="Author" content="CnLei,枫岩" />

  <style type="text/css">

  #IECN {position:absolute;}

  </style>

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

  </head>

  <body>

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

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

  <script type="text/javascript">

  <!--

  function chgPos(sId,n){

  var o = document.getElementById(sId);

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

  }

  function chgPosStop(sId,nMax){

  var o = 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);

  }

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

  }

  var nNum=10;

  var isReBack = false;

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

  -->

  </script>

  </body>

  </html>

  渐变显示(图片):

  <html>

  <head>

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

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

  <meta name="Author" content="CnLei,枫岩" />

  <style type="text/css">

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

  #IECN {

  background:#fff;

  filter: Alpha(opacity=10);

  -moz-opacity:.10;

  opacity:.10;

  }

  </style>

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

  </head>

  <body>

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

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

  <script type="text/javascript">

  <!--

  function chgOpacity(sId,n){

  var o = 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);

  }

  }

  function chgOpacityStop(sId){

  var o = document.getElementById(sId);

  if (o.filters) {

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

  } else {

  return eval(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