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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 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学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
PHP取进制余数函数代码
2012/01/19 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
javascript验证身份证号
2015/03/03 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
Python程序设计入门(4)模块和包
2014/06/16 Python
Python标准库之sqlite3使用实例
2014/11/25 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
anaconda如何查看并管理python环境
2019/07/05 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
一个入门级python爬虫教程详解
2021/01/27 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
毕业生自荐书模版
2014/01/04 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
会计人员演讲稿
2014/09/11 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书