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

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

赞 (0)

相关推荐

  • JavaScript OOP类与继承

    类:分为公开的和私有的 复制代码 代码如下: function Person(n){ var name=n; //私有属性 function hello(){} //私有方法一 var hello2() = function(){} //私有方法二 this.Name = "张三"; //公开成员一 this.Hello = function(){ //公开方法一 this.Name; //公开方法中可以调用私有方法与属性 name; } } Person.prototype.Age=

  • JS OOP包机制,类创建的方法定义

    复制代码 代码如下: /** * 定义包 * @param {} ns * @return {} */ Xu.pkg = function(ns) { if (!ns || !ns.length) { return null; } var levels = ns.split("."); var nsobj = Xu; for (var i = (levels[0] == "Xu") ? 1 : 0; i < levels.length; ++i) { nsob

  • JavaScript OOP面向对象介绍

    OOP 语言使我们有能力自定义对象和变量类型. 面向对象编程 JavaScript 是面向对象的编程语言 (OOP).OOP 语言使我们有能力定义自己的对象和变量类型.对象拥有属性和方法. 属性 属性指与对象有关的值. 举例: 复制代码 代码如下: <script type="text/javascript"> var txt="Hello World!" document.write(txt.length) //使用字符串对象的长度属性来计算字符串中的

  • Node.js事件循环（Event Loop）和线程池详解

    Node的"事件循环"(Event Loop)是它能够处理大并发.高吞吐量的核心.这是最神奇的地方,据此Node.js基本上可以理解成"单线程",同时还允许在后台处理任意的操作.这篇文章将阐明事件循环是如何工作的,你也可以感受到它的神奇. 事件驱动编程 理解事件循环,首先要理解事件驱动编程(Event Driven Programming).它出现在1960年.如今,事件驱动编程在UI编程中大量使用.JavaScript的一个主要用途是与DOM交互,所以使用基于事件

  • javascript基于prototype实现类似OOP继承的方法

    本文实例讲述了javascript基于prototype实现类似OOP继承的方法.分享给大家供大家参考,具体如下: 这里要说明的是,公有属性(使用this.修饰符)可以被覆盖,私有属性(使用var 修饰符)不能被覆盖 子类不能访问父类的私有属性,父类的方法正常访问父类的私有变量. function Vegetable(){ this.taste='delicious'; var a = 'I\'m Vegetable\'a!' this.fun1 = function(){ alert('Veg

  • 玩转JavaScript OOP - 类的实现详解

    玩转JavaScript OOP - 类的实现详解

    概述 当我们在谈论面向对象编程时,我们在谈论什么? 我们首先谈论的是一些概念:对象.类.封装.继承.多态. 对象和类是面向对象的基础,封装.继承和多态是面向对象编程的三大特性. JavaScript提供了对象却缺乏类,它不能像C#一样能显式地定义一个类. 但是JavaScript的函数功能非常灵活,其中之一就是构造函数,结合构造函数和原型对象可以实现"类". 对象和类的概念 对象 "对象"是面向对象编程中非常重要的一个概念,一个对象是一个"东西"

  • Javascript oop设计模式 面向对象编程简单实例介绍

    Javascript oop设计模式 面向对象编程 最初我们写js代码的时候是这么写 function checkName(){ //验证姓名 } function checkEmail(){ //验证邮箱 } function checkPassword(){ //验证密码 } 这种方式会造成全局变量的严重污染,再过渡到 var checkObject = { checkName : function(){}; checkEmail: function(){}; checkPassword:

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

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

  • javascript oop开发滑动(slide)菜单控件

    这里使用原生的javascript,用面向对象的方式创建一个容易维护使用方便的滑动菜单,调用方式如下: 复制代码 代码如下: var $sliding = document.getElementById("silding"); var s1 = new Sliding(); s1.commands = $sliding.getElementsByTagName("dt"); s1.panels = $sliding.getElementsByTagName(&quo

  • JavaScript运行机制之事件循环(Event Loop)详解

    JavaScript运行机制之事件循环(Event Loop)详解

    一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线

  • javascript 原型模式实现OOP的再研究

    复制代码 代码如下: 复制代码 代码如下: function A() { this.v1 = 10; } A.prototype.print = function() { alert(this.v1); } function B() { } B.prototype = new A(); new B().print(); 运行这段代码输出是10,看起来好像是类B继承了类A的方法print,并产生了正确的输出,实际上的执行流程是在类B生成的对象中,不能直接得到方法print,于是在它的prototy

  • Nodejs全栈框架StrongLoop推荐

    Nodejs全栈框架StrongLoop推荐

    StrongLoop是一个基于Nodejs的强大框架,几乎包含了移动开发全栈所需要的所有功能.2013年成立,很少的员工,一个技术驱动,执行力强大的团队.也是在13年我开始接触StrongLoop,当时是为了做nodejs方面的技术选型,看了许多框架,LoopBack是我觉得最酷的一个.我还记得当时是觉得LoopBack的文档太差(主要是跟在线的版本不一样),不知道能活多久所以才放弃了它.时隔一年回来看到这个绿油油的框架,这一年可真是突飞猛进呢. 全栈框架StrongLoop StrongLoo

  • Javascript OOP之面向对象

    面向对象程序设计(Object-oriented programming,OOP)是一种程序设计范型,同时也是一种程序开发的方法.对象指的是类的实例.它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的重用性.灵活性和扩展性.--维基百科 一般面向对象包含:继承,封装,多态,抽象 对象形式的继承 浅拷贝 var Person = { name: 'allin', age: 18, address: { home: 'home', office: 'office', } sclools:

随机推荐