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代码：

functionimg0_onclick(img0){
//varx=Math.round(Math.random()*10);
 varnow=newDate();
 varx=now.getMilliseconds()%9;
 switch(x){
 case1:img0.src="image/01.bmp";break;
    case2:img0.src="image/02.bmp";break;
    case3:img0.src="image/03.bmp";break;
    case4:img0.src="image/04.bmp";break;
    case5:img0.src="image/05.bmp";break;
 case6:img0.src="image/06.bmp";break;
 case7:img0.src="image/07.bmp";break;
    case8:img0.src="image/08.bmp";break;
    case9:img0.src="image/09.bmp";break;

 }
}

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

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

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

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

我们来看看两个函数。

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

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

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

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

varx=now.getMilliseconds()%9;

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

第二行第二列

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

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

两个事件：

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

三个函数：

varrector=20;//每次移动的像素
varstopit=0;//值为1时停止抖动
vara=1;/*控制图片移动的方向：1(想下移动rector个像素),2(向右移动rector个像素),3(向上移动rector个像素),4(向左移动rector个像素)*/

functioninit(img1){
 stopit=0;
 shake=img1;
 shake.style.left=50;
 shake.style.top=10;
}

/*也就是改变图片距离四周的位置，主要由两个参数控制，图片与边框左边和顶部的距离*/
functionrattleimage(){
//如果没找到图片或者stopit为1,那么什么也不做
 if((!document.all&&!document.getElementById)||stopit==1)
   return;
  if(a==1){
 shake.style.top=parseInt(shake.style.top)+rector
 }
 elseif(a==2){
 shake.style.left=parseInt(shake.style.left)+rector;
 }
  elseif(a==3){
 shake.style.top=parseInt(shake.style.top)-rector;
 }
  else{
 shake.style.left=parseInt(shake.style.left)-rector;
 }
 //如果a=4,将其置1
 if(a<4)
 a++;
 else
 a=1;
 setTimeout("rattleimage()",50);/*周期为50毫秒*/
}

functionstoprattle(which){
 stopit=1;
 which.style.left=50;
 which.style.top=10;
}

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

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