JavaScript—面向对象小例子

最新推荐文章于 2022-02-08 16:25:32 发布

diaopinglan6176

最新推荐文章于 2022-02-08 16:25:32 发布

阅读量97

点赞数

文章标签： javascript 设计模式测试 ViewUI

原文链接：http://www.cnblogs.com/ruogu/p/10830381.html

版权

什么是面向对象

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

什么是面向对象编程

以前学。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>

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

转载于:https://www.cnblogs.com/ruogu/p/10830381.html

diaopinglan6176

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript—面向对象小例子

什么是面向对象要是以前别人问我。随口道来，封装继承多态，万物皆对象。。。一大推。说的自己都以为自己掌握了面向对象。呵呵一笑。确实掌握了只是不会用。。。。。什么是面向对象编程以前学。Net 虽然MVC 本身就是面向对象。也就没管什么思想，就记住步骤，跟着写就好。现在想想，那时候还是太年轻了，当我看了设计模式里面对MCV的一个解释。发现...
复制链接

扫一扫