|
|
如何在HTML页面中使用js文件
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
广告招租，e-mail:yesize@hotmail.com 如果您已经熟悉了HTML代码和javascipt，又可以使用可视化的网页制作工具制作网页，那我就再来教您一点技巧。 把JavaScript的脚本包括在HTML中 把JavaScript的脚本包括在HTML中，使它成为HTML文档的一部分。这样javascript与HTML标识相结合，可以构造出功能强大的动态网页。 直接将JavaScript脚本加入文档的方法： <Script Language =JavaScript> JavaScript语言代码； JavaScript 语言代码; .... </Script> 但是这种程序多了，加上HTML标记代码，你的源文件看上去就会十分庞大，使HTML文档可读性不强。 从html代码中分离出js文件 这时把<scirpt>和</script>之间的代码分离出来，存成一个.js文件就易于管理了。 举例： 我们利用这种思路来看一下目前大多数网站上的漂浮物广告的管理。 一般情况下，网页制作人员都是利用Dreamweaver或者其他可视化的网页制作工具完成这项工作。但无论如何最终这些可视化的工具都会将一段javascirpt放在<head>和</head>之间。然后你还需要在<body>中处理onload 事件。 我们不用这种方法，请将下面这段代码copy到你的记事本里，然后选择文件->另存为，在输入框中键入mover.js（引号不能少，以便保证你存储的文件的括展名是.js） /*** ****作者:你的大名 ****时间:写上更新的时间 */ <!--// Begin var ie4up=(document.all) ? 1 : 0; var ns4up=(document.layers) ? 1 : 0; // 判断是Netscpe4浏览器还是IE4浏览器或者以后版本 var imgAmount=1; // 漂浮物的数量，一般是1个。除非你想让你的页面下雪或者天兵下降(飞行员跳伞) var moveSpeed=80; // moveSpeed值与漂浮物的移动速度成反比，越大，移动速度越快。反之，越慢 var imageSource=http://images.163.com/images/logo/intel0424.gif; //图片的路径 var url=http://it.163.com/ // 连接地址(红色部分为广告更新时需要变动的地方) var dx, xp, yp; var am, stx, sty; var i, docWidth=400, docHeight=600; if(ns4up){ docWidth=self.innerWidth; docHeight=self.innerHeight; }else if(ie4up){ docWidth=document.body.clientWidth; docHeight=document.body.clientHeight; } dx=new Array(); xp=new Array(); yp=new Array(); am=new Array(); stx=new Array(); sty=new Array(); for(i=0;i< imgAmount; ++i){ dx[i]=0; xp[i]=Math.random()*(docWidth-50); yp[i]=Math.random()*docHeight; am[i]=Math.random()*20; stx[i]=0.02+Math.random()/10; sty[i]=0.7+Math.random(); if(ns4up){ if(i==0){ //NS下只漂一个图片 document.write(<html><title></title><body>); document.write(<layer name=\inTheAir+i+\ left=\30\ ); document.write(top=\30\ visibility=\show\><A href=\+url+\ target=\_blank\><img src=\); document.write(imageSource+\ border=\0\></layer>); document.write(</body></html>); }else{ document.write(<html><title></title><body>); document.write(<layer name=\inTheAir+i+\ left=\30\ ); document.write(top=\30\ visibility=\show\><A href=\+url+\ target=\_blank\><img src=\); document.write(imageSource+\ border=\0\></layer>); document.write(</body></html>); } }else if(ie4up){ if(i==0){ //IE下只漂一个图片 document.write(<html><title></title><body>); document.write(<div id=\inTheAir+i+\ style=\POSITION: ); document.write(absolute; Z-INDEX: +i+; VISIBILITY: ); document.write(visible; TOP: 15px; LEFT: 15px;\><a href=\+url+\ target=\_blank\><img src=\); document.write(imageSource+\ border=\0\></div>); document.write(</body></html>); }else{ document.write(<html><title></title><body>); document.write(<div id=\inTheAir+i+\ style=\POSITION: ); document.write(absolute; Z-INDEX: +i+; VISIBILITY: ); document.write(visible; TOP: 15px; LEFT: 15px;\><a href=\+url+\ target=\_blank\><img src=\); document.write(imageSource+\ border=\0\></div>); document.write(</body></html>); } } } function moveOnNs(){ //在NS下调用此函数 for(i=0;i< imgAmount; ++ i){ // iterate for every inTheAir yp[i] += sty[i]; if(yp[i] > docHeight-50){ xp[i]=Math.random()*(docWidth-am[i]-30); yp[i]=0; stx[i]=0.02+Math.random()/10; sty[i]=0.7+Math.random(); docWidth=self.innerWidth; docHeight=self.innerHeight; } dx[i] += stx[i]; document.layers[inTheAir+i].top=yp[i]; document.layers[inTheAir+i].left=xp[i]+am[i]*Math.sin(dx[i]); } setTimeout(moveOnNs(), moveSpeed); } function moveOnIE(){ //在IE下调用此函数 for(i=0;i< imgAmount; ++ i){ // iterate for every inTheAir yp[i] += sty[i]; if(yp[i] > docHeight-50){ xp[i]=Math.random()*(docWidth-am[i]-30); yp[i]=0; stx[i]=0.02+Math.random()/10; sty[i]=0.7+Math.random(); docWidth=document.body.clientWidth; docHeight=document.body.clientHeight; } dx[i] += stx[i]; document.all[inTheAir+i].style.pixelTop=yp[i]; document.all[inTheAir+i].style.pixelLeft=xp[i]+am[i]*Math.sin(dx[i]); } setTimeout(moveOnIE(), moveSpeed); } if(ns4up){ moveOnNs(); }else if(ie4up){ moveOnIE(); } // End --> 然后在你页面的<head>和</head>之间加入<script language=javascript src=foo/mover.js></script>，就可以调用这个js文件了。 如果销售部通知更新这个漂浮广告，你可以让他们自己做这项工作。告诉他只需打开这个.js文件换一下图片的连接和图片的指向就可以了，无需变动你的网页，这样你能节省不少时间。 使用js文件的好处还体现在更新整个网站中某一固定内容的时候，例如网站的copy right部分，如果你网站的所有页面都有这部分内容，你就可以把这部分代码存成一个copyright.js文件。待老板发话更新这部分内容时，你只需更改这个文件，整个网站所有页面的copy right就全部更新了。
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
加入最爱
热门小游戏分类 
