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 相关文章推荐
jquery 回车事件实现代码
Aug 23 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
JS创建对象的写法示例
Nov 04 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 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
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
php模板原理讲解
2013/11/13 PHP
用PHP代码给图片加水印
2015/07/01 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
python实现数字炸弹游戏
2020/07/17 Python
浅析NumPy 切片和索引
2020/09/02 Python
python跨文件使用全局变量的实现
2020/11/17 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
毕业评语大全
2014/05/04 职场文书
法制宣传标语
2014/06/23 职场文书
员工试用期自我评价
2014/09/18 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
pytorch 实现变分自动编码器的操作
2021/05/24 Python
详解Vue3使用axios的配置教程
2022/04/29 Vue.js
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL