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

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=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/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=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/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=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/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=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/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 

时间： 2024-11-08 20:17:09

javascript延时重复执行函数 lLoopRun.js_javascript技巧的相关文章

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

公司的一个项目中,有许多地方需要延时执行一些可重复性的函数(动作),就写了下面这段函数. 呵呵,不知道取什么意思更为确切些,就定为了:LoopRun,意为"重复执行"  function lLoopRun(sFuncLoop,sFuncEnd,nDelay) {   var vintervalId = null;   var runString  = sFuncLoop;   var stopString  = sFuncEnd;   var delayTime  = nDelay;

JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案_javascript技巧

一个简单的利用正则判断输入是否为数字: input1 = '0281234567';input2 = '0282345678';var reg = /^\d+$/g; reg.test(input1); //true reg.test(input2); //false 发现第二次test的时候返回的值不对了.排除书写错误,取值失败等等各种干扰因素后,发现仅仅是reg正则第二次执行的时候就无法正确执行了.之前并未遇到过这个问题,便搜索了一下相关信息. 原来这个问题实际上是/g导致的,而此时也才发现

javascript学习笔记之函数定义_javascript技巧

函数声明式 function funname( 参数 ){ ...执行的代码 } 声明式的函数并不会马上执行,需要我们调用才会执行:funname();  * 分号是用来分隔可执行JavaScript语句,由于函数声明不是一个可执行语句,所以不以分号结束. 函数表达式 var x = function( 参数 ){ ...执行的代码块 }; 函数表达式定义的函数,实际上也是一个匿名函数(这个函数没有名字,直接存储在变量中)  * 函数表达式结尾是要加分号的,因为它是一个执行语句. Functio

JavaScript实现的CRC32函数示例_javascript技巧

本文实例讲述了JavaScript实现的CRC32函数.分享给大家供大家参考,具体如下: 简介: CRC的全称是循环冗余校验.可用于验证数据的完整性. javascript实现代码如下: (function() { var table = "00000000 77073096 EE0E612C 990951BA 076DC419 706AF48F E963A535 9E6495A3 0EDB8832 79DCB8A4 E0D5E91E 97D2D988 09B64C2B 7EB17CBD E7B

详解JavaScript中常用的函数类型_javascript技巧

网页中的java代码需要写在JavaScript中,里面部分少不了函数,介绍一下JavaScript中常用的函数类型.1.可变函数 <script> function show(){ alert("第一个..."); } function show(str){ alert("第二个"); } function show(a,b){ alert("第三个..."); alert(a+":"+b); } </sc

javascript最基本的函数汇总_javascript技巧

我记得早期的 JavaScript ,要完成任何事情几乎都绕不开一些简单的函数,因为浏览器提供商实现功能有所差异,而且不只是边缘功能,基础功能也一样,如 addEventListener 和 attachEvent.虽然时代变了,但仍有一些函数是每个开发者都应该掌握的,以便于完成某些功能和提高性能. debounce 对于高耗能事件,debounce 函数是一种不错解决方案.如果你不对 scroll.resize.和 key* 事件使用 debounce  函数,那么你几乎等同于犯了错误.下面的

JavaScript日期时间格式化函数分享_javascript技巧

这个函数经常用到,分享给大家. 函数代码: 复制代码 代码如下: Date.prototype.format = function(format){    var o = {    "M+" : this.getMonth()+1, //month    "d+" : this.getDate(),    //day    "h+" : this.getHours(),   //hour    "m+" : this.getM

ASP 过滤数组重复数据函数(加强版)_javascript技巧

函数代码: 复制代码 代码如下: <%'******************************************************* '过滤数组重复函数名称:array_no(cxstr1,cxstr2,cxstr3) 'cxstr1:任意的字符串,自动识别 'cxstr2:cxstr1中分割符号. 'cxstr3:提取结果中的某一位置字串,等于0时返回为全部,大于数组下标时返回最后. '使用于二维数组 '************************************

理解javascript中的回调函数(callback)_javascript技巧

最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: 复制代码 代码如下: app.use(function(req, res, next) {     var err = new Error('Not Found');     err.status = 404;     next(err); }); app是对象,use是方法,方法的参数是一个带参的匿名函数,函数体直接在后面给出了.这段代码