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

javascripts中到底什么是面向对象,直到现在我也很难说清楚,我看了网上的解释也是云里雾里,总觉得有些人故意把这个概念说的太专业,一大堆“深奥”的名词,原型链,构造对象等等,其实对于新手来说,还没理解到原理的地步,就像一个插件,在你没有能力之前,只需要知道如何使用,不用管他的底层原理。所以我自己参考了一些资料,用js面向对象试着写了一个下雪的效果,先来看看效果图。

说一下总体思路:既然是面向对象,那首先创建一个对象,用定时器控制不断创建雪花对象,并定义对象的属性和方法;然后利用prototype,将对象的属性和方法继承过来,从而达到属性方法复制的目的,这样我们就能编写自己想要的功能了;然后随机雪花在顶部出现的位置,还有创建控制雪花下落速度的方法,不要忘了让雪花到底部的时候消失,否则雪花会越来越多,直到浏览器崩溃~
下面是完整代码(public.js是自己封装的一些方法,用于生成随机数等,你们需要稍作修改)


<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;i5,10);i++){
                    var newFlake = new SnowFlake(oBody,scWid,scHei);
                }
            },1000)
        script>
    body>
html>

你可能感兴趣的:(前端开发,javascript面向对象)