直接上效果图


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

<!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. 访问局域网内其他主机的VMware虚拟机上的mysql数据库和redis缓存

    上一篇写了访问局域网内其他主机的虚拟机上的项目 ,现在说说访问局域网内其他主机的虚拟机上的数据库和缓存 博主使用的linux是Ubuntu16.04: 一.安装数据库和缓存 这里连接的数据库和缓存以m ...

  2. 【白话科普】10s 从零看懂 H5

    最近大家有没有发现,很多微信公众号的动态内容变多了?我们常常可以看到,公众号内容中有很多动态图片甚至动画,还可以通过手指滑动切换页面,或者有一些小的点击互动. 这种看起来有点高级的小作品,其实是都是& ...

  3. MongoDB_数据模型&数据类型(四)

    数据模块 传统的关系型数据库需要对表结构进行预先定义和严格的要求,而这样的严格要求,导致了处理数据的过程更加烦琐,甚至降低了执行效率. 在数据量达到一定规模的情况下,传统关系型数据库反应迟钝,想解决这 ...

  4. [Beyond Compare] 排除/忽略 .svn 文件夹

    [Beyond Compare] Exclude .svn folders Beyond Compare 3 Session >> Session Settings... >> ...

  5. [转]浮点运算decimal.js

    开发过程中免不了有浮点运算,JavaScript浮点运算的精度问题会带来一些困扰 JavaScript 只有一种数字类型 ( Number ) JavaScript采用 IEEE 754 标准双精度浮 ...

  6. 从内存管理原理,窥探OS内存管理机制

    摘要:本文将从最简单的内存管理原理说起,带大家一起窥探OS的内存管理机制,由此熟悉底层的内存管理机制,写出高效的应用程序. 本文分享自华为云社区<探索OS的内存管理原理>,作者:元闰子 . ...

  7. SRC(不定期更新)

    主域名收集 响应包 Content-Security-Policy-Report-Only

  8. markdown mermaid流程图

    流程图 所有流程图都由节点.几何图像.箭头或线条组成. mermaid代码定义了这些节点和边的制作和交互方式.可以有不同的箭头类型.多向箭头以及与子图的连接. 节点 节点 flowchart LR i ...

  9. Android官方文档翻译 六 1.4Starting Another Activity

    Starting Another Activity 开启另一个Activity This lesson teaches you to 这节课教给你: Respond to the Send Butto ...

  10. after effects的xml格式工程文件aepx的格式分析(一)

    表面上看,AE的工程文件可以另存为xml格式,我们可以通过直接编辑XML来做一些事情. 很可惜,通过aepx文件修改AE工程,能做到的非常有限.理由是: 1.重要的属性都放在了标签的bdata这个属性 ...