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函数，成功实现。代码如下：

vari=1;
varj=0;
functionpicLoad(){
 if(j==0){
 if(i<9){
 window.document.pic.src=i+".jpg";
  i++;
    if(i==9)j=1;
  }
 }
if(j==1){
 if(i>-1){
i--;
 window.document.pic.src=i+".jpg";
 if(i==0)j=0;
  }
}

/*else{
 window.document.pic.src="0.jpg";
 }
*/

 //setInterval("picLoad",1000);
 setTimeout("picLoad()",1000);
}

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

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

varj=0;
vari=0;
functionimg2_onclick(img2){
 if(i<12&&j=0){
 i++;
 switch(i){
     case1:img2.src="image2/0.bmp";break;
     case2:img2.src="image2/1.bmp";break;
     case3:img2.src="image2/2.bmp";break;
     case4:img2.src="image2/3.bmp";break;
 case5:img2.src="image2/4.bmp";break;
     case6:img2.src="image2/5.bmp";break;
     case7:img2.src="image2/6.bmp";break;
     case8:img2.src="image2/7.bmp";break;
     case9:img2.src="image2/8.bmp";break;
 case10:img2.src="image2/9.bmp";break;
     default:img2.src="image2/10.bmp";
 }
}
if(i==12){
 j=1;
}
 if(j==1){
 i--;
  if(i>-1){
 switch(i){
 case1:img2.src="image2/0.bmp";break;
      case2:img2.src="image2/1.bmp";break;
 case3:img2.src="image2/2.bmp";break;
      case4:img2.src="image2/3.bmp";break;
case5:img2.src="image2/4.bmp";break;
 case6:img2.src="image2/5.bmp";break;
 case7:img2.src="image2/6.bmp";break;
      case8:img2.src="image2/7.bmp";break;
      case9:img2.src="image2/8.bmp";break;
      case10:img2.src="image2/9.bmp";break;
      default:img2.src="image2/10.bmp";
 }
 }
 }
 if(i=-1){
 j=0;
 }
 setTimeout("im2_onclick()",1000);
}

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

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

vara=1,range=1;
functionimg2_onclick(){
 if(event.button==1){
  setInterval(function(){
      document.getElementById('img2').src="image2/"+a+".bmp";
 a+=range;
 if(a==10||a==1)range*=-1;
  },1000)
 }
 else{
 alert("当你多次左键单击图片后，你将眼花缭乱");
 }
}

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

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

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

第三行第二列

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

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

}

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

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