发布于 2016-08-29 08:14:39 | 45 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。



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)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务