*/ 出自： 编程中国 http://www.bc-cn.net
*/ 作者： 编程之星 E-mail：rostar@126.com QQ：150163704
*/ 时间： 2007-9-2 编程论坛首发
*/ 声明： 尊重作者劳动，转载请保留本段文字
*/ --------------------------------------------------------------------------------------
菜鸟应用JAVASCRIPT 之 简易随机广告程序
--编程之星
2003-8-31
大家好,今天想跟大家学习讨论一下一个简单而又有点实用的程序,如题--随机广告程序.类似的程序相信大家应该在网上看到过不少啦.而我也花了一点时间来写了个这样的程序,希望这个程序对Javascript初学者起到点抛砖引玉的作用吧.当然大家也可以下载该程序来学习也好,测试也好,使用也好,可以随便修改该程序,有什么意见和建议,就回贴说明一下吧.
程序测试连接:
http://rostar.xinwen520.net/简易随机广告程序.html
程序完整源代码如下:
<html>
<head>
<script>
var pics=new Array();
var links=new Array();
pics[0]=new Image();
pics[0].src="6.jpg";
links[0]="http://www.zjac.com/"
pics[1]=new Image();
pics[1].src="8.jpg";
links[1]="http://www.126.com/"
pics[2]=new Image();
pics[2].src="16.jpg";
links[2]="http://www.yinsha.com/"
function changePicture()
{
var NO=Math.floor(Math.random()*3);
document.links[0].href=links[NO];
document.links[0].title=links[NO];
document.images[0].src=pics[NO].src;
status=links[NO];
STOP=setTimeout("changePicture()",1000);
}
function stopChange()
{
clearTimeout(STOP);
}
function changeAgin()
{
changePicture();
}
</script>
</head>
<body onload="changePicture()">
<a href="http://www.zjac.com/"><img src="6.jpg" width="300" height="200" onmouseover="stopChange()" onmouseout="changeAgin()"></a>
</body>
</html>
下面我来详细地分析一下整个程序,当然这个分析过程只针对像我们这些的菜鸟级学员的,如果是高手了的话,就不要看分析啦,免得我有些地方解释得不太好的,那我就很不好意思的啦.好啦,废话不多说了,现在进入主题.
在整个程序中,我们可以看到共有2个数组和3个函数,接下来我们一个个地来看.
数组分析:
1. pics[]数组
首先我们看到这样一句var pics=new Array();这表示声明一个数组pics.这个数组主要用来存储所以本程序所用到的广告图片的地址的.程序的第3行代码是这样的: pics[0]=new Image();这表示为pics[]数组的第1个数组元素构造一个图像对象存储,为什么要构造图像对象呢?因为构造图像对象可以先把图片装载入内存,从而就可以很好地避免了由于网络等原因所造成的图片浏览不顺畅的情况了.再看看pics[0].src="6.jpg";这表示将图片地址赋值给pics[]数组元素的src属性,但是为什么pics[]数组元素有个src属性呢?因为请不要忘了, pics[]数组存储的是图像对象,因为src属性本身就属于图像对象的一个属性,所以自然而然的, pics[0].src就没有什么问题啦.
2. links[]数组
这个数组是用来存储所要连接到的网址的.其他的也不需要做过多的解释了.
函数分析:
1. changePicture()函数
我们首先分析changePicture()函数,该函数是本程序的核心!用它来实现图片的随机替换等.先来看看该函数内部的第1句代码: var NO=Math.floor(Math.random()*3);这句表示声明一个NO变量并且将一个随机数赋值给NO变量.为什么要用到随机数呢?因为这程序本身就是一个随机性的程序,所以顺理成章的就采用随机数了. Math.floor(Math.random()*3)返回的是0或1或2这几个随机数.那么又为什么采用0或1或2呢?因为这匹配pics[]和links[]数组的下标.因为本程序的原理就是分别随机地从pics[]和links[]数组中提取图片地址和网址连接来实现随机广告的效果.接下来,我们可以看到document.links[0].href=links[NO];我们先来看看document.links[0],这表示引用网页中的第一个<a>标记对象,因为<a>标记本身就有个href属性,所以document.links[0].href就表示网页中的第一个<a>标记的href属性,整句document.links[0].href=links[NO]就表示随机抽取一个links[]数组元素赋值给网页中的第一个<a>标记的href属性(实现随机网址连接效果),不要忘了NO可是随机数哦.因为<a>标记也有title属性,所以document.links[0].title=links[NO]就不难理解啦.接着,我们看看这句代码: document.images[0].src=pics[NO].src,先看看document.images[0]吧,这表示引用网页中第一个<img>标记对象,结合前面的解释, document.images[0].src=pics[NO].src就表示随机地提取一个pics[]数组元素的src属性值赋值给网页中第一个<img>标记的src属性(实现随即显示图片效果).接着,可以看到status=links[NO];这表示在状态栏上显示随机网址.然后看看这句啦: STOP=setTimeout("changePicture()",1000); setTimeout()是Javascript里面的window对象的一个方法,其作用就是间隔一段时间(指定时间)就执行指定的操作. setTimeout("changePicture()",1000)表示每隔1秒钟(1000毫秒),就调用一次changePicture()函数,这实质上就是一个递归调用.那为什么要将这语句赋值给STOP呢?因为等一下我们就会解释到stopChange()函数,所以下面会有详细的解释.
2. stopChange()函数
该函数的作用就是停止图片的随机轮换,为什么要停止呢?因为习惯上,当我们把鼠标停留在不断轮换的图片上时,我们总会希望它不要再轮换了,好让我们看清楚一点图片.该函数的内部只有一句代码: clearTimeout(STOP), clearTimeout()也是window的一个方法,其作用就是中断setTimeout()方法的执行.我们可以看到clearTimeout()方法有个参数STOP,这表示中断存储在STOP变量中的setTimeout()操作,因为changePicture()函数中,我们已经把setTimeout()操作赋值给了STOP变量.这里的STOP,根据我的肤浅的理解,可能是一个全局变量,尽管它没有在函数外部被声明.如果你在changePicture()函数内部用var STOP;来声明看看,那可不是你想要的结果.
3. changeAgin()函数
该函数的作用就是重新开始调用changePicture()函数.为什么要用到这个函数呢?因为当我们用到stopChange()来停止图片轮换的时候,我们就需要在鼠标移出图片后重新开始图片的随机轮换.可以看到该函数内部只用一句changePicture();这就表明重新开始执行changePicture()函数啦.
好啦,程序分析完毕,看得很累了吧,记得放松一下哦.
大家可以下载本程序代码
gZNm1Vg7.rar编程之星的菜鸟应用JAVASCRIPT系列:
菜鸟应用JAVASCRIPT 之 简单图片浏览
菜鸟应用JAVASCRIPT 之 简易闹钟程序
菜鸟应用JAVASCRIPT 之 简易网页音乐播放程序
[此贴子已经被作者于2007-9-2 22:58:35编辑过]
对新手很有帮助，多谢楼主了！！！
