JavaScript—面向对象小例子

电玩女神 2023-10-11 13:16 40阅读 0赞

## 什么是面向对象 ##

要是以前别人问我。随口道来，封装继承多态，万物皆对象。。。一大推。说的自己都以为自己掌握了面向对象。呵呵一笑。确实掌握了 只是不会用。。。。。

### 什么是面向对象编程 ###

以前 学。Net 虽然MVC 本身就是面向对象。也就没管什么思想，就记住步骤，跟着写就好。

现在想想，那时候还是太年轻了，当我看了设计模式里面对MCV的一个解释。发现并不是这么回事，面向对象 学问可大了，学好面向对象，锻炼思想，便开始虚心起来，觉得不简单。

废话说了那么多。

什么是面向对象编程。现在 我觉得 就是以对象的方式去写代码，不在考虑怎么一步步的实现效果。

![797834-20190508102912992-1430763671.gif][]

按照之前我们可能会 先写10个DIV 然后随机位置 随机颜色 一步步

按照面向对象 就不在这样想了 先看有几个对象 在属性 方法。。

这个有一个盒子对象。 盒子有大小 位置 背景颜色这些属性

有随机颜色 随机位置 和出现的方法

那么就可以开始动手了

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            #container {
                width: 800px;
                height: 800px;
                background-color: #cccccc;
                position: relative;
    
            }
        </style>
    </head>
    <body>
    <div id="container"></div>
    </body>
    <script>
        // 方块对象box
        //盒子有大小，位置 背景颜色等属性。
        //方法有随机改变位置 随机背景颜色
        function Box(element) {
            this.width = 20
            this.height = 20
            this.backgroundColor = 'red'
            this.x = 50
            this.y = 50
            this.elemen=element
            this.div=document.createElement('div')
            element.appendChild(this.div)
    
        }
        //初始化
        Box.prototype.init=function(){
            this.randombc()
            this.randomxy()
            this.div.style.width=this.width+'px';
            this.div.style.height=this.height+'px'
            this.div.style.backgroundColor=this.backgroundColor
            this.div.style.position='absolute'
            this.div.style.left=this.x+'px'
            this.div.style.top=this.y+'px'
            console.log(this.div)
        }
        Box.prototype.randomxy=function(){
            this.x=randomNum(0,(this.elemen.offsetWidth-this.width)/this.width)*this.width
            this.y=randomNum(0,(this.elemen.offsetHeight-this.height)/this.height)*this.height
    
        }
        Box.prototype.randombc = function () {
            let r = randomNum(0, 255)
            let g = randomNum(0, 255)
            let b = randomNum(0, 255)
            this.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')'
        }
    
        function randomNum(minNum, maxNum) {
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum)
    
        }
        let ele=document.getElementById('container')
        let arr=[]
        for (let i=0;i<10;i++){
          arr[i]=new Box(ele)
          arr[i].init()
        }
        setInterval(function () {
            for (let i=0;i<arr.length;i++){
                arr[i].init()
            }
        },500)
    </script>
    
    
    </html>

面向对象 博大精深 需慢慢体会

转载于:https://www.cnblogs.com/ruogu/p/10830381.html

[797834-20190508102912992-1430763671.gif]: https://img2018.cnblogs.com/blog/797834/201905/797834-20190508102912992-1430763671.gif