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]-->

第三行第一列

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

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

Code:

1. vari=1;
2. varj=0;
3. functionpicLoad(){
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. }
19. /*else{
20. window.document.pic.src="0.jpg";
21. }
22. */
24. //setInterval("picLoad",1000);
    
25. setTimeout("picLoad()",1000);
26. }

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

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

Code:

1. varj=0;
2. vari=0;
3. functionimg2_onclick(img2){
4. if(i<12&&j=0){
5. i++;
6. switch(i){
7. case1:img2.src="image2/0.bmp";break;
8. case2:img2.src="image2/1.bmp";break;
9. case3:img2.src="image2/2.bmp";break;
10. case4:img2.src="image2/3.bmp";break;
11. case5:img2.src="image2/4.bmp";break;
12. case6:img2.src="image2/5.bmp";break;
13. case7:img2.src="image2/6.bmp";break;
14. case8:img2.src="image2/7.bmp";break;
15. case9:img2.src="image2/8.bmp";break;
16. case10: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. case1:img2.src="image2/0.bmp";break;
28. case2:img2.src="image2/1.bmp";break;
29. case3:img2.src="image2/2.bmp";break;
30. case4:img2.src="image2/3.bmp";break;
31. case5:img2.src="image2/4.bmp";break;
32. case6:img2.src="image2/5.bmp";break;
33. case7:img2.src="image2/6.bmp";break;
34. case8:img2.src="image2/7.bmp";break;
35. case9:img2.src="image2/8.bmp";break;
36. case10: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. vara=1,range=1;
2. functionimg2_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. functionimg3_onclick(img3){
2. if(confirm("你想进入此页吗？")){ window.open("myCar.htm","","height=1000,width=1000,toolbar=no,location=no,status=no,menubar=no,resizable=no");
3. }
5. }

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

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