<!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. ES6： let 与 const

    ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const. let 声明的变量只在 let 命令所在的代码块内有效. const 声明一个只读的常量,一旦声明 ...

  2. mycli初体验

    一.安装 pip install mycli 二.使用 mycli --help 三.特点 语法不全,高亮等

  3. Jenkins下构建UI自动化之初体验

    一.缘 起 笔者之前一直在Windows环境下编写UI自动化测试脚本,近日在看<京东系统质量保障技术实战>一书中,萌生出在jenkins下构建UI自动化测试的想法 二.思 路 首先,在Li ...

  4. Spring Cloud - Nacos注册中心入门单机模式及集群模式

    近几年微服务很火,Spring Cloud提供了为服务领域的一整套解决方案.其中Spring Cloud Alibaba是我们SpringCloud的一个子项目,是提供微服务开发的一站式解决方案. 包 ...

  5. Python基础 | 日期时间操作

    目录 获取时间 时间映射 格式转换 字符串转日期 日期转字符串 unixtime 时间计算 时间偏移 时间差 "日期时间数据"作为三大基础数据类型之一,在数据分析中会经常遇到. 本 ...

  6. postman使用简介

    postman进行Http类型的接口测试的功能测试(手工测试): 1.postman下载,解压,打开Chrome浏览器-->设置-->扩展程序-->勾选开发者模式-->加载已解 ...

  7. pc 媒体查询

    PC端 按屏幕宽度大小排序(主流的用橙色标明) 分辨率   比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3  | 10.4寸.12.1寸.14.1寸.15寸; ) ...

  8. angular 中嵌套 iframe 报错

    错误如下 Error: unsafe value used in a resource URL context at DomSanitizationServiceImpl.sanitize... 解决 ...

  9. 记一次Metasploit心脏出血漏洞攻击测试

    打开msf框架 msfconsole

  10. CMDB_Agent版本

    目录 CMDB_Agent版本 CMDB概念 CMDB_Agent介绍 agent方案 ssh类方案 相比较 架构目录 bin-start.py 启动文件 conf-config.py 自定义配置文件 ...