Javascript面向对象例子--下雪效果

来源：互联网发布：金灿荣舌战公知哪一期编辑：程序博客网时间：2024/06/05 14:50

javascripts中到底什么是面向对象，直到现在我也很难说清楚，我看了网上的解释也是云里雾里，总觉得有些人故意把这个概念说的太专业，一大堆“深奥”的名词，原型链，构造对象等等，其实对于新手来说，还没理解到原理的地步，就像一个插件，在你没有能力之前，只需要知道如何使用，不用管他的底层原理。所以我自己参考了一些资料，用js面向对象试着写了一个下雪的效果，先来看看效果图。
这里写图片描述
说一下总体思路：既然是面向对象，那首先创建一个对象，用定时器控制不断创建雪花对象，并定义对象的属性和方法；然后利用prototype，将对象的属性和方法继承过来，从而达到属性方法复制的目的，这样我们就能编写自己想要的功能了；然后随机雪花在顶部出现的位置，还有创建控制雪花下落速度的方法，不要忘了让雪花到底部的时候消失，否则雪花会越来越多，直到浏览器崩溃~
下面是完整代码（public.js是自己封装的一些方法，用于生成随机数等，你们需要稍作修改）

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            *{                margin:0;                padding:0;            }            html{                height:100%;            }            body{                height:100%;                background:url(img/mounten.jpg) center center no-repeat;                background-size:cover;                overflow:hidden;            }        </style>    </head>    <body>        <script src="js/public.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">        //获得浏览器宽高            var scWid = document.documentElement.offsetWidth||document.body.offsetWidth;            var scHei = document.documentElement.offsetHeight||document.body.offsetHeight;            var oBody = document.getElementsByTagName("body")[0];            //创建雪花构造函数            function SnowFlake(par,scWid,scHei){                this.par = par;                this.scWid = scWid;                this.scHei = scHei;                this.createFlake();            }            //创建雪花成员变量            SnowFlake.prototype.createFlake = function(){                this.allTime = oMath.getRan(5,10);                this.wid = oMath.getRan(20,30);                this.maxL = this.scWid - this.wid;                this.ele = document.createElement("img");                this.ele.src = "img/snowflake.png";                this.ele.style.cssText = "position:absolute;left:"+oMath.getRan(0,this.maxL)+"px;top:"+(-this.wid)+"px;width:"+this.wid+"px;-webkit-transition: all "+this.allTime+"s;-moz-transition: all "+this.allTime+"s;-ms-transition: all "+this.allTime+"s;-o-transition: all "+this.allTime+"s;transition: all "+this.allTime+"s;";                oBody.appendChild(this.ele);                this.fall();            }            //控制雪花成员下落方法            SnowFlake.prototype.fall = function(){                var that = this;                (function(that){                    setTimeout(function(){                        that.ele.style.top = that.scHei + "px";                    },10);                    that.time = setInterval(function(){                        var nowTop = parseInt(oGet.getStyle(that.ele,"top"));                        if(nowTop>=that.scHei){                            clearInterval(that.time);                            //移除雪花                            that.par.removeChild(that.ele);                        }                    },100)                })(that);            }            //定时器创建对象            setInterval(function(){                for(var i=0;i<oMath.getRan(5,10);i++){                    var newFlake = new SnowFlake(oBody,scWid,scHei);                }            },1000)        </script>    </body></html>

1 0