什么是面向对象

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

什么是面向对象编程

以前 学。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. 强制数据类型转换 字符串/数字/boolean

    类型转换主要指,将其他数据类型转换为(String.Number.Boolean) 类型转换有显式类型转换 和隐式类型转换 显式类型转换 1.1转换为string 调用数据的 toString() 方 ...

  2. Golang的运算符-赋值运算符

    Golang的运算符-赋值运算符 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.赋值运算符概述 常见的赋值运算符: =: 表示赋值运算符,如"a = 100" ...

  3. HDU - 3724 Encoded Barcodes （字典树）

    题意:给定n个字符串和m个经过处理得到的字符串,问对于m个字符串中的每个字符串,n个字符串中以该字符串为前缀的个数.分析:1.误差在[0.95x, 1.05x],因此求8个数的平均数,大于平均数为1, ...

  4. 1 —— js 语法回顾 —— 数据类型。流程控制。数组

    一,数据类型 字符串 . 数值 .布尔. null . undefined . 对象  ( 数组 . 函数 function(){} . object) undefined 出现的情景 :  (1)变 ...

  5. BMP字节流转成CBitmap类

    BYTE* m_pBmpData = NULL; BITMAPINFO* m_pBmpInfo = new BITMAPINFO[sizeof(BITMAPINFOHEADER)+sizeof(RGB ...

  6. Linux下部署开源版“禅道”项目管理系统《转载》

    Linux下部署开源版“禅道”项目管理系统 https://www.cnblogs.com/xxsl/p/6525378.html

  7. IPv6-isis配置

    ①:ipv6 unicast-routing——开启IPv6路由功能 ②:router isis word——开启ISIS进程 ③:is-type——可以修改路由器ISIS等级 ④:进入接口 ⑤:启用 ...

  8. HTTP TCP UDP ICMP IP ARP 协议详解（10.15 第二十一天）

    ARP协议 ARP(Address Resolution Protocol)协议 地址解析协议 把网络层的IP地址翻译成在数据链路层寻址的48位硬件地址(MAC地址) 在OSI模型中ARP协议属于链路 ...

  9. easyUI中，z-index失效问题

    1.z-index是css的属性,第一种div设置css的z-index时,是不起作用的,最后设置在style中才起作用了,比较诡异的一件事情. 2.还有一种情况就是,遮盖层在dialog弹出层的下面 ...

  10. 百度地图API提供Geocoder类进行地址解析

    根据地址描述获得坐标百度地图API提供Geocoder类进行地址解析,您可以通过Geocoder.getPoint()方法来将一段地址描述转换为一个坐标. // 创建地址解析器实例var myGeo ...