小球在页面跳动
实现方法用了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>