day39 原型链及页面烟花效果 2021.10.13

原型链:(Object是顶级的构造函数,在js中万物皆对象)

只要是对象就有一个属性__proto__,

原型对象也是对象,所以原型对象也有__proto__属性,这个属性指向的也是一个原型对象

实例对象的__proto__指向原型对象,原型对象的__proto__指向另外的一个原型对象,都是对象,都有__proto__属性,所以最后找到的原型都是Object.prototype

实例对象方法属性的访问规则:

实例对象访问属性的时候,先在实例对象本身查找,找到了就使用

如果找不到,则在__proto__指向的原型对象中查找,找到了就使用

如果找不到在去到原型对象的原型中找,找到了就是使用

找不到继续往原型的原型中找,最终找到Object.prototype原型,

还是没有属性或方法的话,则返回undefined

实现页面烟花效果

步骤分析:

1. 出现一个夜空背景 1000*600

2. 给夜空一个点击事件,点击夜空div在底部出现一个方块烟花

--方块烟花出现的位置,和点击的水平位置是一样的

3. 方块烟花从底部升空,升到点击的位置,然后消失(消失后出现多个圆点烟花)

4. 圆点烟花爆炸效果,每一个圆点烟花运动到随机的位置,然后消失

需准备的函数:

运动函数,随机颜色函数,获取范围随机数的函数,给元素设置样式的函数

猜你喜欢

转载自blog.csdn.net/weixin_50163576/article/details/120751685