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


Posted in Javascript onJune 29, 2007

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 

Javascript 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
原生javascript获取元素样式属性值的方法
Dec 25 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
js实现不重复导入的方法
Mar 02 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
JavaScript 编程引入命名空间的方法
Jun 29 #Javascript
你需要知道的JavsScript可以做什么?
Jun 29 #Javascript
ECMAScript 基础知识
Jun 29 #Javascript
javascript中的几个运算符
Jun 29 #Javascript
一个加载js文件的小脚本
Jun 28 #Javascript
javascript实现的鼠标链接提示效果生成器代码
Jun 28 #Javascript
用js实现控制内容的向上向下滚动效果
Jun 26 #Javascript
You might like
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
基于Django模板中的数字自增(详解)
2017/09/05 Python
Python paramiko模块的使用示例
2018/04/11 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
python实现图片素描效果
2020/09/26 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
HTML5 Canvas渐进填充与透明实现图像的Mask效果
2013/07/11 HTML / CSS
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
《少年王冕》教学反思
2014/04/11 职场文书
典型事迹材料范文
2014/12/29 职场文书
手机销售员岗位职责
2015/04/11 职场文书
物业管理交接协议书
2016/03/24 职场文书