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

<!--[if gte mso 9]><xml><w:WordDocument><w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel><w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery><w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery><w:DocumentKind>DocumentNotSpecified</w:DocumentKind><w:DrawingGridVerticalSpacing>7.8</w:DrawingGridVerticalSpacing><w:View>Normal</w:View><w:Compatibility></w:Compatibility><w:Zoom>0</w:Zoom></w:WordDocument></xml><![endif]-->

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

第二行第一列

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

Code:

1. functionimg0_onclick(img0){
2. //varx=Math.round(Math.random()*10);
3. varnow=newDate();
4. varx=now.getMilliseconds()%9;
5. switch(x){
6. case1:img0.src="image/01.bmp";break;
7. case2:img0.src="image/02.bmp";break;
8. case3:img0.src="image/03.bmp";break;
9. case4:img0.src="image/04.bmp";break;
10. case5:img0.src="image/05.bmp";break;
11. case6:img0.src="image/06.bmp";break;
12. case7:img0.src="image/07.bmp";break;
13. case8:img0.src="image/08.bmp";break;
14. case9:img0.src="image/09.bmp";break;
16. }
17. }

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

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

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

Code:

1. varx=Math.round(Math.random()*10);

我们来看看两个函数。

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

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

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

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

Code:

1. varx=now.getMilliseconds()%9;

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

第二行第二列

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

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

两个事件：

Code:

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

三个函数：

Code:

1. varrector=20;//每次移动的像素
2. varstopit=0;//值为1时停止抖动
3. vara=1;/*控制图片移动的方向：1(想下移动rector个像素),2(向右移动rector个像素),3(向上移动rector个像素),4(向左移动rector个像素)*/
5. functioninit(img1){
6. stopit=0;
7. shake=img1;
8. shake.style.left=50;
9. shake.style.top=10;
10. }
12. /*也就是改变图片距离四周的位置，主要由两个参数控制，图片与边框左边和顶部的距离*/
13. functionrattleimage(){
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. elseif(a==2){
21. shake.style.left=parseInt(shake.style.left)+rector;
22. }
23. elseif(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. }
37. functionstoprattle(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.youkuaiyun.com/space.php