JavaScript实现狂欢舞动的小球

狂欢舞动的小球效果（也就一个html代码）：

代码（html）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>滚动的小球</title><style>*{padding: 0;margin: 0;}body,html{height: 100%;background-color: navajowhite;}body{position: relative;}div{border-radius: 50%;position: absolute;}</style>
</head>
<body>
<script>//页面有20个小球for(var i=0;i<20;i++){creatRandomBall(document.body);}/** div 是要让他成每个div都会镜面反弹* 这个函数的作用就是实现单个div的镜面反弹效果* */function move(div) {//div所需的最大left和最大top的值var maxleft = div.parentElement.offsetWidth - div.offsetWidth;console.log(div.parentElement.offsetWidth);var maxtop = div.parentElement.offsetHeight - div.offsetHeight;var directionX = 1;var directionY = 1;var speedX = randomNum(1,5);var speedY = randomNum(1,5);setTimeout(function step() {//设置移动的属性div.style.left = div.offsetLeft + speedX * directionX+"px";div.style.top = div.offsetTop + speedY * directionY+"px";console.log(div.style.left);//判断碰到两头边缘改变direction的值//这里div.offsetLeft <= 0要小于等于0，找了一个多小时，好心痛啊if(div.offsetLeft >= maxleft || div.offsetLeft <= 0){directionX *= -1;}if(div.offsetTop >= maxtop || div.offsetTop <= 0){directionY *= -1;}setTimeout(step,10);},0);}/** 创建一个元素，随机位置，随机颜色，随机宽高* 然后把他传给指定的父容器* */function creatRandomBall(parent) {var div = document.createElement("div");var wh = randomNum(5,120);div.style.width = wh+"px";div.style.height = wh+"px";div.style.left = randomNum(0,parent.offsetWidth - wh)+"px";div.style.top = randomNum(0,parent.offsetHeight - wh)+"px";div.style.backgroundColor = "rgba("+randomNum(0,255)+","+randomNum(0,255)+","+randomNum(0,255)+","+Math.random()+")";parent.appendChild(div);move(div);}/*随机函数最后是+n */function randomNum(n,m) {return parseInt(Math.random()*(m-n+1)+n);}
</script>
</body>
</html>

JavaScript实现狂欢舞动的小球相关推荐

【JavaScript】实现三个小球围着椭圆旋转的加载动画
好久没有写过原生JS了,突然没事做,写了一个跟着鼠标走的加载小动画,最终效果如下图: 这个效果实现起来非常简单,大概思路是:先用 CSS3 的 border-radius 属性将三个 div 的样式设 ...
JavaScript 是世界上最好的语言？
JavaScript 是世界上最好的语言可能对于不同的来说世界上最好的语言可能非常vary,但是对于我来说,JavaScript就是我心目中那个最好的语言,由最开始只是出于响应式编程的toy lan ...
魔性“合成大西瓜”背后，我用 350 行代码解开了碰撞之谜！
[CSDN 编者按]高中物理最烦的几个题:碰撞.守恒.弹性.摩擦--今天全赶一块了.以合成大西瓜为代表的小球碰撞类游戏好玩是好玩,就是有点费程序员.本文,我们将利用简单的 JavaScript 物理引 ...
canvas(五角星碰撞)
马上9月份要找工作了,琢磨着要做个作品作为面试时的加分项. 本来打算仿一个淘宝网,但写完淘宝首页竟花了我一个星期!!!光html.css就有4000多行,看着首页都能想象出来后台数据的庞大,估计半年都 ...
Windows Store App JavaScript 开发：小球运动示例
通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...
JavaScript学习（三十六）—移动的小球
JavaScript学习(三十六)-移动的小球代码如下: <!DOCTYPE html> <html lang="en"><head>< ...
javascript 小球碰撞反弹
最近在学习JS,写一个小球弹来弹去的游戏一.HTML部分 <!DOCTYPE html> <html> <head> <meta c ...
原生JavaScript实现五色小球
原生JavaScript实现五色小球一,HTML代码 <div id="ball"></div> <script src="undersc ...
JavaScript算法（实例六）输出日期 / 数组合并 / 小球下落--反弹运动
1.以 YYYY-MM-DD 的格式输出当前日期. var date = new Date(); var year = date.getFullYear(); //月份的返回值是从0开始的,所以获取时 ...

JavaScript实现狂欢舞动的小球

JavaScript实现狂欢舞动的小球相关推荐

最新文章

热门文章