什么是面向对象

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

什么是面向对象编程

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

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

废话说了那么多。

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

按照之前我们可能会 先写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>

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

JavaScript—面向对象小例子的更多相关文章

  1. JavaScript面向对象小抄集

    前言 本文旨在记录JavaScript中面向对象的基础知识 搞明白JavaScript中的面向对象 一切都是对象 JavaScript中,除了基本类型外,其它类型都是对象类型 所谓对象就是若干属性的集 ...

  2. javascript平时小例子⑨(小型抽奖功能)

    <!doctype html><html lang="en"> <head> <meta charset="utf-8" ...

  3. javascript平时小例子⑧(导航置顶效果)

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  4. javascript平时小例子⑦(鼠标跟随的div)

    <!doctype html><html> <head> <meta charset="utf-8"> <title>无 ...

  5. javascript平时小例子⑥(简易计算器的制作)

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  6. javascript平时小例子⑤(投票效果的练习)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. javascript平时小例子④（setInterval使用2）

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  8. javascript平时小例子③（setInterval使用1）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. javascript平时小例子②（正则表达式验证邮箱）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>邮 ...

随机推荐

  1. 转 centos7使用kubeadm安装kubernetes 1.12版本

    最近在学习go 模板语法  还是有点小忙 !   感觉写这种 kuberadm 搭建 kubernetes  还是有点水  好吧 可能我太高调了  前前后后搭过四 五次了  ! kuberadm 搭建 ...

  2. CAN通讯基本设置

    A节点pelican协议下,扩展帧 单滤波方式 A节点的接收滤波器 ID号 设置为 0x19881205 设置过程 (1) pelican模式设置 设置时钟分频寄存器CDR.7 =1 使SJA1000 ...

  3. UVA - 1423 Guess （拓扑排序）

    题意:已知矩阵S,求序列a.已知矩阵Sij = “ + ” if ai + . . . + aj > 0; Sij = “ − ” if ai + . . . + aj < 0; and ...

  4. Vue.js（23）之 keepAlive和activated

    阅读: vue中前进刷新.后退缓存用户浏览数据和浏览位置的实践 keep-alive 组件级缓存 keep-alive <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而 ...

  5. 【NOIP2009】Hankson的趣味题

    题意:给出 \(a_0\), \(a_1\), \(b_0\), \(b_1\), 求出正整数 \(x\) 的个数,\(x\) 满足: \(gcd(x,a_0)=a_1\) , \(lcm(x, b_ ...

  6. 留学生如何把控好Essay写作结构

    留学生在国内写过作文,但是对于essay写作到底了解多少呢?大家觉得essay写作太难是语言问题,但是大家要明白,老师对于内容的考察远重于对语言的考察.同学们的essay写作如果能做到言之有理,自圆其 ...

  7. 解决CGrIdCtrl合并单元格后继续拆分后的问题

    DWORD dwMergeCellCount = vMergeCells.size(); ; i < dwMergeCellCount; i++){ m_HFlexGrid.SplitCells ...

  8. python类、super函数

    #PYTHON语言及其应用学习笔记 1.创建简单的类 class Person(): #python中特殊的对象初始化方法__init__,一个特殊的函数名 #当你在类声明里定义__init__()方 ...

  9. java项目提交到码云

    1.在码云上面创建一个新的项目,用于存放提交的项目内容 2.在需要共享的项目上右键-->team-->Share Project分享项目-->勾选 Use or create rep ...

  10. 安装swoole redis异步 hiredis swoole扩展加载失败 或者不显示问题 解决办法

    当前办法仅供参考 贴上报错 找了好久 根据网上办法也试了 没解决 最后 仔细读问题 觉得可能是 hiredis路径问题 终于解决了 解决办法: 进入你的安装包目录然后执行下面 mkdir /usr/l ...