jQuery第五次实验报告.docVIP

电子科技大学成都学院云计算系 标 准 实 验 报 告 （实验）课程名称 jQuery 电子科技大学成都学院云计算系 电 子 科 技 大 学成都学院 实 验 报 告 学生姓名：王建尧 学 号：1641310911 指导教师：康晓慧 实验地点：二教 实验时间：15-16 一、实验室名称： 云计算系计算机实验室 二、实验项目名称：jQuery+html+css实现打地鼠游戏 三、实验学时：6 四、实验原理： jQuery技术，html5技术，css3技术 五、实验目的： （1） 掌握jQuery选择器，过滤器，常用方法，常用动画 （2） 掌握div ul li布局； 六、实验结果和代码展示 请分步骤描述你完成本次实验的过程 首页界面：点击开始出现num行num列的表格，请写出实现该功能的jQuery代码、html代码、css代码，并截图展示。 $(#main ul li).detach(); var num=$(#num).val(); for(i=0;inum*num;i++){ $(#main ul).append(li/li);} var w=Math.floor($(#main ul).width()/num)-2; $(#main ul li).width(w); $(#main ul li).height(w); Body body 行数：input type=number name=1 value=2 id=num / 出现图片：页面上循环地出现和消息图片（地鼠和兔子），请写出实现该功能的jQuery代码、html代码和css代码，并截图展示。 $(#main ul li).empty(); var num=$(#num).val(); var hh=Math.floor(Math.random()*num*num); var bb=Math.floor(Math.random()*num*num); $(#main ul li).eq(hh).html(img src=dishu.png class=dishu); while(hh==bb){bb=Math.floor(Math.random()*num*num);} $(#main ul li).eq(bb).html(img src=tuzi.png class=tuzi); jiange=parseInt($(#speed).val()); $(.dishu).fadeOut(jiange,function(){ if ($(this).attr(flag)!=1) { score-=1; $(#integration).html(score); } }); $(.tuzi).fadeOut(jiange,function(){ if ($(this).attr(flag)!=1) { score-=1; $(#integration).html(score); } }); 打击地鼠和兔子：页面上出现榔头，打击地鼠时实现更换图片，请写出实现该功能的jQuery代码、html代码和css代码，并截图展示。 $(body).on(click,.di,function(){ goal+=1; $(this).attr(sum,true); $(#goal).html(goal); $(this).parent().html(img src=ne/dishu1.png/) }) $(body).on(click,.tu,function(){ goal+=1; $(this).attr(sum,true); $(#goal).html(goal); $(this).parent().html(img src=ne/tuzi1.png/) }) } 游戏速度：input type=number id=speed value=2000 计分：请写出实现该功能的jQuery代码、html代码和css代码，并截图展示。 $(body).on(click,.dishu,function(){ score+=1; $(this).attr(flag,1); $(#int