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 相关文章推荐
实例:尽可能写友好的Javascript代码
Oct 09 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
深入理解Promise.all
Aug 08 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
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采集中国代理服务器网的方法
2015/06/16 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
jupyter notebook实现显示行号
2020/04/13 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
网络体系结构及协议的定义
2014/03/13 面试题
初一地理教学反思
2014/01/16 职场文书
益达广告词
2014/03/14 职场文书
职工代表大会主持词
2014/04/01 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
应届大专生求职信
2014/06/26 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
MySQL系列之二 多实例配置
2021/07/02 MySQL
linux下安装redis图文详细步骤
2021/12/04 Redis
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