【Javascript】入门之面向对象创建实例

最新推荐文章于 2024-05-29 09:01:01 发布

夹心776655

最新推荐文章于 2024-05-29 09:01:01 发布

阅读量119

点赞数

分类专栏：代码实例 js交互设计文章标签： javascript

本文链接：https://blog.csdn.net/qq_37086980/article/details/110925231

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

js交互设计

46 篇文章 0 订阅

订阅专栏

描述: 运用面向对象的方法创建飞机对象实例

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象创建飞机</title>
    <style>
        #box{
            border: 1px solid #000;
            width: 300px;
            height: 500px;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById('box');
        console.log(box);
        /* 
            属性: 静态的描述 变量 img left top
            方法: 动态的行为 行为 函数
         */
         function Plane(parent, node, src, x, y){
            //构造函数
            this.parent = parent;
            this.node = node;
            this.src = src;
            this.x = x;
            this.y = y;
            // img占位
            this.img = null;
         }

        //  给方法添加原型
        Plane.prototype.init = function(){
            // 对象的方法
            // 创建一个节点添加到页面中
            this.img = document.createElement(this.node);
            console.log(this.img);

            // 设置图片地址
            this.img.src = this.src;

            // 设置this.img的样式属性
            this.img.style.position = 'absolute';
            this.img.style.left = this.x + 'px';
            this.img.style.top = this.y + 'px';

            // 追加到页面中
            this.parent.appendChild(this.img);
        }

        var obj = new Plane(box, 'img', '../image/我的飞机.gif', 120, 120);
        obj.init();

    </script>
</body>
</html>

夹心776655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Javascript】入门之面向对象创建实例

描述: 运用面向对象的方法创建飞机对象实例代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>面向对象创建飞机</title> <style&gt
复制链接

扫一扫