跳动的变色小球

最新推荐文章于 2024-09-25 14:00:00 发布

V________

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量155

点赞数

分类专栏：练习文章标签： javascript css css3 html5

本文链接：https://blog.csdn.net/V________/article/details/112483458

版权

练习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

let screenWidth = window.innerWidth;
let screenHeight = window.innerHeight;
let spanEle = document.getElementsByTagName('span')[0];
spanEle.style.display = 'inline-block';
spanEle.style.width = 50 + 'px';
spanEle.style.height = 50 + 'px';
spanEle.style.backgroundColor = 'cornflowerblue';
spanEle.style.borderRadius = '50%';
spanEle.style.position = 'absolute';
spanEle.style.left = 0;
spanEle.style.top = 0;
let i = 0;
let j = 0;
let timer;
let state = true;
let temp = true;
function suiji() {
    let i = parseInt(Math.floor(Math.random() * 256));
    return i;
}
spanEle.addEventListener('click', timer);
timer = setInterval(function () {
    if ((i > parseInt(screenWidth) - 50) || state == false) {
        state = false;
        while (state == false) {
            if (i == 1) {
                state = true;
                spanEle.style.backgroundColor = `rgb(${suiji()},${suiji()},${suiji()})`;
            }
            spanEle.style.left = --i + 'px';
            break;
        }
    }
    else if (state == true) {
        spanEle.style.left = ++i + 'px';
        if (i==parseInt(screenWidth)- 50) {
            spanEle.style.backgroundColor = `rgb(${suiji()},${suiji()},${suiji()})`;
        }
    }
    if ((j > parseInt(screenHeight) - 50) || temp == false) {
        temp = false;
        while (temp == false) {
            if (j == 1) {
                temp = true;
                spanEle.style.backgroundColor = `rgb(${suiji()},${suiji()},${suiji()})`;
            }
            spanEle.style.top = --j + 'px';
            break;
        }
    }
    else if (temp == true) {
        spanEle.style.top = ++j + 'px';
        if (j==parseInt(screenHeight)- 50) {
            spanEle.style.backgroundColor = `rgb(${suiji()},${suiji()},${suiji()})`;
        }
    }
}, 1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: cornflowerblue;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <span></span>
    <script src="./ball.js"></script>
</body>
</html>