面对对象的雪花飘落

　　动画效果很是炫酷，那你们用面对对象做过一些动画么。

　　今天就来瞧瞧利用面对对象来做的雪花飘落吧！

　　首先呢我们先在页面上创建一个div标签，让他占满这个页面，之后在这个div 里面用面对对象创建出雪花，然后给对象添加属性与方法。

　　快来看看代码吧！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="img" style=" 100%;height: 100%">
    <img src="2010011711303711.bmp" style=" 100%;height: 625px"/>
</div>
<script>
    function Div(){
        //创建一个雪花图片
        this.div = document.createElement("img");
        //设置一个随机数
        var size=Math.floor(Math.random()*(30-10+1)+10);
        //设置雪花的随机大小
        this.height = size;
        this.width = size;
        //设置雪花的随机位置
        this.x = Math.random()*1300+"px";
        this.y = Math.random()*600+"px";
        //将一些样式添加给雪花
        this.createDiv = function(){
            this.div.style.height = this.height+"px";
            this.div.style.width = this.width+"px";
            this.div.style.left = this.x;
            this.div.style.top = this.y;
            this.div.src="snow1.png";
            this.div.style.position = "absolute";
            document.getElementById("img").appendChild(this.div);
        }
    }
    //给Div的原型添加一个dow属性
    Div.prototype.down = function(){
        var y=parseInt(this.y);
        var self=this;
        setInterval(function(){
            if(y>600){
                self.div.remove();
            }else{
                self.div.style.top = y++ +"px";
            }
        },10);
    };

    var fuc = function(){
    var div = new Div();
    div.createDiv();
    div.down();
    };
//    设定计时器，让雪花每隔0.1s随机飘落
    setInterval(fuc,100);
</script>
</body>
</html>

效果图：