什么是面向对象

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

什么是面向对象编程

以前 学。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的环境安装

    Golang的环境安装 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Go语言环境安装 1>.下载Golang的安装包 博主推荐阅读: https://studygola ...

  2. 001、JAVA开发环境安装与eclipse软件第一印象

    折腾了快1个星期,一直没有成功装好JAVA环境,eclipse一直打不开,java环境配置的问题真是不得不吐槽一下,太烂了.今天反反复复折腾好久,终于搞定了.用的金山毒霸,方法如下: 一.打开金山毒霸 ...

  3. spring源码 ListableBeanFactory接口

    ListableBeanFactory接口表示这些Bean是可列表的 /* * Copyright 2002-2016 the original author or authors. * * Lice ...

  4. iOS 13适配

    1. 安装时,加入Xcode11.3 后 原xcode会安装开发工具插件时候出现 点击安装插件之后会出现 目前没找到解决方案.只能在一个mac电脑上安装使用一个版本. 2.编译时,会出现libstdc ...

  5. 【shell】常用shell脚本

    1.检查主机存活状态 #!/bin/bash IP_LIST="192.168.18.1 192.168.1.1 192.168.18.2" for IP in $IP_LIST; ...

  6. 下页小希学MVC5+EF6.2 学习记录三

      目的:1 学习mvc+ef 2  写下日记也是对自己的督促 期待已久的EF终于来了. 学完本篇文章,你将会掌握基于EF数据模型的完整开发流程. 本次将会完成EF数据模型的搭建和使用. 基于这个模型 ...

  7. 基于 burpsuite的web逻辑漏洞插件开发（来自JSRC安全小课堂，柏山师傅）

    基于 burpsuite的web逻辑漏洞插件开发 BurpSuite 提供了插件开发接口,支持Java.Python.Ruby语言的扩展.虽然 BApp Store 上面已经提供了很多插件,其中也不乏 ...

  8. springboot整合mybatis与thymeleaf

    1.创建springboot项目 (1)选择Spring Initializr (2)填写自己的Group 与 Artifact (3)选择依赖框架 等待maven下载好依赖和插件即可 2.主配置文件 ...

  9. 花了一周整理的，这是价值10W的32个Python项目！

    今天为大家整理了32个Python爬虫项目.整理的原因是,爬虫入门简单快速,也非常适合新入门的小伙伴培养信心.所有链接指向GitHub,祝大家玩得愉快~QQSpider ! QQ空间爬虫,包括日志.说 ...

  10. 对python中元类的理解

    1. 类也是对象 在大多数编程语言中,类就是一组用来描述如何生成一个对象的代码段.在Python中这一点仍然成立: >>> class ObjectCreator(object): ...