什么是面向对象

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

什么是面向对象编程

以前 学。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安装google-chrome和chromedriver

    1.root用户下进入到etc/yum.repos.d目录下  [root@f7d6b9f2-1291-4d2f-8805-aef94deac9f7 yum.repos.d]# pwd  /etc/y ...

  2. [洛谷Luogu]P1141 01迷宫[联通块 并查集]

    题目链接 大致题意 相邻格子不同为连通,计算每个点所在的连通块大小. 想法 我采用了并查集的做法. 开一个辅助数组记录连通块大小,每次合并的时候更新父亲节点的大小即可. 一个点先与它上面的点判定,若判 ...

  3. 3种python调用其他脚本的方法，你还知道其他的方法吗？

    1.用python调用python脚本 #!/usr/local/bin/python3.7 import time import os count = 0 str = ('python b.py') ...

  4. 167-PHP 文本分割函数str_split（二）

    <?php $str='PHP is a very good programming language'; //定义一个字符串 $arr=explode(' ',$str,-3); //使用空格 ...

  5. 085-PHP文件引用include（二）

    01.php <?php function foo() { global $color; include '02.php'; echo "A $color $fruit"; ...

  6. Flink 历史服务与连接器

    History Server(历史服务) Flink提供了记录历史任务运行情况的服务,可用于在关闭Flink群集后依然能够查询已完成作业的相关信息. 配置: # 任务执行信息存储在hdfs目录 job ...

  7. hdu 1160 上升序列 dp

    FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  8. opencv3.0机器学习算法使用

    //随机树分类Ptr<StatModel> lpmlBtnClassify::buildRtreesClassifier(Mat data, Mat responses, int ntra ...

  9. html使用aes进行加密

    1.导入 aes.js 文件 !function(t,n){*t.length},toString:function(t){);o<r;o++){]>>>-o%*&;n ...

  10. tableau-参数

    tableau参数可用在计算字段.筛选器和参考线中替换常量值得动态值. 三种方式:1.在计算字段中使用筛选器 案例动态替换计算字段中设定的目标值. 创建参数 以参数值创建计算字段 2.筛选器中使用参数 ...