asp.net课程设计心得(四)

下面的两行两列分别放了一张图片，没张图片分别实现一个js功能，等我一个一个介绍来。

第二行第一列

一个html的img标签，再一个image标签添加一个onclick事件。你每次单击图片时，背景都改变了，或许有些时候不改变，是因为后台获取的随机数是一样的，接下来看看后台js代码：

 

Code:

1. function img0_onclick(img0){  
2.    //var x=Math.round(Math.random()*10);  
3.    var now = new Date();  
4.    var x = now.getMilliseconds()%9;   
5.    switch(x){
6.          case 1:img0.src="image/01.bmp";break;  
7.          case 2:img0.src="image/02.bmp";break;  
8.          case 3:img0.src="image/03.bmp";break;  
9.          case 4:img0.src="image/04.bmp";break;  
10.          case 5:img0.src="image/05.bmp";break;  
11.          case 6:img0.src="image/06.bmp";break;  
12.          case 7:img0.src="image/07.bmp";break;  
13.          case 8:img0.src="image/08.bmp";break;  
14.          case 9:img0.src="image/09.bmp";break;  
15.   
16.    }    
17. }  

每次单击图片时，都执行img0_onclick(img0)函数一次，每次都获取一个随机数，每次都重新制定图片的src属性。

这里有个参数，是因为在调用时给函数传参了：onclick="img0_onclick(this)"。这样做有什么好处呢？就是后台js函数更加明白这个事件来自那里，需要调用那个处理函数。

刚开始，我这样定义获取的随机数

Code:

1. var x=Math.round(Math.random()*10);  

我们来看看两个函数。

Math.random()：返回0和1之间的伪随机数，可能为0，但总是小于1，也就是[0.0,1.0)。

Math.round(x)：对x四舍五入去整。

这样得来的x是随机数，但是单击图片时，没得到效果，百思不得其解。

然而下面一种方法就成功了：

Code:

1. var x = now.getMilliseconds()%9;  

这里的9是一个可变数字，当你想要显示多少张图片时，就是那个数字。不过当图片过多时，switch语句里的case也多了，所以这并不是一个很好的方法，正在寻求最优解中......

第二行第二列

这是一张有趣的图片，当你把鼠标放在图片上时，它会抖动，当你将鼠标移除图片时，它又停在原来的位置，不动了！

一个html的img标签，两个事件，三个函数，就解决了。

两个事件：

Code:

1. ... onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this)... 
   

三个函数：

Code:

1. var rector=20;//每次移动的像素  
2. var stopit=0;//值为1时停止抖动  
3. var a=1;/*控制图片移动的方向：1(想下移动rector个像素),2(向右移动rector个像素),3(向上移动rector个像素),4(向左移动rector个像素)*/ 
4.  
5. function init(img1){  
6.     stopit=0;  
7.     shake=img1;  
8.     shake.style.left=50;  
9.     shake.style.top=10;  
10. }  
11.  
12. /*也就是改变图片距离四周的位置，主要由两个参数控制，图片与边框左边和顶部的距离*/  
13. function rattleimage(){    
14. //如果没找到图片或者stopit为1,那么什么也不做  
15.     if ((!document.all&&!document.getElementById)||stopit==1)  
16.        return;  
17.     if (a==1){  
18.        shake.style.top=parseInt(shake.style.top)+rector  
19.     }  
20.     else if (a==2){  
21.        shake.style.left=parseInt(shake.style.left)+rector;  
22.     }  
23.     else if (a==3){  
24.        shake.style.top=parseInt(shake.style.top)-rector;  
25.     }  
26.     else{  
27.        shake.style.left=parseInt(shake.style.left)-rector;  
28.     }  
29.     //如果a=4,将其置1  
30.     if (a<4)  
31.        a++;  
32.     else  
33.        a=1;  
34.     setTimeout("rattleimage()",50);/*周期为50毫秒*/  
35. }  
36.   
37. function stoprattle(which){    
38.     stopit=1;  
39.     which.style.left=50;  
40.     which.style.top=10;  
41. }  

当你把鼠标移动到背景图片上时，就调用了init函数和rattleimage函数；init函数设定此图片距离边框的的位置；rattleimage函数就从init函数确定图片的位置开始转动，方向是这样的：下→右→上→左；这里设置了没50毫秒执行函数本身，所以页面上的就来回的抖动。当你的鼠标移除图片时，调用了stoprattle函数，此函数将图片设置为开始抖动之前的位置。

说道图片抖动，我想到窗口移动，前不久写了个窗口沿着屏幕边沿移动的js程序，有兴趣的可以去看看，就在我的笔记里，那里还有关于window.open函数的features属性：student.csdn.net/space.php