小球在页面跳动

实现方法用了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>

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

纯js封装一个多功能弹出框
不借助其它的css代码和图片资源,可直接调用. 原创内容,请勿转载. 注意,不要直接复制文章里的封装代码,因为编辑器的原因,无论怎么编辑,它还是给修改了代码.文末提供了封装代码的下载地址(无需积分) ...
java实现html页面转pdf解决方案_[Java教程]纯js实现html转pdf
[Java教程]纯js实现html转pdf 0 2017-02-16 00:00:30 项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式. ...
纯js单页面赛车游戏
纯js单页面赛车游戏这次就是给大家分享赛车的游戏: 废话不多,直接上代码: <!DOCTYPE html> <html> <head><meta chars ...
html页面跳转href过渡效果,页面锚链接平滑动画过渡纯JS插件
smooth-scroll.js是一款轻量级的纯JS页面锚链接平滑过渡插件.通过该锚链接插件,可以在点击页面的锚链接时,以指定的过渡动画平滑滚动页面. 安装可以通过npm或bower来安装smoot ...
纯JS单页面赛车游戏代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可支持IE9+版本 <!DOCTYPE html> <html&g ...
php赛车源码,纯JS单页面赛车游戏制作代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可支持IE9+版本 Best Fly Car input { border: 1px ...
php 右下脚弹窗,纯js的右下角弹窗实例代码
下面小编就为大家带来一篇纯js的右下角弹窗实例代码.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧这个弹窗是如下图的效果: 打开网页的时候,这个弹窗会淡入,之后点击右上 ...
【jQuery】纯js的右下角弹窗
这个弹窗是如下图的效果: 打开网页的时候,这个弹窗会淡入,之后点击右上角的关闭按钮,其实就是一个& times;会淡出. 采用淡入淡出是因为直接Jquery一个fadeIn与fadeOut省事 ...
纯js弹窗Dialog组件
纯js弹窗Dialog组件文章目录纯js弹窗Dialog组件 1. js部分 2. css样式 3. 简单使用 4. 效果展示 1. js部分 /* eslint-disable */ const ...

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

小球在页面跳动

JS

HTML

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

最新文章

热门文章