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

最新推荐文章于 2023-04-01 14:25:00 发布

JustForZR

最新推荐文章于 2023-04-01 14:25:00 发布

阅读量3.2k

点赞数 2

分类专栏：前端开发 javascript面向对象文章标签： javascript 面向对象

本文链接：https://blog.csdn.net/JustForZR/article/details/64465742

版权

前端开发同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

javascript面向对象

1 篇文章 0 订阅

订阅专栏

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>

JustForZR

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Javascript面向对象例子--下雪效果

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

扫一扫