小球触壁反弹变色

最新推荐文章于 2024-07-16 17:56:11 发布

冷羽飞寒

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量161

点赞数 4

分类专栏： JavaScriptAPI案例文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/2201_75407865/article/details/128185000

版权

JavaScriptAPI案例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

涉及知识点

任何事件都有内置对象event，event代表时间状态。

兼容性： var event=event||window.event;

clientWidth：元素的宽度（不算border）clientHeight：元素的高度（不算border）

offsetWidth：元素的宽度（算border）offsetHeight：元素的高度（算border）

成品展示

一、效果展示

二、代码展示

1、基础框架

<div id="box">
        <div id="inner"></div>
    </div>
    <button id="start">开始</button>
    <button id="stop">暂停</button>
    <button id="over">结束</button>

2、CSS样式

#box {
        width: 800px;
        height: 500px;
        position: relative;
        border: 5px solid red;
        margin: 20px auto;
    }

    #inner {
        width: 50px;
        height: 50px;
        position: absolute;
        background-color: #00f;
        border-radius: 50%;
    }

3、JS代码

var box = document.querySelector("#box");
    var inner = document.querySelector("#inner");
    var start = document.querySelector("#start");
    var end = document.querySelector("#stop");
    var over = document.querySelector("#over");
    var innerLeft = 0;
    var innerTop = 0;
    end.disabled = true;
    over.disabled = true;
    var moveX = true;
    var moveY = true;

    function random(m, n) {
        return Math.floor(Math.random() * (n - m + 1) + m);
    }

    function color() {
        return "rgb(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ")";
    }
    start.onclick = function () {
        start.disabled = true;
        end.disabled = false;
        over.disabled = false;
        Xmax = box.clientWidth - inner.clientWidth;
        Ymax = box.clientHeight - inner.clientHeight;
        timer = setInterval(function () {
            if (moveX == true) {
                if (innerLeft <= Xmax) {
                    innerLeft++;
                } else {
                    moveX = false;
                    inner.style.backgroundColor=color();
                }

            } else {

                if (innerLeft >= 0) {
                    innerLeft--;
                } else {
                    moveX = true;
                    inner.style.backgroundColor=color();
                }
            }
            if (moveY == true) {
                if (innerTop <= Ymax) {
                    innerTop++;
                } else {
                    moveY = false;
                    inner.style.backgroundColor=color();
                }

            } else {
                if (innerTop >= 0) {
                    innerTop--;
                } else {
                    moveY = true;
                    inner.style.backgroundColor=color();
                }
            }
            inner.style.left = innerLeft + "px";
            inner.style.top = innerTop + "px";
        }, 5);
    }
    end.onclick = function () {
        clearInterval(timer);
        start.disabled = false;
        this.disabled = true;
    }
    over.onclick = function () {
        clearInterval(timer);
        innerLeft = 0;
        innerTop = 0;
        inner.style.left = innerLeft + "px";
        inner.style.top = innerTop + "px";
        start.disabled = false;
        inner.style.backgroundColor= "#00f";
    }