纯JS实现小球在页面跳动/弹弹弹（有注释）

最新推荐文章于 2022-08-08 22:59:09 发布

追雪球

最新推荐文章于 2022-08-08 22:59:09 发布

阅读量1.3k

点赞数 1

分类专栏： JavaScript学习笔记文章标签： js javascript html html5 css

本文链接：https://blog.csdn.net/weixin_43704455/article/details/112477105

版权

JavaScript学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

小球在页面跳动

实现方法用了transform:translate(x,y);
即在当前位置进行移动，只需动态改变x和y的值就可以实现移动
点我查看页面效果（点击小球开始跳动）

JS

//获取div节点
let divEle = document.getElementsByTagName("div")[0];
//在js里给小球设置样式
divEle.style.width = 50 + "px";
divEle.style.height = 50 + "px";
divEle.style.backgroundColor = "skyblue";
divEle.style.borderRadius = "50%";
divEle.style.position = "absolute";
divEle.style.left = 0;
divEle.style.top = 0;

//获取随机数
function getNum(min, max = 0) {
    min > max ? [min, max] = [max, min] : "";
    return parseInt(Math.random() * (max - min + 1)) + min;
}
//声明k，必须写在函数外，才能使用停止时间函数
let k;
//控制移动的函数
function move() {
    clearInterval(k);//每次调用先停止时间函数，不然会出现每调用一次，运行速度变快一次
    let winWidth = window.innerWidth;//获取视口宽度、高度
    let winHeight = window.innerHeight;
    winWidth -= parseInt(divEle.style.width);//让它减去小球的宽度，因为移动到右边的最大距离是视口宽度减去小球自身宽度
    winHeight -= parseInt(divEle.style.height);
    console.log(winWidth);
    let i = 0;
    let j = 0;
    let x = 0;
    let y = 0;
    //设置时间函数
    k = setInterval(
        function () {
            //当它到达边界时改变颜色
            if (i == 0 || j == 0 || i == winWidth || j == winHeight) {
                divEle.style.backgroundColor = `rgb(${getNum(0, 255)},${getNum(0, 255)},${getNum(0, 255)})`;
            }
            divEle.style.transform = `translate(${x}px,${y}px)`;//移动它的位置
            i+=1;//随意设置，与快慢有关，但也会影响35行判断到达最大移动距离时改变颜色，因为它可能加不到等于最大距离的时候
                //假如最大距离为10，i+=3，那i的值只能为3，6，9，12...则进不了改变颜色那个条件，则到达右边时不会改变颜色
            j+=1;
            x = i;
            y = j;
            if (i >= winWidth) {
                x = 2 * winWidth - i;//当到达最大移动距离后，让它的x变为两个最大移动距离减去i，因为i是一值在增加的
                if (i >= 2 * winWidth) {//当到达两个最大移动距离后，即小球已经回到了最左边了，让i=0，就重新开始
                    i = 0;
                    x = 0;
                }
            }
            if (j >= winHeight) {
                y = 2 * winHeight - j;
                if (j >= 2 * winHeight) {
                    j = 0;
                    y = 0;
                }
            }
        }, 1
    )
}
// move();//需要页面一打开就运行就可以直接取消注释

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹弹弹</title>
</head>
<body>
    <div onclick="move()"></div>//点击小球开始弹
    <script src="tan.js"></script>
</body>
</html>

追雪球

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
纯JS实现小球在页面跳动/弹弹弹（有注释）

小球在页面跳动实现方法用了transform:translate(x,y);即在当前位置进行移动，只需动态改变x和y的值就可以实现移动点我查看页面效果（点击小球开始跳动）JS//获取div节点let divEle = document.getElementsByTagName("div")[0];//在js里给小球设置样式divEle.style.width = 50 + "px";divEle.style.height = 50 + "px";divEle.style.backgrou
复制链接

扫一扫