手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

javascript采草药第二季实现随机草药显示

时间:2024-11-04 18:34:30

1、鼠标点在草药上看看是否有效果这里用consol.log(this) 测试看看this代表什么

javascript采草药第二季实现随机草药显示

2、在浏览器运行这个页面,点草药,看看控制器输出什么结果从输出结果看,是指这个草药的div

javascript采草药第二季实现随机草药显示

3、下面可以布置代码如下:var grass = $("#grass"); 爿讥旌护grass.click(function(){ $(this).css("display","none"); })鼠标点击,让草药消失

javascript采草药第二季实现随机草药显示

4、因为草药消失要换位置,这时候要用到门钙蹲茌jquery的position()方法而position方法是没办法在草药层隐藏起来获取位置的,这里采用先删除草药,然后过一会再添加一个草药层

javascript采草药第二季实现随机草药显示

5、对应的css文件也要把布局调整一下

javascript采草药第二季实现随机草药显示

6、新生成的草药换一下位置这里只是把位置换成20px

javascript采草药第二季实现随机草药显示

7、浏览器运行点击草药,草药移动20px300px 变成320px

javascript采草药第二季实现随机草药显示

8、让草药点击消失后,在过一段时间在出现这里用setTimeout()过一段时间执行改变位置函数

javascript采草药第二季实现随机草药显示

9、为了让点草药循环执行,这里用循环函数执行

javascript采草药第二季实现随机草药显示

10、因为上一个草药已经删除,下一个草药的位置需要保持起来,以备下一个草药使用

javascript采草药第二季实现随机草药显示

11、每次都移动20px显然不行,得让他随机显示位置这里调用随机函数rand_fn

javascript采草药第二季实现随机草药显示

12、这是随机函数传递最大数,最小数 ,返回其中一个数这个随机函数配合数组使用比较方便

javascript采草药第二季实现随机草药显示

13、这样每次采集草药后,下一个草药过一段是就会随机显示出来

javascript采草药第二季实现随机草药显示
© 手抄报圈