JS 被点击就会移动的球

水一篇之前帮同学写的试题

innerHTML 实现

第一反应是很久之前写过的，通过不停 innerHTML 以及随机数来达到变换位置的做法。

代码语言：javascript复制

const body = document.getElementsByTagName('body')[0]; //获取<body>

function randomP(){ //随机数函数
    return Math.round(Math.random() * (500 - 1))   1;
}

function spawn(){ //生成一个点击运行 spawn() 函数的按钮，同时将随机数代入样式获得坐标。
    body.innerHTML="<button onclick='spawn()' style='left:"  randomP()  "px;top:" randomP() "px'>球</button>";
}

spawn();//页面首次加载运行一次 spawn() 函数

但是这样等于是每次点击都重新写入一个元素。因为不是同一个元素，所以自然也无法使用 CSS 来获得 transition 动画过渡效果，即小球只会闪现。

.style 实现

将思路调整为点击修改小球坐标就可以。（其实这样才是正常思路，我只是想顺便提一嘴之前重复 innerHTML 的玩法很逆天）可以用 *.style.[css] 来实现修改 style。

代码语言：javascript复制

<button id="ball" onclick="change()">球</button>
<script>
    function change(){
        const ball = document.getElementById('ball'); //获取小球 id
        ball.style.top=randomP(); //将 randomP() 代入 style 里的 top 值
        ball.style.left=randomP(); //将 randomP() 代入 style 里的 left 值
    }
    change(); //页面加载完成先运行一次来让小球随机移动

    function randomP(){ //随机数函数
        return Math.round(Math.random() * (700 - 1))   1   'px'; //在结尾加上 px，省事。
    }
</script>

然后改一下定位也是必须的，不然 top 和 left 不会有效果。顺便加上过渡动画。

代码语言：javascript复制

#ball{
    position: absolute;
    transition: all .5s;
}

后记

更完美的做法还得在随机数函数这块获取窗口大小，再根据窗口大小来生成随机数。随机数这东西还没研究过，有空再看看。

样式是有的，删了。

button innerhtml spawn 动画函数

0 人点赞