精华内容
下载资源
问答
  • 监听屏幕大小变化

    2020-10-14 16:37:30
    首先要明确一点就是再做响应式布局的时候,原理基本上都是通过rem来实现的。 // 监听手机窗口变化,重新设置 window.addEventListener('resize', ...//原理:通过addEventListener()监听屏幕大小的变化动态的更改f.

    首先要明确一点就是再做响应式布局的时候,原理基本上都是通过rem来实现的。

    // 监听手机窗口变化,重新设置
    window.addEventListener('resize', init)
    //定义函数
    function init() {
    	document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'
    }
    //原理:通过addEventListener()监听屏幕大小的变化动态的更改font-size的值。
    

    监听手机旋转的时机

    // 监听手机旋转的事件的时机
    window.addEventListener('orientationchange', init)
    function init() {
    	document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'
    }
    
    展开全文
  • 当需要对窗口大小变化做监听时,可以使用onresize函数。Resize Observer API 提供了一种高性能方法可以监视元素的大小更改。 原理: 使用 ResizeObserver()构造函数创建一个新对象,然后使用 ResizeObserver....

    当需要对窗口大小变化做监听时,可以使用onresize函数。Resize Observer API 提供了一种高性能方法可以监视元素的大小更改。

    原理:

    使用 ResizeObserver()构造函数创建一个新对象,然后使用 ResizeObserver.observe()来监听dom对象,每dom对象的大小发生改变时,构造函数中设置的回调函数便会运行。

    • resizeObserver.observe(): 监听一个dom元素
    • resizeObserver.unobserve(): 注销掉监听的dom元素

    安装:

    npm i resize-observer-polyfill --save-dev

    示例

    实现当元素的高度发生改变的时候,实时展示现在的高度。

    (1)封装 resizeObserver 方法
    resizeObserver.js
    import ResizePolyfill from 'resize-observer-polyfill';
    
    export default () => {
      if (window.resizeObserver) {
        return window.resizeObserver
      }
      let observer = window.resizeObserver;
      if (!observer) {
        observer = ResizePolyfill
      }
      
      return new observer(entities => {
        if (entities && entities.length) {
          entities.forEach(entity => {
            //contentRect:位置大小信息
            //target:dom信息
            const { contentRect, target } = entity;
            const { handleResize } = target;
            if (handleResize) {
              handleResize(contentRect, target)//目标对象发生改变之后的逻辑操作
            }
          })
        }
      })
    }
    
    (1)组件渲染
    index.js
    import React from 'react';
    import resizeObserver from './resizeObserver';
    
    class Index extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          height: ''
        }
        this.onRef = null
        this.resizeObserver = resizeObserver()
      }
      componentDidMount() {
        //dom对象发生变化后的操作逻辑赋值给dom对象
        this.onRef.handleResize = this.handleResize
        //观察的对象
        this.resizeObserver.observe(this.onRef)
      }
    
      handleResize = (contentRect, ele) => {
        this.setState({
          height: ele.offsetHeight
        })
      }
    
      componentWillUnmount() {
        this.resizeObserver.unobserve(this.onRef);
      }
    
      render() {
        //组件安装时,使用dom元素调用ref回调,挂载到dom元素上时表示具体的dom元素节点
        return (
          <div id='resizeObserver' ref={ref => this.onRef = ref}>
            {this.state.height || '-'}
          </div>
        )
      }
    }
    export default Index;
    
    展开全文
  • MutationObserver接口提供了监视对DOM树所做更改的能力,通俗点来说就是用来监视 DOM 变动,比如增加删除, 浏览器窗口大小改变导致挤压DOM,属性的变动(width,height,src,style)、文本内容的变动等等。...

    MutationObserver接口提供了监视对DOM树所做更改的能力,通俗点来说就是用来监视 DOM 变动,比如增加删除, 浏览器窗口大小改变导致挤压DOM,属性的变动(width,height,src,style)文本内容的变动等等。

    这里我只用来监听iframe的url变化,来进行操作

    代码:

        var target = document.getElementById("mainFrame"); // 目标节点iframe
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
        // 创建一个观察器实例
        var observer = new MutationObserver(items => {
            items.forEach(item =>{
                console.log(item)
                iframeChange(item.oldValue, item.target.src, item.target)
            })
        })
        // 观察器的配置
        var options = {
            childList: false,// 子节点的变动(指新增,删除或者更改) Boolean
            attributes: true, // 属性的变动      Boolean
            subtree: false, //表示是否将该观察器应用于该节点的所有后代节点      Boolean
            attributeOldValue: true, // 表示观察attributes变动时,是否需要记录变动前的属性 Boolean  
            characterData: false, // 节点内容或节点文本的变动 Boolean
            attributeFilter: ["src"] // 表示需要观察的特定属性 Array,如['class','src', 'style']
        }
        // 开始观察目标节点
        observer.observe(target, options);
        function iframeChange(oldValue, newValue, iframeData){
            //console.log("旧地址:"+oldValue)
            //console.log("新地址:"+newValue)
            if(newValue == oldValye){
                window.location.href = ......
                // or othorCode ....
            }
        }

    打印 item;

    有兴趣的小伙伴试试看吧~

    展开全文
  • 项目名称:坦克大战游戏(说明文档) 项目描述:仿马士兵老师的单机版简单的坦克大战游戏,能够实现敌我双方互相攻击,实现坦克击毙后爆炸的效果,...产生一个合适的窗口,并设置其为不可更改框架大小,添加关闭窗口

    项目名称:坦克大战游戏(说明文档)


    项目描述:仿马士兵老师的单机版简单的坦克大战游戏,能够实现敌我双方互相攻击,实现坦克击毙后爆炸的效果,坦克能够从任意方向行驶和发射炮弹,增加障碍,能阻碍坦克的行走

    项目所使用的一些技术:GUI,事件监听,多线程,简单理解一些设计模式和反射机制,重要的是理解面向对象的思想

    项目过程
    1.建立游戏界面
    产生一个合适的窗口,并设置其为不可更改框架大小,添加关闭窗口事件,关闭窗口。

    2.画出一辆坦克
    用圆来模拟一辆坦克。

    3.让坦克动起来
    启动一个线程来不断重画坦克让坦克动起来,当窗口显示时线程开始运行。

    4.消除坦克移动时的闪烁
    调用update方法
    创建一副和窗口大小的背景虚拟图片,把原先坦克完整的画到此图片上然后再在窗口显示出此图片

    5.控制坦克行走
    响应键盘事件,按下相应键后完成移动。

    6.坦克朝八个方向行走
    利用枚举类型定义八个方向,定义四个方向的布尔值
    默认坦克初始方向为静止
    根据按键响应来确定按的哪些方向写一个移动的方法并在画坦克后调用
    如果按键抬起后方向布尔值为false

    7.添加子弹类
    增加一个子弹类,添加一个构造方法,画出该子弹,添加子弹移动方向根据坦克移动的方向而移动,在坦克类中有一打子弹方法根据坦克中心位置打出子弹
    响应CONTROL键在此键上调用打子弹方法。

    8.解决子弹在坦克停下后打不出问题
    根据炮筒的方向来打出子弹
    在坦克类中定义一个炮筒变量,在DRAW方法中画出,但坦克移动时如果方向不是停止就把方向改为炮筒方向,构造子弹类时传递炮筒方向。

    9.打出多发炮弹
    添加一个子弹类型的容器。
    在画的时候拿到每一个子弹,画出在坦克打出子弹的方法中添加每一颗子弹
    如果子弹移动到游戏窗口外就认为其死亡在子弹类移动方法中判断是否出界
    如果出界则画了子弹方法中判断子弹是否死亡,若死了就不画了。

    10.画一辆敌人坦克
    增加一个区分敌我的坦克量Good,增加相应的方法设置好坏,如果是坏坦克就画为蓝色的,否则为红色的,修改构造方法在类中NEW出敌人坦克

    11.将敌人坦克击毙
    在子弹类中加入一个打坦克的方法参数传递坦克类型
    分别在子弹与坦克类中添加碰撞检测方法
    在击中坦克方法中判断是否碰撞如果碰撞,子弹消失,敌人坦克死亡(不重画)。

    12.添加爆炸类
    定义一个爆炸生死变量,默认为true.
    用不同直径的圆模拟爆炸,在画爆炸时判断是否活着,如果没活就移除它,如果活着就按不同的直径的圆画它。
    通过容器装入爆炸,在打坦克后添加每一个爆炸,调用爆炸类构造类函数

    13.添加多辆坦克
    用容器装敌人坦克,在窗口方法中添加多辆坦克。
    打击多辆坦克,加入一个打击一个容器的坦克方法,在调用相应方法

    14.智能的敌人坦克
    敌人坦克动起来,在坦克类构造函数中添加方向,NEW TANK时设定某一个方向,敌人坦克随即懂起来,需要加一个RANDOM类,在坦克移动方法中判断是不是好坦克不是则拿到方向,随即步骤移动
    敌军坦克发射炮弹,本军炮弹不打本军坦克,子弹类中添加一个子弹好坏的变量,如果子弹和坦克不同则可打击对方,如果子弹死了不画了

    15.坦克出界问题
    坦克移动方法中判断坦克位置是否小于或大于窗口大小,做出相应的解决。

    16.在窗口中添加两堵墙
    添加一个墙类,定义构造方法,画出两堵墙在主类中NEW出两堵墙来
    子弹不能穿过墙
    在墙这个类中增加一个碰撞检测方法在子弹类中增加一个子弹碰撞检测方法,判断是否撞上,如果撞上了子弹死去。
    坦克不能穿过墙
    在坦克类中定义一个坦克移动前一步的变量记录坦克撞到墙后的前一步,判断是否撞到,若撞到则返回到前一步

    17.坦克互相穿越问题
    坦克类中增加撞击坦克方法
    判断两辆坦克是否相等,如果不等判断是不是活着,并且撞击到,如果撞到则调用返回前一步的方法

    18.添加一个超级炮弹
    子弹朝八个方向发射,CTRL键发射
    在子弹类中添加一个发射炮弹的方法有一个方向参数,加入一个发射多发炮弹的方法,拿到八个方向的素质将这些数值转换为数组传递到相应方法中,处理按键A调用发射超级炮弹的方法。

    19.增加生命值
    增加一个坦克生命值初始为100.
    如果子弹打中坦克如果是好坦克生命值减去20
    如果生命值小于等于0了,坦克就死了,如果是坏坦克打中就死。
    血条表示生命值
    在坦克类中增加一个血条内部类
    在类中加入画血条的方法,画坦克时调用。

    20.敌人与我军他那颗时候解决的问题
    敌人死了重新加入
    在画坦克时判断是否没有坦克了,若没就增加。
    我军时候按F2开始
    增加对F2按键处理,如果死了设置为TRUE并且设置生命值为满

    21.图形化此游戏。
    加入爆炸图片
    将爆炸图片代替圆,添加一个TOOLKIT类拿到系统工具
    用一个图像数组装图,画的时候画出图。
    加入坦克图片
    将坦克图片代替圆,用MAP容器装
    坦克的方向按着坦克的图片来画
    加入子弹图片
    方法与加入坦克图片相似。

    展开全文
  • 动态工作空间网格(根据您拥有的工作空间数量来更改大小) 多显示器支持 垂直显示器支持 紧凑的视图,可更好地利用屏幕空间 将聚焦的窗口拖动到新的或不同的工作空间 一键式在任何监视器上创建一个新的工作区 错误
  • 更改名称、上传文件、下载文件、远程执行、本地执行 拖拽本地文件到远程、拖拽远程文件到本地 执行命令内包含以下功能: 远程执行CMD所有命令,并且实时显示执行过程与结果! 屏幕监控内包含以下功能: 高速屏幕...
  • 折叠:折叠或收缩菜单,并且监听窗口大小变化,在拉伸窗口时自动折叠或收缩菜单,自动响应式 搜索:智能索引,快捷搜索打开某个菜单 切换:集成swiper动画,滑动、淡入、方块、3D流、3D翻转,五种高大上切换动画,任...
  • l.addKeyListener(new KeyListener() {// 为标签添加键盘事件监听 @Override public void keyTyped(KeyEvent e) { // TODO Auto-generated method stub } @Override public void keyReleased...
  • l.addKeyListener(new KeyListener() {// 为标签添加键盘事件监听 @Override public void keyTyped(KeyEvent e) { // TODO Auto-generated method stub } @Override public void keyReleased(KeyEvent e) {...
  • │ │ │ └─调整大小 │ │ └─色彩 │ │ ├─亮度 │ │ ├─保留通道 │ │ ├─反色 │ │ ├─投影效果 │ │ ├─模糊 │ │ ├─灰度 │ │ ├─色彩通道 │ │ │ ├─粉 │ │ │ ├─红 │...
  • 关于,斯坦尼斯拉夫(https://github.com/bfday)更改日志:2.0.8:对文本的小修正2.0.7:弹出窗口重新格式化+文本修改。代码的小改进。小错误修正2.0.6:日期标记的标题改进,现在它显示格式和日期和格式变化的建议...
  • 超实用的jQuery代码段

    2019-03-04 10:20:41
    1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 ...
  • flex 4实战

    2014-11-20 11:02:23
    14.2.5 更改组件的父组件 302 14.2.6 状态事件 304 14.3 综合运用 306 14.4 小结 307 第15章 使用数据服务 309 15.1 访问服务器端数据 309 15.1.1 使用httpservice对象 310 15.1.2 通过webservice组件使用web服务 ...
  •  ✓支持3种不同的图标大小(16,32和64px)  ✓支持您自己的域名的Google Apps:trade_mark:特定网址  ✓添加您自己的自定义URL按钮,如链接到Facebook  ✓更改服务的URL  ✓更改服务的名称  ✓整合GMail这个!...
  • 疯狂Android讲义源代码

    2016-11-08 21:23:53
    3.4.2 重写onConfigurationChanged响应系统设置更改 3.5 Handler消息传递机制 3.5.1 Handler类简介 3.5.2 Handler、Loop、MessageQueue的工作原理 3.6 异步任务(AsyncTask) 3.7 本章小结 第4章 深入理解Activity与...
  • Visual C++编程技巧精选500例.pdf

    热门讨论 2012-09-01 15:01:50
    213 如何检测文件是否已经发生更改? 214 如何判断文件在磁盘上是否存在? 215 如何读写INI文件? 216 如何创建一个临时文件? 217 如何创建一个特大型文件? 218 如何创建一个文本文件? 219 如何删除一个文本文件? 220 ...
  • JASChatWeb 网页聊天室 1.0版--群聊+... ServetLogout.java -- 两个监听器,一个负责监听用户session超时,另一个用于服务器关闭时清除用户登陆状态 -----------------------------------------------------------------
  • Bug修正: ·修正暂停监控时调整窗口大小,显示图像错乱的Bug 2. 功能添加: ·添加设定背景色属性background.color 3. 核心调整: ·去掉canvas,直接将采样图片放于container上,便于以后...
  • 白金远控2009年可用版

    2013-01-02 22:34:25
    语音监听 监听远程语音,也可把本地语音传送给远程,进行语音聊天,GSM610压缩方式,传输流畅; 支持多声卡,可选择麦克风或系统声音,可调节源音量,可保存为wave文件。 会话管理 注销,重启,关机,卸载服务端 其它...
  • ·修正暂停监控时调整窗口大小,显示图像错乱的Bug 2. 功能添加: ·添加设定背景色属性background.color 3. 核心调整: ·去掉canvas,直接将采样图片放于container上,便于以后进一步在...
  • vc++ 应用源码包_1

    2012-09-15 14:22:12
    然后获取文件头,得到文件大小,然后再下载。重点函数是ThreadDownLoad。下载完之后用FileCombine合并文件。Mydownload.cpp底端的fnMyDownload函数是下载器的关键函数。 点对点多线程断点续传软件《传圣》源代码 ...
  • vc++ 应用源码包_5

    2012-09-15 14:45:16
    然后获取文件头,得到文件大小,然后再下载。重点函数是ThreadDownLoad。下载完之后用FileCombine合并文件。Mydownload.cpp底端的fnMyDownload函数是下载器的关键函数。 点对点多线程断点续传软件《传圣》源代码 ...
  • vc++ 应用源码包_4

    2012-09-15 14:38:35
    然后获取文件头,得到文件大小,然后再下载。重点函数是ThreadDownLoad。下载完之后用FileCombine合并文件。Mydownload.cpp底端的fnMyDownload函数是下载器的关键函数。 点对点多线程断点续传软件《传圣》源代码 ...
  • vc++ 应用源码包_3

    2012-09-15 14:33:15
    然后获取文件头,得到文件大小,然后再下载。重点函数是ThreadDownLoad。下载完之后用FileCombine合并文件。Mydownload.cpp底端的fnMyDownload函数是下载器的关键函数。 点对点多线程断点续传软件《传圣》源代码 ...
  • vc++ 开发实例源码包

    2014-12-16 11:25:17
    1.初始状态只监听连接,不捕获IP数据 2.鼠标右击列表选择或取消监控某端口数据 3.为防止ping攻击,一般情况ping数据全部监控 4.监控某端口数据时,不监控ping包 5.数据超过20k将被清空 6.右边窗口停止抓包后显示十六...
  •  1002 窗口无法用来发送消息。  1003 无法完成此项功能。  1004 标志无效。  1005 卷不包含已识别的文件系统。请确认所有需要的文件系统驱动程序都已经加载,而且卷没有任何损坏。  1006 某文件的卷已...
  • 自动记忆所有子窗口大小和位置,下次启动立即应用。 动态加载布局方案菜单,可以动态新建布局、恢复布局、保存布局、另存布局等,用户可以制造任意布局。 二级窗体,双击从主窗体分离出来浮动,可以自由调整大小。...
  • 16.4.4 监听INET BSD 套接口 142 16.4.5 接收连接请求 143 16.5 IP 层 143 16.5.1 套接口缓冲区 143 16.5.2 接收IP数据包 144 16.5.3 发送IP数据包 144 16.5.4 数据碎片 144 16.6 地址解析协议 145 第17章 系统内核...

空空如也

空空如也

1 2 3 4 5
收藏数 81
精华内容 32
关键字:

更改窗口大小监听