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

---

## innerHTML 实现
第一反应是很久之前写过的，通过不停 `innerHTML` 以及随机数来达到变换位置的做法。
```js
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。
```html
<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` 不会有效果。  
顺便加上过渡动画。
```css
#ball{
    position: absolute;
    transition: all .5s;
}
```

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

样式是有的，删了。

JS 被点击就会移动的球

innerHTML 实现

.style 实现

后记

the end.