<div>
    </div>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
---------------
 <script>
        let setDiv = document.querySelector("div");
        let divWidth = 100,
            divHeight = 100,
            divLeft = 0,
            divTop = 0;
        let vx = 6;
        let vy = 6;
        let timer = setInterval(() => {
            divLeft += vx;
            divTop += vy;
            setDiv.style.left = divLeft + "px";
            setDiv.style.top=divTop+"px";
            if (divLeft + divWidth >= innerWidth || divLeft <= 0) {
                vx = -vx;
            }
            if (divTop + divHeight >= innerHeight || divTop <= 0) {
                vy = -vy;
            }
        }, 25)
    </script>

javascript, 元素 页面 简单碰撞的更多相关文章

  1. 使用javaScript操作页面元素

    from selenium import webdriver import time import unittest from selenium.common.exceptions import We ...

  2. 用javaScript获取页面元素值

    用JavaScript获取页面元素常见的三种方法:                                                           getElementById() ...

  3. webdriver定位页面元素时使用set_page_load_time()和JavaScript停止页面加载

    webdriver定位页面元素时使用set_page_load_time()和JavaScript停止页面加载 原文:https://my.oschina.net/u/2344787/blog/400 ...

  4. JavaScript获取页面元素的常用方法

    1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...

  5. JavaScript学习笔记(一):介绍JavaScript的一些简单知识

    JavaScript是世界上最流行的编程语言.这门语言可用于HTML和web,更可广泛用于服务器.PC.笔记本电脑和智能手机等设备.---------------------------------- ...

  6. Javascript刷新页面大全

    非模态刷新父页面:window.opener.location.reload(); 模态刷新父页面:window.dialogArguments.location.reload(); 先来看一个简单的 ...

  7. 利用JavaScript将页面截图生成图片传给后台的插件:html2canvas

    利用JavaScript将页面截图生成图片传给后台的插件:html2canvas 一.总结 一句话总结: 10 <script type="text/javascript"& ...

  8. JavaScript在页面中的执行顺序(理解声明式函数与赋值式函数) 转载

    JavaScript在页面中的执行顺序 https://blog.csdn.net/superhoy/article/details/52946277 2016年10月27日 15:38:52 阅读数 ...

  9. 开源的javascript实现页面打印功能,兼容所有的浏览器(情况属实)

    这篇文章完全是属于技术文章,也是记录一下自己在项目当中遇到的坑爹问题啊,因为是B/S的程序,所以打印功能还是必须要有的,对于打印我选择了一个js插件,发现非常的简单和方便,所以这里拿出来和大家分享一下 ...

随机推荐

  1. Cannot capture jmeter traffic in fiddler

    Cannot capture jmeter traffic in fiddler First, change Fiddler's port back to 8888 as it was origina ...

  2. 【深入学习linux】系统分区与格式化

    分区:把大硬盘分为小的逻辑分区 格式化:写入文件系统 分区设备文件名:给每个分区定义设备文件名 挂载:给每个分区分配挂载点 分区->格式化->取名->分配挂载点(WINDOW下的盘弧 ...

  3. ABS函数 去掉金额字段值为负数问题

    )) from OrderDetail

  4. 备忘-VSCODE、apache配置

    一个像素点的光标:https://files.cnblogs.com/files/zjfree/mouse.zip VSCODE配置备忘: { "editor.fontLigatures&q ...

  5. curl 转 wget

    curl 转 wget // sed -e 's@-H @--header=@g;s@^curl @wget @g;s@--compressed$@@g' $crf var curlStr = `cu ...

  6. vue 里 this.$parent 作用

    this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法,methods里的方法 }!

  7. 映美FP-530K+打印发票的各种经验

    本人虽然写了很多lodop博文,但是程序开发一般都是用虚拟打印机测试,实际打印机打印中还可能存在各种问题,毕竟理论都不如实践能获得更多的打印经验.当个人使用过的打印机不多,只有映美FP-530K+,用 ...

  8. [LeetCode] 354. Russian Doll Envelopes 俄罗斯套娃信封

    You have a number of envelopes with widths and heights given as a pair of integers (w, h). One envel ...

  9. Jenkenis报错:该jenkins实例似乎已离线

    使用运行war的形式安装jenkins,因为伟大的墙出现,“该jenkins实例似乎已离线” 问题 解决方法: 1. 保留此离线页面,重新开启一个浏览器tab标签页 2.输入输入网址http://lo ...

  10. Docker学习-安装,配置,运行

    Docker继续学习 2019年12月15日23:15:36 第二次学习docker Docker三个重要概念: 镜像 就是一个模板(类似一个Java类) 容器 容器是用镜像创建的运行实例. 仓库 仓 ...