什么是面向对象

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

什么是面向对象编程

以前 学。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. Golang的选择结构-switch语句

    Golang的选择结构-switch语句 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.选择语句应用场景概述 选择结构也称为条件判断,生活中关于判断的场景也非常的多,比如: ( ...

  2. redmine处理规范

         开发: 1.       研发人员负责更新到的状态共有三个:  “进行中”. ”已解决”. ”需要反馈”. 2.       在开始修复bug的时候,把状态更新为”进行中”,把title更新 ...

  3. maven在windows下的安装配置及手动引入oracle数据库jar包

    一.maven的安装配置 注意:在进行如下配置之前,有个前提是你的java的jdk安装配置正确才行 1.首先,下载maven,网址http://maven.apache.org/download.cg ...

  4. Python 实现类似range函数

    需求:写一个属于你自己的 frange函数,frange与range类似,一样的参数规则,但是每一项必须要是float类型 实现: 注意点,如何判断stop是否有参数传入,这里使用空字符判断,如fra ...

  5. 八十一、SAP中的ALV的简介（ABAP List Viewer）

    一.ALV是SAP中的一个表格,全称为:ABAP List Viewer或者SAP List Viewer,就是可视化表格. ALV是SAP系统中心的列表标准,可以在ABAP程序中进行报表输出.除去列 ...

  6. 球队“食物链”（DFS+剪枝）

    某国的足球联赛中有N支参赛球队,编号从1至N.联赛采用主客场双循环赛制,参赛球队两两之间在双方主场各赛一场. 联赛战罢,结果已经尘埃落定.此时,联赛主席突发奇想,希望从中找出一条包含所有球队的“食物链 ...

  7. opencv python运动人体检测

    采用非极大值抑制,将重叠的框合并成一个. # import the necessary packages from imutils.object_detection import non_max_su ...

  8. Python MySQL 教程

    章节 Python MySQL 入门 Python MySQL 创建数据库 Python MySQL 创建表 Python MySQL 插入表 Python MySQL Select Python M ...

  9. java项目提交到码云

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

  10. SpringAOP切入点的表达式

    1. 常用的切入点表达式分为:  (1)按类型匹配:within 关键字 (2)按函数匹配:execution (3)按bean的id匹配:bean 2.按类匹配的写法 匹配到具体的类:<aop ...