直接上效果图


运行页面会首先弹出一个输入框,询问用户想要产生的小球数量,随后后台就会产生指定数量的小球,在页面中来回跳动,触碰到页面边框时,就会回弹,且产生的小球颜色随机,小球在页面中的位置随机,小球运行的速度随机。
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>会反弹的小球</title>
<style>
* {
/*margin: 0;*/
padding: 0;
overflow: hidden;
} span {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
</body>
</html>
<script>
/**
*效果为,页面生成用户指定数量的不同颜色的小球,然后各自移动,触碰到边界就回弹
*/
let count = parseInt(prompt("你想随机产生几个小球?"));
// console.log(count) for (let i = 1; i <= count; i++) {
// i = document.createElement("span");
// document.body.appendChild(i);
// console.log(i)
document.body.innerHTML += `<span></span>`
} let spans = document.getElementsByTagName('span'); for (let i = 0; i < spans.length; i++) {
spans[i].style.backgroundColor = color();
site(spans[i]);
sporting(spans[i]);
} /**
*返回一个随机颜色
*/
function color() {
let rr = Math.round(Math.random() * 255);
let gg = Math.round(Math.random() * 255);
let bb = Math.round(Math.random() * 255);
return `rgb(${rr},${gg},${bb})`;
} /**
*返回页面内的一个随机位置
*/
function site(now) {
let w = window.innerWidth - now.offsetWidth;
let h = window.innerHeight - now.offsetHeight;
now.style.left = `${Math.round(Math.random() * w)}px`
now.style.top = `${Math.round(Math.random() * h)}px`
} /**
* 实现回弹效果
* @param now 传入需要回弹的对象
*/
function sporting(now) {
let x = now.offsetLeft, y = now.offsetTop;
let w = 0, h = 0;
let flagX = true;
let flagY = true;
setInterval(function () {
w = window.innerWidth - now.offsetWidth;
h = window.innerHeight - now.offsetHeight;
if (x > w) flagX = false;
if (y > h) flagY = false;
if (x < 1) flagX = true;
if (y < 1) flagY = true;
x = flagX ? ++x : --x;
y = flagY ? ++y : --y;
now.style.left = `${x}px`
now.style.top = `${y}px`
}, (Math.round(Math.random() * 10 + 1)))
}
</script>

如果对你有帮助的话,三连支持一下吧!

js实现网页回弹小球效果的更多相关文章

  1. 利用tween,使用原生js实现模块回弹动画效果

    最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...

  2. [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  3. js写的数码时钟,在“最小化”浏览器 或者 “切换网页”是动画效果好像不对

    一.问题 在“最小化”浏览器 或者 “切换网页”是动画效果不对,不知道哪里出了问题???是不是”最小化“时网页定时器关掉了,还是其他什么原因啊 ???? 二.HTML代码如下 <div id=& ...

  4. JS让网页上文字出现键盘打字的打字效果

    一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...

  5. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  6. Rainyday.js – 使用 JavaScript 实现雨滴效果

    Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...

  7. js实现网页防止被iframe框架嵌套及几种location.href的区别

    首先我们了解一下几种location.href的区别简单的说:几种location.href的区别js实现网页被iframe框架功能,感兴趣的朋友可以了解下 首先我们了解一下:window.locat ...

  8. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Docker_创建自定义镜像(5)

    生成docker镜像有两种方式 使用已有容器生成镜像 使用dockerfile生成镜像 一.使用已有容器生成镜像 1.下载centos镜像,并创建容器 2.进入容器部署python环境 centos镜 ...

  2. Python_上下文管理器

    上下文管理器(context manager)是 Python 编程中的重要概念,用于规定某个对象的使用范围.一旦进入或者离开该使用范围,会有特殊操作被调用 (比如为对象分配或者释放内存).它的语法形 ...

  3. 第10组 Beta冲刺 总结(组长)

    1.基本情况 组长博客链接:https://www.cnblogs.com/cpandbb/p/14050808.html 答辩总结: ·因为alpha阶段的产品做得偏离了方向,所以beta冲刺大家非 ...

  4. 灵雀云Kube-OVN进入CNCF沙箱,成为CNCF首个容器网络项目

    昨日,云原生计算基金会 (CNCF) 宣布由灵雀云开源的容器网络项目Kube-OVN 正式进入 CNCF 沙箱(Sandbox)托管.这是全球范围内首个被CNCF纳入托管的开源CNI网络项目,也是国内 ...

  5. Guava Cache源码浅析

    1. 简介 Guava Cache是指在JVM的内存中缓存数据,相比较于传统的数据库或redis存储,访问内存中的数据会更加高效,无网络开销. 根据Guava官网介绍,下面的这几种情况可以考虑使用Gu ...

  6. Android EditText不弹出输入法总结,焦点问题的总结

    看一个manifest中Activity的配置,如果这个页面有EditText,并且我们想要进入这个页面的时候默认弹出输入法,可以这样设置这个属相:android:windowSoftInputMod ...

  7. 《剑指offer》面试题35. 复杂链表的复制

    问题描述 请实现 copyRandomList 函数,复制一个复杂链表.在复杂链表中,每个节点除了有一个 next 指针指向下一个节点,还有一个 random 指针指向链表中的任意节点或者 null. ...

  8. Sentry 开发者贡献指南 - 什么是 Scope, 什么是 Hub?

    当一个事件被捕获并发送到 Sentry 时,SDK 会将该事件数据与来自当前 scope 的额外信息合并.SDK 通常会在框架集成中为您自动管理 scope,您无需考虑它们.但是,您应该知道 scop ...

  9. golang中浮点型底层存储原理和decimal使用方法

    var price float32 = 39.29 float64和float32类似,只是用于表示各部分的位数不同而已,其中:sign=1位,exponent=11位,fraction=52位,也就 ...

  10. 使用Hot Chocolate和.NET 6构建GraphQL应用(2) —— 实体相关功能实现

    系列导航 使用Hot Chocolate和.NET 6构建GraphQL应用文章索引 需求 在本文中,我们将会准备好用于实现GraphQL接口所依赖的底层数据,为下一篇文章具体实现GraphQL接口做 ...