zoukankan      html  css  js  c++  java
  • js 碰碰球

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    }

    #box {
    700px;
    height: 500px;
    border: 2px solid black;
    position: relative;
    top: 100px;
    left: 200px;
    }

    .qq {
    position: absolute;
    30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    background:red;
    background-size: 30px 30px;
    }
    </style>
    </head>

    <body style="background: url(img/timg.jpg)no-repeat;background-size:100% 700px ; ">
    <div id="box">

    </div>

    <script type="text/javascript">

    function Arr(left, top) {

    this.box = document.getElementById("box")
    this.qiu = document.createElement("p");
    this.box.appendChild(this.qiu);
    this.qiu.className = "qq"
    this.lol = 30
    this.left = left || Math.random() * (box.clientWidth - this.lol);
    this.top = top || Math.random() * (box.clientHeight - this.lol);
    this.qiu.style.left = this.left + "px"
    this.qiu.style.top = this.top + "px"
    this.oX = parseInt(Math.random() * 1+5) ;
    this.oY = parseInt(Math.random() * 1+4) ;

    this.tex()
    }
    Arr.prototype.tex = function() {

    var sty = this
    var jishi = setInterval(function() {

    sty.left += sty.oX
    sty.top += sty.oY
    sty.qiu.style.left = sty.left + "px"
    sty.qiu.style.top = sty.top + "px"
    if(sty.left >= box.clientWidth - sty.lol || sty.left <= 0)
    { sty.oX = -sty.oX }

    if(sty.top >= box.clientHeight - sty.lol || sty.top <= 0) { sty.oY = -sty.oY}
    }, 10)
    console.log(sty.left)

    }

    for (var i = 0; i <5; i++) {
    new Arr()
    }


    </script>

    </body>

    </html>

  • 相关阅读:
    sqlserver判断是否为数字的函数
    vs2013 旗舰版 密钥
    HttpWebRequest类与HttpRequest类的区别
    C#中HttpWebRequest的用法详解
    SQL Server查询优化方法(查询速度慢的原因很多,常见如下几种)
    随机数Random
    PadLeft 补零
    delphi Firemonkey ListBoxItem自绘
    windows自带杀毒防火墙
    IIS 更新EXE文件
  • 原文地址:https://www.cnblogs.com/wzh1995/p/6782327.html
Copyright © 2011-2022 走看看