1.  <!doctype html>
  2.  
  3.  <html lang="en">
  4.  
  5.  <head>
  6.  
  7.      <meta charset="UTF-8">
  8.  
  9.      <title>Document</title>
  10.  
  11.      <style type="text/css">
  12.  
  13.      *{
  14.  
  15.          margin: 0px;
  16.  
  17.          padding: 0px;
  18.  
  19.      }
  20.  
  21.      html,body{
  22.  
  23.          height: 100%;
  24.  
  25.          width: 100%;
  26.  
  27.          overflow: hidden; /*隐藏滚动条，消除小球碰到滚动条出现的窗口闪动*/
  28.  
  29.      }
  30.  
  31.      .content{
  32.  
  33.          width: 100%;
  34.  
  35.          height: 100%;
  36.  
  37.          position: relative;
  38.  
  39.          background: black;
  40.  
  41.      }
  42.  
  43.      .ball{
  44.  
  45.          position: absolute;
  46.  
  47.          border-radius: 50%;
  48.  
  49.      }
  50.  
  51.      </style>
  52.  
  53.  </head>
  54.  
  55.  <body>
  56.  
  57.      <div class="content" id="con"></div>
  58.  
  59.      <script type="text/javascript">
  60.  
  61.      //定义随机函数
  62.  
  63.      function RandomNum(num1,num2){
  64.  
  65.          return Math.floor(Math.random()*(num2-num1+1)+num1);
  66.  
  67.      }
  68.  
  69.      //构造小球函数
  70.  
  71.      function Ball(){
  72.  
  73.          this.ball=document.createElement("div");
  74.  
  75.          var randomNum=RandomNum(20,50);
  76.  
  77.          this.width=randomNum
  78.  
  79.          this.height=randomNum
  80.  
  81.          //如果元素有id名，我们可以直接使用，不用document.get....获取
  82.  
  83.          this.left=RandomNum(0,con.offsetWidth-randomNum);
  84.  
  85.          this.top=RandomNum(0,con.offsetHeight-randomNum);
  86.  
  87.          this.backgroundColor="rgba("+RandomNum(0,255)+","+RandomNum(0,255)+","+RandomNum(0,255)+","+Math.random()+")";//随机颜色
  88.  
  89.          this.tempX=this.left;
  90.  
  91.          this.tempY=this.top;
  92.  
  93.          this.speedx=RandomNum(10,20)-15.5;//后面的小数是保证随机产生的方向有正有负
  94.  
  95.          this.speedy=RandomNum(10,20)-15.5;
  96.  
  97.      }
  98.  
  99.      //画小球的方法
  100.  
  101.      Ball.prototype.draw=function(){
  102.  
  103.          this.ball.style.width=this.width+"px";
  104.  
  105.          this.ball.style.height=this.height+"px";
  106.  
  107.          this.ball.className="ball";
  108.  
  109.          this.ball.style.left=this.tempX+"px";
  110.  
  111.          this.ball.style.top=this.tempY+"px";
  112.  
  113.          this.ball.style.backgroundColor=this.backgroundColor;
  114.  
  115.          con.appendChild(this.ball);
  116.  
  117.      }
  118.  
  119.      //运动函数
  120.  
  121.      Ball.prototype.move=function(){
  122.  
  123.          this.tempX=this.tempX+this.speedx;    
  124.  
  125.          this.tempY=this.tempY+this.speedy;
  126.  
  127.       // 判断临界值
  128.  
  129.          if(this.tempX+this.width>=document.body.clientWidth||this.tempX<=0){
  130.  
  131.              this.speedx = -this.speedx;//改变方向
  132.  
  133.          }
  134.  
  135.          if(this.tempY+this.height>=document.body.clientHeight||this.tempY<=0) {
  136.  
  137.              this.speedy = -this.speedy;
  138.  
  139.          }
  140.  
  141.           this.draw();
  142.  
  143.      }
  144.  
  145.      //产生小球
  146.  
  147.      var balls=[];
  148.  
  149.      for(var i=0;i<100;i++){
  150.  
  151.          var ball=new Ball();
  152.  
  153.          balls.push(ball);//生成的小球对象放进数组
  154.  
  155.      }
  156.  
  157.      function start(){
  158.  
  159.           for(var i = 0;i < balls.length;i++) { 
  160.  
  161.            balls[i].move();
  162.  
  163.       } 
  164.  
  165.      }
  166.  
  167.      window.onload=function(){
  168.  
  169.          setInterval(start,10);//设置定时器
  170.  
  171.      }
  172.  
  173.      </script>
  174.  
  175.  </body>
  176.  
  177.  </html>

