<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body {

            height: 1200px;

        }

    </style>

</head>

<body>

</body>

</html>

<script>

    // 面向对象的思想：

    //1、有哪些类：就只有一个弹力球类。

    //2、步骤

    // 定义类（弹力球类）：构造函数

    function Ball( size, left1, top1, color, step, directionLeft, directionTop, timeSpace) {

        // 属性:(把面向过程中的全局变量变成属性)

        this.dom = null;

        //球球的大小

        this.size = size;

        // 位置

        this.left1 = left1;

        this.top1 = top1;

        //颜色

        this.color = color;

        // 步长

        this.step = step;

        this.timeSpace = timeSpace;

        // 方向

        this.directionLeft = directionLeft;

        this.directionTop = directionTop;

        // 创建dom

        this.createDom = function(){

            this.dom = document.createElement("div");

            this.dom.style.cssText = `

                position: absolute;

                left: ${this.left1}px;

                top: ${this.top1}px;

                width: ${this.size}px;

                height: ${this.size}px;

                border-radius: 50%;

                background-color:${this.color};

            `;

            document.body.appendChild(this.dom);

        }

        // 球球开始谈

        this.go = function () {

            setInterval(() => {

                this.left1 = this.left1 + this.directionLeft * this.step;

                this.top1 = this.top1 + this.directionTop * this.step;

                // 边界判断

                // 1)、纵向

                let clientHeigth = document.documentElement.clientHeight || document.body.clientHeight;

                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

                if (this.top1 + this.size > clientHeigth + scrollTop) {

                    // 下边界

                    this.top1 = clientHeigth + scrollTop - this.size;

                    this.directionTop = -1;

                } else if (this.top1 < scrollTop) {

                    //上边界

                    this.top1 = scrollTop;

                    this.directionTop = 1;

                }

                //2)、横向

                let clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

                let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

                if (this.left1 + this.size > clientWidth + scrollLeft) {

                    // 右边界

                    this.left1 = clientWidth + scrollLeft - this.size;

                    this.directionLeft = -1;

                } else if (this.left1 < scrollLeft) {

                    //左边界

                    this.left1 = scrollLeft;

                    this.directionLeft = 1;

                }

                this.dom.style.left = this.left1 + "px";

                this.dom.style.top = this.top1 + "px";

            }, this.timeSpace);

        }

        this.createDom();

        this.go();

    }

    window.onload = function () {

        for(var i=0;i<200;i++){

            // 1、随机大小(10-100)

            let size = parseInt(Math.random()*91)+10;

            // 2、随机位置；(横向：10-1000，纵向：10-600)

            let left1 = parseInt(Math.random()*991)+10;

            let top1 = parseInt(Math.random()*591)+10;

            // 3、随机颜色

            let color = getColor();

            // 4、随机步长(1-10)

            let step = parseInt(Math.random()*11)+1;

            // 5、随机方向

            let directionLeft = parseInt(Math.random()*2)==0?-1:1;  //0和1

            let directionTop = parseInt(Math.random()*2)==0?-1:1;  //0和1

            // 6、随机时间间隔(5-100)

            let timeSpace = parseInt(Math.random()*96)+5;

            let b1 = new Ball( size, left1, top1, color, step, directionLeft, directionTop, timeSpace);

        }

    }

    function getColor(){

        var str = "#";

        for(var i=0;i<6;i++){

            str += parseInt(Math.random()*16).toString(16);

        }

        return str;

    }

</script>

原生js弹力球的更多相关文章

  1. js课程 6-15 js简单弹力球如何实现

    js课程 6-15 js简单弹力球如何实现 一.总结 一句话总结:a.通过document的documentElement属性获取可是区域的高: b.通过增值变为负的实现到底部后反弹 1.docume ...

  2. js版弹力球实例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>弹 ...

  3. JS实现弹性势能效果(弹力球效果[实现插件封装])

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  5. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  6. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  7. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  8. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  9. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

随机推荐

  1. TCP断开连接（四次挥手）

    四次挥手 ACK建立连接之后都为1. 1.A发送释放连接报文段,FIN=1. 2.B收到并回复确认,TCP进入半关闭状态,即此时B能向A发送,但是A无法向B发送数据. 3.当B传输完所有数据之后,发送 ...

  2. libfastcommon总结（〇）

    libfastcommon提供众多基础功能,该系列笔记将进行学习介绍. load_local_host_ip_addrs 进行加载主机上所有网卡的IPv4的地址. iniLoadFromFile 从文 ...

  3. ssh 公钥 下载选择的时候 下拉选择 ssh 然后 git clone

    ssh 公钥 下载选择的时候 下拉选择 ssh 然后 git clone

  4. 常用的API和基础算法

    和数学相关 1,java.lang.Math类 abs(x):求绝对值 sqrt(x):求平方根 pow(x,y):求x的y次方 ceil(x):向上取整 floor(x):向下取整 round(x) ...

  5. word2vec 和 glove 模型的区别

    2019-09-09 15:36:13 问题描述:word2vec 和 glove 这两个生成 word embedding 的算法有什么区别. 问题求解: GloVe (global vectors ...

  6. dirname,basename的用法与用途

    #dirname介绍 当对文件使用dirname时,返回文件的上级目录,输出是否是绝对路径取决于输入的文件名是绝对路径 如果对目录使用,则返回上级目录 basename命令与dirname相反,读取文 ...

  7. upload-labs通关集

    upload-labs通关集 环境 第一题 前端js检查 第二题 content-type类型绕过 第三题 黑名单绕过 第四题 .htaccess绕过 第五题 大小写绕过 第六题 空格绕过 第七题 点 ...

  8. Hive设置配置参数的方法，列举8个常用配置

    Hive设置配置参数的方法 Hive提供三种可以改变环境变量的方法,分别是: (1).修改${HIVE_HOME}/conf/hive-site.xml配置文件: (2).命令行参数: (3).在已经 ...

  9. CF 1012C Dp

    Welcome to Innopolis city. Throughout the whole year, Innopolis citizens suffer from everlasting cit ...

  10. [算法笔记] PAT-ADV-1020

    题目要求:给出二叉树的后序遍历序列和中序遍历序列,输出二叉树的层次遍历序列. (传送门) Sample Input 7 2 3 1 5 7 6 4 1 2 3 4 5 6 7 Sample Outpu ...