zoukankan      html  css  js  c++  java
  • 如何用面对对象来做一个躁动的小球?

      今天来看看怎样用面对对象来做一个躁动的小球。

      首先我们先创建一个对象,他的属性包含小球的随机水平、纵向坐标,随机宽、高,随机颜色,以及创建小球的方法。

    html:
    <div id="wrap"></div>

    js:

    function Boll(x,y,w,h,color){
    // 随机宽高 var wh = randFn(5, 40); // 随机颜色 var c = 'rgb('+randFn(0, 255)+',' + randFn(0,255)+','+randFn(0, 255)+')'; // 随机x坐标 水平位置 document.body.clientWidth 网页可见区域的宽 this.x = randFn(0, document.body.clientWidth - 20); // 随机y坐标 纵向位置 document.body.clientHeight 网页可见区域的高 this.y = randFn(0, document.body.clientHeight - 20); // 随机颜色 this.color = c; // 随机宽高 this.w = wh; this.h = wh; // 小球展示出来 this.show = function(){ //创建小球 var bolDiv = document.createElement("div"); bolDiv.style.background = this.color; bolDiv.style.left = this.x + "px"; bolDiv.style.top = this.y + "px"; bolDiv.style.width = this.w + "px"; bolDiv.style.height = this.h + "px"; // 把创建出来的小球插入到wrap里面 var wrap = document.getElementById("wrap"); wrap.appendChild(bolDiv); } }

    之后把小球添加在页面上,设定计时器来让小随机出现。

    js: 

    //添加小球到页面上 var fuc = function(){ // 创建小球对象 var bol = new Boll(); //设置小球相关数据 位置 宽高 并添加 bol.show() } //间隔性计时器 每隔一秒执行一次fuc函数 即创建小球对像并添加到页面上 window.setInterval(fuc,1000)

    创建小球还是少不了style:

    *{
                margin: 0px;
                padding: 0px;
            }
            html,body{
                 100%;
                height: 100%;
    
            }
            #wrap{
                 100%;
                height: 100%;
                background: black;
                position: relative;
            }
            #wrap div{
                position: absolute;
                border-radius: 50%;
            }

     

  • 相关阅读:
    http协议相关知识
    linux 常用命令总结
    PHP traits
    php 正则案例
    php 中关于正则 元字符
    【U3D】 第三人称控制器ThirdPersonCharacter添加之后角色原地打转不移动的问题(unity5.3.5f)
    .Net Core异步async/await探索
    IdentityServer4实现单点登录统一认证
    CSAPP-Tiny Web服务器【2】源码解析
    CSAPP-Tiny Web服务器【1】编译搭建
  • 原文地址:https://www.cnblogs.com/yhyanjin/p/7050470.html
Copyright © 2011-2022 走看看