飛舞的氣泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            text-align: center;
        }
        .container {
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            background-color: #fbfbfb;
            margin: auto;
        }
        .container > .ball {
            position: absolute;
            border-radius: 50%;
            box-shadow: 0 0 10px #888888 inset;
        }
    </style>
</head>
<body>
<p>
    <button id="pup-ball">彈球</button>
</p>
<div class="container"></div>
<script>
        document.getElementById('pup-ball').onclick = function () {
        var box = document.getElementsByClassName('container')[0],
            ball = document.createElement('div'),
            size = 20 + Math.floor(Math.random() * 5) * 10,
            color = ['yellow', 'green', 'blue', 'purple', 'red'][Math.floor(Math.random() * 5)],
            stepx = (5 + Math.floor(Math.random() * 10)) * ([-1, 1].sort((a, b) => Math.random() - 0.5).shift()),
            stepy = (5 + Math.floor(Math.random() * 10)) * ([-1, 1].sort((a, b) => Math.random() - 0.5).shift()),
            top = box.clientWidth / 2 - size / 2,
            left = box.clientHeight / 2 - size / 2;
        ball.setAttribute('class', 'ball');
        box.appendChild(ball);
        var timer = setInterval(function () {
            ball.style.cssText = `width:${size}px;height:${size}px;background:${color};top:${top}px;left:${left}px`;
            top += stepy
            if (top < 0 || top > box.clientHeight - size) stepy = -stepy;
            left += stepx;
            if (left < 0 || left > box.clientWidth - size)  stepx = -stepx;
        }, 30)
    }
</script>
</body>
</html>

飛舞的氣泡

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

值|引用傳遞-數(shù)組|對象解構(gòu)-call|apply|bind-訪問器-流程控制

2021-12-07 21:10:43

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

飛舞的氣泡