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

第三行第一列

这个单元里也是一个html的img标签，在这个标签上，我想实现的是，当你单击图片时，此标签的背景自动切换到下一张图片，而且这些图片是顺序显示的。在后台，有一个文件夹，存储要切换的10张背景图片，而且是顺序编号的。用一个函数实现从第一张图片顺序显示到第十张图片，在从第十张图片倒序显示到第一张图片，这样来回切换显示。

关于循环显示背景图片，前不久我写过一个js函数，成功实现。代码如下：

Code:

1. var i=1;  
2. var j=0;    
3. function picLoad(){    
4.    if(j==0){  
5.       if(i<9){  
6.          window.document.pic.src=i+".jpg";
7.          i++;  
8.          if(i==9) j=1;
9.       }  
10.    }  
11.   if(j==1){    
12.      if(i>-1){  
13.           i--;  
14.           window.document.pic.src=i+".jpg";   
15.           if(i==0) j=0;  
16.      }  
17.   }  
18.   
19. /*else {  
20.      window.document.pic.src="0.jpg"; 
21.   }
22. */  
23.   
24.    //setInterval("picLoad",1000);  
    
25.    setTimeout("picLoad()",1000);  
26. }  

pic是一个img标签的id号，从这句话更能看出JavaScript是弱类型语言：window.document.pic.src=i+".jpg";

有了这个函数的经验，和上面随机显示一张图片的switch语句，我想到了下面这个js函数：

      

Code:

1. var j=0;    
2. var i=0;  
3. function img2_onclick(img2){  
4.     if(i<12&&j=0){  
5.        i++;  
6.        switch(i){  
7.            case 1:img2.src="image2/0.bmp";break;  
8.            case 2:img2.src="image2/1.bmp";break;  
9.            case 3:img2.src="image2/2.bmp";break;  
10.            case 4:img2.src="image2/3.bmp";break; 
11.            case 5:img2.src="image2/4.bmp";break;  
12.            case 6:img2.src="image2/5.bmp";break;  
13.            case 7:img2.src="image2/6.bmp";break;  
14.            case 8:img2.src="image2/7.bmp";break;  
15.            case 9:img2.src="image2/8.bmp";break;  
16.            case 10:img2.src="image2/9.bmp";break;  
17.            default:img2.src="image2/10.bmp";  
18.       }  
19.   }  
20.   if(i==12){  
21.      j=1;  
22.   }  
23.   if(j==1){  
24.     i--;  
25.     if(i>-1){
26.        switch(i){
27.              case 1:img2.src="image2/0.bmp";break;  
28.              case 2:img2.src="image2/1.bmp";break;  
29.              case 3:img2.src="image2/2.bmp";break;  
30.              case 4:img2.src="image2/3.bmp";break;  
31.              case 5:img2.src="image2/4.bmp";break;  
32.              case 6:img2.src="image2/5.bmp";break;  
33.              case 7:img2.src="image2/6.bmp";break;  
34.              case 8:img2.src="image2/7.bmp";break;  
35.              case 9:img2.src="image2/8.bmp";break;  
36.              case 10:img2.src="image2/9.bmp";break;  
37.              default:img2.src="image2/10.bmp";  
38.        }  
39.     }  
40.   }  
41.   if(i=-1){  
42.     j=0;  
43.   }  
44.   setTimeout("im2_onclick()",1000);  
45. }  

然而，不幸的是，我又失败了，不管你怎么单击图片，背景就是不改变。不过我也不太喜欢这个函数，你说要是图片很多的话，我的switch语句不是要很多了？所以应该有更好的方法实现图片的循环显示的。

于是求助于csdn，一位JavaScript高手解决了我的问题。真没想到，我用那么多代码都没实现的问题，别人就用了一个函数就实现了，真的既高效有简介。这是一个多么优美的函数，犹如卞之琳的《断章》，让人回味无穷！想必你比我更期待这个函数吧！那我们就来看看吧！

Code:

1. var a=1,range=1;  
2. function img2_onclick(){  
3.   if(event.button==1){  
4.      setInterval(function(){  
5.              document.getElementById('img2').src="image2/"+a+".bmp";
6.              a += range;
7.              if(a==10||a==1) range *= -1;                            
8.      },1000)   
9.   }  
10.   else{  
11.      alert("当你多次左键单击图片后，你将眼花缭乱");  
12.   }  
13. }  

原函数只是setInterval部分，其他的部分是我改过的。

我说得没错吧！真的妙哉，妙哉！

经过这位仁兄的提醒，我一下想到以前我看过的一个js函数，setInterval函数里面在嵌套函数，嵌套了好几层，具体我找找看，找到了给大家看看！

第三行第二列

这里也是一个html的img标签，给此标签添加了一个单击事件，通过window.open函数打开另一个页面。代码如下：

Code:

1. function img3_onclick(img3) {  
2.    if(confirm("你想进入此页吗？")){ window.open("myCar.htm","","height=1000,width=1000,toolbar=no,location=no,status=no,menubar=no,resizable=no");  
3.    }  
4.   
5.   }  

这里想说的是confirm函数，这个函数弹出一个窗口，有两个按钮，“确定”和“取消”。当你单击“确定”按钮时，返回一个true值，当你单击“取消”时，返回一个false值。

当你单击图片时，弹出此对话框，若你单击“确定”，那么myCar.htm网页将打开，如果你单击“取消”，那么myCar.htm网页将不会被打开，继续停留在本网页上。