javaScript学习笔记（六）面向对象案例(红绿灯，炫彩小球)

最新推荐文章于 2022-09-02 16:48:06 发布

可嘞

最新推荐文章于 2022-09-02 16:48:06 发布

阅读量220

点赞数

分类专栏：慕课文章标签： js javascript css

本文链接：https://blog.csdn.net/qq_42113778/article/details/118339226

版权

慕课专栏收录该内容

15 篇文章 0 订阅

订阅专栏

面向对象案例

- 一、红绿灯
- 二、渲彩小球

一、红绿灯

在这里插入图片描述


  <div id='box'></div>
<script>
        function Light() {
            this.color = 1
            this.init();
            this.bindEvent()
        }
        Light.prototype.init = function () {
            this.img = document.createElement('img')
            this.img.src = './images/light/1.png'
            box.append(this.img)
        }
        Light.prototype.bindEvent = function () {
            var that = this;
            this.img.onclick = function () {
                that.changeColor()
            }
        }
        Light.prototype.changeColor = function () {
            this.color++
            if (this.color == 4) {
                this.color = 1
            }
            this.img.src = `./images/light/${this.color}.png`
        }
        var box = document.getElementById('box')
        var count = 20;
        while (count--) {
            new Light()
        }
</script>

二、渲彩小球

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: #000000;
        }

        .ball {
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>

<body>
    <script>
        function Ball(x, y) {
            console.log(colorArr)
            // x，y 表示的是圆心的坐标
            this.x = x;
            this.y = y;
            // 半径属性
            this.r = 20;
            // 小球背景颜色
            this.color = colorArr[parseInt(Math.random() * colorArr.length)];
            //透明度
            this.opacity = 1
            // 小球的增量x和y的增量
            do {
                this.dX = parseInt(Math.random() * 20) - 10;//[-3,3]
                this.dY = parseInt(Math.random() * 20) - 10;//[-3,3]
            } while (this.dY == 0 && this.dX == 0);
            this.dX = parseInt(Math.random() * 20) - 10;//[-3,3]
            this.dY = parseInt(Math.random() * 20) - 10;//[-3,3]
            // 初始化
            this.init()
            // 把实例自己推入数组中，注意这里this不是不是类本身，是实例
            ballArr.push(this)

        }
        Ball.prototype.init = function () {
            this.div = document.createElement('div')
            // this.div.src='./images/imgs.jpg'
            this.div.className = 'ball';
            this.div.style.width = this.r * 2 + 'px';
            this.div.style.height = this.r * 2 + 'px';
            this.div.style.left = this.x - this.r + 'px';
            this.div.style.top = this.y - this.r + 'px';
            this.div.style.backgroundColor = this.color;
            // 上树
            document.body.appendChild(this.div)
        }
        // 更新
        Ball.prototype.updata = function () {
            console.log(this.dX)
            // 位置改变
            this.x += this.dX;
            this.y -= this.dY;
            // 半径改变
            this.r += 0.2;
            // 透明度改变
            this.opacity -= 0.01;
            this.div.style.width = this.r * 2 + 'px';
            this.div.style.height = this.r * 2 + 'px';
            this.div.style.left = this.x - this.r + 'px'
            this.div.style.top = this.y - this.r + 'px';
            this.div.style.opacity = this.opacity;

            //当透明度小于e的时候，就需要从数组中删除自己，DOM元素也要删掉自己
            if (this.opacity < 0) {
                // 在数组中删除自己
                for (var i = 0; i < ballArr.length; i++) {
                    if (ballArr[i] == this) {
                        ballArr.splice(i, 1)
                    }
                }
                // s删除自己的dom
                document.body.removeChild(this.div)
            }

        }
        // 把所有的小球放在一个数组中
        var ballArr = []

        // 初始化随机颜色数组
        var colorArr = ['#66CCCC', '#CCFF66', '#FF99CC', '#FF6666', '#CC3399', '#FF6600']

        // 鼠标指针添加事件监听
        document.onmousemove = function (e) {
            //     // 得到鼠标指针当前的位置
            var x = e.clientX;
            var y = e.clientY
            console.log(x, y)
            new Ball(x, y)
        }

        // 定时器
        console.log(ballArr)
        setInterval(() => {
            // 遍历数组，调用updata方法
            for (var i = 0; i < ballArr.length; i++) {
                ballArr[i].updata()
            }
        }, 20);
    </script>

</body>

</html>

可嘞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaScript学习笔记（六）面向对象案例(红绿灯，炫彩小球)

面向对象案例一、红绿灯二、渲彩小球一、红绿灯 <div id='box'></div><script> function Light() { this.color = 1 this.init(); this.bindEvent() } Light.prototype.init = function () { thi
复制链接

扫一扫