js实现网页回弹小球效果
直接上效果图
运行页面会首先弹出一个输入框,询问用户想要产生的小球数量,随后后台就会产生指定数量的小球,在页面中来回跳动,触碰到页面边框时,就会回弹,且产生的小球颜色随机,小球在页面中的位置随机,小球运行的速度随机。
代码如下:
<!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实现网页回弹小球效果的更多相关文章
- 利用tween,使用原生js实现模块回弹动画效果
最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...
- [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- js写的数码时钟,在“最小化”浏览器 或者 “切换网页”是动画效果好像不对
一.问题 在“最小化”浏览器 或者 “切换网页”是动画效果不对,不知道哪里出了问题???是不是”最小化“时网页定时器关掉了,还是其他什么原因啊 ???? 二.HTML代码如下 <div id=& ...
- JS让网页上文字出现键盘打字的打字效果
一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...
- 纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果
- Rainyday.js – 使用 JavaScript 实现雨滴效果
Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...
- js实现网页防止被iframe框架嵌套及几种location.href的区别
首先我们了解一下几种location.href的区别简单的说:几种location.href的区别js实现网页被iframe框架功能,感兴趣的朋友可以了解下 首先我们了解一下:window.locat ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js+css实现带缓冲效果右键弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 关于一类容斥原理设计 dp 状态的探讨
写在前面 为什么要写?因为自己学不明白希望日后能掌握. 大体思路大概是 设计一个容斥的方案,并使其贡献可以便于计算. 得出 dp 状态,然后优化以得出答案. 下列所有类似 \([l,r]\) 这样的都 ...
- 实践剖析.NET Core如何支持Cookie和JWT混合认证、授权
前言 为防止JWT Token被窃取,我们将Token置于Cookie中,但若与第三方对接,调用我方接口进行认证.授权此时仍需将Token置于请求头,通过实践并联系理论,我们继续开始整活!首先我们实现 ...
- CSS基础6之盒子模型1
盒子概述 以下是盒子模型的一个图形解释 一.内边距(填充) 属性有: (1) padding 设置所有内边距 (2) padding-top 设置上边距 (3) padding-left 设置左边 ...
- linux(CentOS7) 之 jdk1.8 下载及安装
下载 一.百度搜索oracle,进入官网(或直接进入官网https://www.oracle.com) 二.选择 products 下的 java 三.选择Download Java 四.往下翻找到J ...
- Flask_CSRF保护(十一)
flask使用 flask-wtf 模块提供的 CSRFProtect对象开启CSRF防护,方法如下: 后端设置 from flask import Flask from flask_wtf.csrf ...
- 查看磁盘I/O命令iostat详解
iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况.iostat也有一个弱 ...
- Zuul网关 @EnableZuulProxy 和 @EnableZuulServer 的区别
1. @EnableZuulProxy 2. @EnableZuulServer 3.解释 1)@EnableZuulProxy简单理解为@EnableZuulServer的增强版, 当Zuul与Eu ...
- 2022年form表单中input控件最详细总结
语法 <input type="" name="" id="" value="" placeholder=&quo ...
- HDU 1106 (1.3.5) 排序 (C语言描述)
排序 Problem Description 输入一行数字,如果我们把这行数字中的'5'都看成空格,那么就得到一行用空格分割的若干非负整数(可能有些整数以'0'开头,这些头部的'0'应该被忽略掉,除非 ...
- Python科学计算类库
Numpy是什么 Numpy是一个开源的Python科学计算库.使用Numpy,就可以很自然地使用数组和矩阵.Numpy包含很多实用的数学函数,涵盖线性代数运算.傅里叶变换和随机数生成等功能. 矩阵: ...