<!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. Androidstudio实现一个简易的加法器——分享两种方法实现（日常作业练习）

    Androidstudio实现一个简易的加法器——分享两种方法实现(日常作业练习)                                                           ...

  2. c++ 中的单例类模板的实现方法

    1.什么是单例模式 在架构设计时,某些类在整个系统生命周期中最多只能有一个对象存在 ( Single Instance ).如超市收银系统,其外观主要由显示器(1个).扫描枪(1个).收款箱(1个)组 ...

  3. ggplot2（8） 精雕细琢

    8.1 主题 主题系统控制着图形中的非数据元素外观,它不会影响几何对象和标度等数据元素.这题不能改变图形的感官性质,但它可以使图形变得更具美感,满足整体一致性的要求.主题的控制包括标题.坐标轴标签.图 ...

  4. kafka集群搭建及结合springboot使用

    1.场景描述 因kafka以前用的不多,只往topic中写入和读取过数据,这次刚好又要用到,记录下kafka集群搭建及结合springboot使用. 2. 解决方案 2.1 简单介绍 (一)关于kaf ...

  5. Spark入门（二）--如何用Idea运行我们的Spark项目

    用Idea搭建我们的Spark环境 用IDEA搭建我们的环境有很多好处,其中最大的好处,就是我们甚至可以在工程当中直接运行.调试我们的代码,在控制台输出我们的结果.或者可以逐行跟踪代码,了解spark ...

  6. iviewadmin url 加入 Router base #viewDesignAdmin

    router/index.js const router = new Router({   routes,   base: '/viewDesignAdmin/',   mode: 'history' ...

  7. Code Index: 基于Lucene.Net的代码检索工具

    目录 用途 Github地址 示例 特性 用途 维护一个拥有巨大代码量的项目, 依靠自带的代码搜索工具搜索速度缓慢, 一个快速的代码检索工具就显得极为必要, 所以自己撸了个小工具. Github地址 ...

  8. 作为一位Vue工程师，这些开发技巧你都会吗？

    路由参数解耦 一般在组件内使用路由参数,大多数人会这样做: export default { methods: { getParamsId() { return this.$route.params. ...

  9. JSP（一）----入门学习

    ##  JSP 1.概念: *  Java  Server  Pages:java服务端页面 *  可以理解为:一个特殊的页面,其中既可以直接定义html标签,又可以定义java代码 2.原理 *  ...

  10. python爬取中国大学排名

    教程来自:[Python网络爬虫与信息提取].MOOC. 北京理工大学 目标:爬取最好大学网前50名大学 代码如下: import requests from bs4 import Beautiful ...