<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
position: absolute;
border-radius: 50%;
}
</style>
<body>
<div id="div0"></div>
<script>
var bool=true;//建立开关,控制开始和停止
init();//初始化函数,添加点击函数
function init() {
var div = document.getElementById("div0");
document.onclick = function (e) {
bool=!bool;//(取反)用来构成开关
};
setInterval(animation, 400, div);//添加每隔400ms执行一次的函数
}
function animation(div) {
if (!bool)return;//!bool时跳出,就能停下来
div.style.left=Math.random()*950+"px";//水平方向随机距离
div.style.top=Math.random()*550+"px";//数值方向随机距离
var col="rgba(";
for(var i=0;i<3;i++){
col+=Math.floor(Math.random()*256)+",";
}
col+=Math.random().toFixed(2)+")";
div.style.backgroundColor=col;//随机颜色
}
</script>
</body>
</html>