js五彩小球的更多相关文章

  1. js实现小球的弹性碰撞。

      前  言 MYBG 小编最近在做自己的个人网站,其中就用到了一个小球碰撞检测的功能,想自己写,无奈本人能力不足啊(毕竟还是一个菜鸟)!!就想着找个插件用一下也好,可是找了好久也没有找到一个比较好用 ...

  2. js实现小球碰撞游戏

    效果图:  效果图消失只是截的gif图的问题 源码: <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. js中小球碰壁反弹

    一. 在指定容器内的碰壁反弹 <!DOCTYPE HTML> <html> <head> <title></title> <meta ...

  4. Canvas+Js制作动量守恒的小球碰撞

    目的:通过js实现小球碰撞并实现动量守恒 canvas我们就不多说了,有用着呢. 我们可以通过canvas画2D图形(圆.方块.三角形等等)3D图形(球体.正方体等待). 当然这只是基础的皮毛而已,c ...

  5. 撩课-Web架构师养成系列第一篇

    前言 Web架构师养成系列共15篇,每周更新一篇,主要分享.探讨目前大前端领域(前端.后端.移动端)企业中正在用的各种成熟的.新的技术.部分文章也会分析一些框架的底层实现,让我们做到知其然知其所以然. ...

  6. Unity3D 5.x 简单实例 - 脚本编写

    1,Vector3 类型变量存储向量坐标值 Vector3.forward Vector3(0,0,1) Vector3.up Vector3(0,1,0) Vector3.right Vector3 ...

  7. [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  8. js实现多个小球碰撞

    实现思路:小球的移动,是通过改变小球的left和top值来改变,坐标分别为(x,y)当x/y值加到最大,即加到父级的宽度或者高度时,使x值或者y值减小,同理当x值或者y值减到最小时,同样的使x值或者y ...

  9. 原生js小球运动

    //html代码 <input type="button" value="小球运动" /> <div></div> //js ...

随机推荐

  1. 第六章、forms组件

    目录 第六章.forms组件 一.注册功能手写 二.forms组件完整写法 基本使用 三.forms组件前端渲染标签组件 三.forms组件其他知识点 在python console测试 校验数据 f ...

  2. 【异常】 Ensure that config phoenix.schema.isNamespaceMappingEnabled is consistent on client and server.

    1 详细异常 ror: ERROR 726 (43M10): Inconsistent namespace mapping properties. Ensure that config phoenix ...

  3. svn中日志不展示解决方法记录

    一,问题:点击svn查看日志时不显示.筛选时间显示为1970 1,猜想可能没有查看日志权限 2,查看linux 下svn版本库 confg 下三个配制文件 authz ,passwd ,svnserv ...

  4. 「SNOI2019」通信 分治建图

    根据题意 每个点可以直接与S,T相连 也可以和前面的哨站相连 暴力建边的话 有n2条边 要用分治优化建边: 类似于归并排序 先对每一层分为左半边与右半边 对每一半都拿出来先排序去重后 直接排成一条链建 ...

  5. Hdu 6598 Harmonious Army 最小割

    N个人 每个人可以是战士/法师  M个组合 每个组合两个人 同是战士+a 同是法师+c 否则+b 对于每一个u,v,a,b,c 建(S,u,a) (u,v,a+c-2*b) (v,T,c) (S,v, ...

  6. JavaScript教程——this 关键字

    简单说,this就是属性或方法“当前”所在的对象. 原文地址:https://wangdoc.com/javascript/oop/this.html

  7. [转载]pytest学习笔记

    pytest学习笔记(三)   接着上一篇的内容,这里主要讲下参数化,pytest很好的支持了测试函数中变量的参数化 一.pytest的参数化 1.通过命令行来实现参数化 文档中给了一个简单的例子, ...

  8. 二叉堆的介绍和Java实现

    一.堆和二叉堆 堆,英文名称Heap,所谓二叉堆(也有直接称二叉堆为堆的),本质上是一个完全二叉树,前面也提到过,如果树接近于完全二叉树或者满二叉树,采用顺序存储代价会小一点,因此常见的二叉堆均是顺序 ...

  9. Java生成压缩文件（zip、rar 格式）

    jar坐标: <dependency> <groupId>org.apache.ant</groupId> <artifactId>ant</ar ...

  10. crypot.js 生成hash256, 在IE下的卡顿问题。

    项目需求: 上传大文件,调用crypto.js生成hash256码. 直接上传大文件,IE会直接崩溃. 于是利用file.slice分片检测.但是浏览器会出现卡顿问题.开始以为是内存泄漏.但看服务器进 ...