精华内容
下载资源
问答
  • 2021-07-28 14:13:39

    js 监听窗口展示、隐藏,界面展示、不展示的事件 visibilitychange

    最近在做一个访客界面的应用,有到访人员来之后,界面中展示一个从左到右的浮窗。 这个动画事件自然是通过 setInterval 来实现的。
    但现在遇到一个问题,当界面不展示的时候,interval 一直在运行,到访人员还是会一直出现,但 dom 界面不会更新,就会堆积很多人员信息在那里,当打开界面的时候,看到一坨在那。

    visibilitychange 事件

    如何解决呢?界面中如果有个事件能告诉我们这个界面有没有被展示就好了,确实有这个事件,就是 visibilitychange

    给界面添加这个事件

    document.addEventListener('visibilitychange', event => {})
    

    当切换标签或者最小化浏览器,总之,当这个界面不被展示时,就会触发这个事件。
    但 这个 event 中并不包含界面当前是被展示、还是被隐藏的信息的

    这个信息在 document

    let isShowing =  document.visibilityState === 'visible' // 展示的时候为 visible 隐藏的时候为 hidden
    

    问题处理

    此时就你可以通过这个信息来做处理,当界面展示的时候所有动画开始,当界面不展示的时候所有动画结束
    当界面不展示的时候,应该停止所有的 setInterval 动画,不然,在再回到界面的时候,这段时间的所有 interval 更新,都会一性次的在界面执行,就会很卡

    
    let intervalHandleAnimate = null // 动画 inteval 的 handle,将通过这个来结束这个 interval
    
    function animateStart(){
    	intervalHandleAnimate  = setInterval( ()=>{
    		// 动画相关
    	}, 60)
    }
    
    function animateStop(){
    	clearInterval(intervalHandleAnimate )
    }
    
    if (isShowing){
    	animateStart()
    } else {
    	animateStop()
    }
    
    // 或者简写成
    isShowing ? animateStart() : animateStop();
    
    更多相关内容
  • 这是一款使用jQuery和CSS3制作的带隐藏侧边栏的垂直多面板UI界面布局。这个UI界面使用汉堡包图标作为隐藏菜单触发按钮,点击它时菜单会从上往下滑出。点击相应的菜单项可以直接跳转到相应的面板上。
  • Unity3D UI Text文本触发隐藏显示

    万次阅读 2018-11-23 15:54:59
    Text文本显示/隐藏 一、首先创建一个脚本,并绑定在对应的text中。 二、定义变量,并使文本保持隐藏 using UnityEngine; using System.Collections; using UnityEngine.UI; **//导入UI资源库** public ...

    Text文本显示/隐藏

    一、首先创建一个脚本,并绑定在对应的text中。

    在这里插入图片描述

    二、定义变量,并使文本保持隐藏

    using UnityEngine;
    using System.Collections;
    using UnityEngine.UI;				**//导入UI资源库**
    
    public class die : MonoBehaviour 
    {
    	public static GameObject txt;				**//定义公共静态变量用于另外脚本的引用**
    
    	void Start () 
    	{
    		txt = GameObject.Find("die");
    		txt.SetActive (false);				**//保持txt的隐藏状态**
    	}
    }
    
    

    三、接下来进入另一个脚本,使玩家碰到指定物体时,显示文本

    using UnityEngine;
    using System.Collections;
    
    public class collision1 : MonoBehaviour {
    
    	private GameObject man;
    
    	void OnCollisionEnter(Collision col)				
    	{
    		if (col.gameObject.name.Equals ("prop_samoflange(Clone)")) 				**//当碰撞开始时**
    		{
    			die.txt.SetActive(true);				**//文本显示**
    		}
    

    首先文本利用SetActive函数控制其隐藏,当利用OnCollisionEnter方法,检测到物体碰撞时,显示文本。

    展开全文
  • 一、设置一个div元素,绑定滚动事件 二、在methods中描述滚动事件 三、设置CSS,让其内容超出高度时存在滚动条(overflow: auto;),然后隐藏滚动条(::-webkit-scrollbar{ display: none; })

    一、设置一个div元素,绑定滚动事件

    在这里插入图片描述

    @scroll="scrollEvent"
    

    二、在methods中描述滚动事件
    在这里插入图片描述

    scrollEvent (e) {
      if (Math.ceil(e.srcElement.scrollTop) + e.srcElement.clientHeight === e.srcElement.scrollHeight) {
        // this.scrollHandler(this.dataWorkQueue[this.clickItemIndex], this.clickItemIndex)
        // 这里可以写滚轮滚到元素底部时触发的操作,示例中触发的是一个methods方法
      }
    },
    

    三、设置CSS,让其内容超出高度时存在滚动条(overflow: auto;),然后隐藏滚动条(::-webkit-scrollbar{ display: none; }
    在这里插入图片描述

    .queue-content {
      height: calc(100vh - 278px);
    }
    .scroll {
      height: calc(100vh - 285px);
      overflow: auto;
      width: 100%;
    }
    .scroll::-webkit-scrollbar {
      display: none;
    }
    

    四、上述方式,显然还可以优化,即鼠标移上去显示滚动条,鼠标离开隐藏滚动条,参考文章:鼠标事件通过class改变样式

    展开全文
  • 总结下手机界面改版要考虑的布局,主要的分为以下2大类 主导航 列表式 陈列馆式 九宫格式 选项卡式 旋转木马 行为扩展式 多面板 图表式 次导航 抽屉式 超级菜单...因为次导航是隐藏起来,隐而不见、只有触发时才显示。
  • 有时候,我们的页面中可能会包含一些布局,这些布局默认是隐藏的,当用户触发了一定的操作之后,隐藏的布局才会显示出来。比如,我们有一个Activity用来显示好友的列表,当用户点击Menu中的“导入”以后,在当前的...
  • VC 动态隐藏窗口中的按钮、文本框等控件,本例中是把窗口中的TextBox文本框控件隐藏,点击按钮后即可隐藏该控件。整个代码的执行,在用户点击了按钮后,触发按钮事件,在按钮事件中,写入以下代码即可:  void ...
  • 这次拿京东的手机版登录界面进行讲解 照常,先上动图: 我要吐槽哈,就冲这个动图浪费我的时间也必须得给我点个赞,我截了有5遍,文件太大,就是上传不成功。哪位小哥有截取动图的更好的方法,评论区教教我,嘿嘿...
    • 首先,上页面展示以及代码实现
    • 其次,附上实现代码的相关知识点

    首先


    1. 页面展示

    在这里插入图片描述

    2. js的实现思路
    • 点击眼睛,把密码框类型改为文本框就可以看见里面的密码
    • 一个按钮两个状态,点击一次,切换为文本框,继续点击切换成密码框
    • 算法: 利用一个flag变量,来判断flsg的值,如果是1就切换成文本框,flag设置为0;如果是0就切换成密码框,flg设置为1
    3. 代码实现
    • html+css
    <div class="box">
           <label for="">
               <img src="./img/close.png" alt="" id="eye">
           </label>
           <input type="password" name="" id="pwd">
    </div>
    
    <style>
           .box {
               width: 400px;
               border-bottom: 1px solid #ccc;
               margin: 100px auto;
               position: relative;
           }
           
           .box input {
               width: 370px;
               height: 30px;
               border: none;
               /* 鼠标聚焦在框框上的时候就没有蓝色边框了 */
               outline: none;
           }
           
           .box img {
               position: absolute;
               top: 2px;
               right: 2px;
               width: 24px;
           }
    </style>
    
    • js
    //1. 获取元素
           var eye = document.getElementById('eye');
           var pwd = document.getElementById('pwd');
           //2. 注册事件
           var flag = 0;
           eye.onclick = function() {
               // 点击一次之后,flag一定要变化
               if (flag == 0) {
                   pwd.type = 'text';
                   eye.src = './img/open.png';
                   flag = 1;
               } else {
                   pwd.type = 'password';
                   flag = 0;
                   eye.src = './img/close.png';
               }
           }
    

    首先之后

    我再嘚拨嘚两句: 关于如何从网页上扒图。这次拿京东的手机版登录界面进行讲解

    • 照常,先上动图:
      在这里插入图片描述

    我要吐槽哈,就冲这个动图浪费我的时间也必须得给我点个赞,我截了有5遍,文件太大,就是上传不成功。哪位小哥有截取动图的更好的方法,评论区教教我,嘿嘿嘿嘿~~~

      • 第一步,F12或者右击‘检查’—>打开控制台
      • 第二步,打开图片网址,然后复制图像即可(案例中睁眼闭眼背景扒取之后是黑色的,贼拉奇怪;大家也可以去阿里矢量图库上找图标哒,okkk)

    其次 相关笔记的补充


    1-1 获取元素

    以下笔记的中的所有log均为console.log(笔者为了方便,部分内容采用了简写,哪里不清楚的话欢迎大家提出问题,看到回复会灰奔来为你解答滴!!!)

    1. 根据ID获取

      • 使用getElementById()方法可以获取带有ID的元素对象

        //1. 因为我们文档网页从上往下加载,所以先得有标签,所以我们script写到标签的下面
        //2. get获得element元素by通过驼峰命名
        //3. 参数id是大小写敏感的字符串
        //4. 返回元素对象
        <div id = "time">2019-9-9</div>
        <script>
        	var timer = document.getElementById('time');
        </script>
        log(timer);
        log(typeof timer);
        //console.dir 打印我们返回的元素对象,更好的查看里面的属性和方法
        console.dir(timer);
        
    2. 根据标签名获取

      • 使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
      <body>
      	<ul>
              <li>知否知否</li>
              <li>知否知否</li>
          </ul>
          <ol id="ol">
          	<li>生僻字</li>
          	<li>生僻字</li>
          </ol>
          <script>
          	//1. 返回的是 获取过来元素对象的集合,一维数组,以伪数组的形式存储
          	var lis = document.getElementsByTagName('li');【document获取的是整个页面的所有li标签的】
          	log(lis);
          	log(lis[0]);
          	//2. 我们想要的一次打印里面的元素对象我们可以采取遍历的方式
          	for( var i = 0;i < lis.length; i++){
          	log(lis[i]);
          	}
          	//3. 如果页面中只有一个li,返回的还是伪数组的形式
          	//4. 如果页面中没有这个元素,返回是的空的伪数组的形式
          	//5. 获取某个元素(父元素)内部所有指定标签名的子元素
          	var ol = document。getElementsByTagName('ol');     //[ol]
          	XXXXXXlog(ol.getElementsByTagName('li'));XXXXXX        //【这是错的】
          	log(ol[0].getElementsByTageName('li'));     //[li,li,li,li]
          	
          	//5. 直接利用的父元素的id名
          	var ol = document.getElementById('ol');
          	console.log(ol.getElementByTagName('li'));     //[li,li,li,li]
          </script>
      </body>
      
      • // 5. 获取某个元素(父元素)内部所有指定标签名的子元素,注意:父元素必须是单个对象(指明是哪一个元素对象),获取的时候不包括父元素自3己
    3. 通过类名来获取(HTML5新增的方法,不兼容IE6,7,8)

      • 语法

        • 方法一: querySelector返回指定选择器的第一个元素对象,切记,里面的选择器需要加符号,.box,#red
        document.querySelector('选择器');   //返回指定选择器的第一个元素对象
        //例子: document.querySelector('.box')
        
        • 方法二: querySelectorAll()返回指定选择器的所有元素对象的集合

          var allBox = document.querySelectorAll('.box');
          
        • 方法三: getElementsByClassName根据类名获得某些元素集合

          document.getElementsByClssName('类名');   //根据类名返回元素对象集合
        
      • 例子:

        <div class="box">盒子</div>
            <div class="box">盒子</div>
            <div id="nav">
                <ul>
                    <li>首页</li>
                    <li>产品</li>
                </ul>
            </div>
        
        var boxs = document.getElementsByClassName('box');
                console.log(boxs);
        
    1-2 事件三要素及执行事件
    1. 事件概述:JavaScript是我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为

      • 理解: 触发-----响应机制
    2. 事件有三部分组成:事件源,事件类型,事件处理程序;称之为事件三要素

      • 事件源:事件被触发的对象;(谁: 按钮)

        var btn = document.getElementById('btn');
        
      • 事件类型: (如何触发,即什么事件比如[鼠标点击]【onclick】还是[鼠标经过]还是[键盘按下])

      • 事件处理程序: 通过函数赋值的方式来完成

        btn(事件源).onclick(事件类型)= function() {
        	alert('点秋香');
        }
        
    3. 执行事件的步骤

      • 获取事件源

      • 注册事件(绑定事件)

      • 添加事件处理程序(采取函数的形式)

        <div>我被选中了</div>
        <script>
        		//获取事件源
                var div = document.querySelector('div');
                //绑定事件,并添加事件处理程序
                div.onclick = function(){
                    console.log('我被选中了');
                }
        </script>
        

      常见的鼠标事件:

      鼠标事件触发条件
      onclick鼠标点击左键触发
      onmouseover鼠标经过触发
      onmouseout鼠标离开触发
      onfocus获得鼠标焦点触发
      onblur失去鼠标焦点触发
      onmousemove鼠标移动触发
      onmouseup鼠标弹起触发
      onmousedown鼠标按下触发

    嗯嗯嗯!!!我写滴咋样哩?????
    立马手动点赞鼓励!!!
    在这里插入图片描述
    欢迎大家找我交流哦噢噢噢噢,嘻~!拜~

    展开全文
  • 最近遇到部分H5界面部分不能点击及有些展示出来的H5界面不全,通过客服反馈过来的问题,大部分都是android4.0以上,android6.0以下的系统出的问题,而6.0以上的手机都正常,这是因为前端H5部分代码不支持手机低版本...
  • 近来基于qt crearor开发了一个嵌入式linux程序,部署在一个带有触摸屏的嵌入式平台里,设置了开机自启动后,界面上还有鼠标,影响了美观,希望能够把鼠标去掉。 解决步骤一: 首先查看qt开发环境里,窗口的属性...
  • 用html和js做一个登录/注册界面,不连接数据库,这个案例用到了js的引入,form表单结合表格的布局,以及登录界面常用的密码的隐藏与实现的方法。 进入正题,先看我们的成型案例:如下图 案例大概就是这个样子,讲...
  • Android 眼睛 显示隐藏密码(ImageView)

    千次阅读 多人点赞 2022-06-20 19:21:54
    Android 眼睛 显示隐藏密码(ImageView) 在前端中我们知道用javascript就可以可以很容易实现,那么在Android中怎么实现这个功能呢?
  • Java图形化界面编程

    千次阅读 多人点赞 2021-12-27 14:20:35
    先谈谈个人对图形化界面编程的认识,图形化界面编程可以直接的看到每一步操作带来的效果,相对于传统编程盯着黑框框学起来是非常非常有意思的。
  • 保护知识产权这是该系统在 2 轮汽车制造公司之一的实际实施我做了一些修改,因为主要实现需要相机接口和硬件触发 该项目的主要目标是: 1.要确定硬件触发时的三种基本颜色,即红色,黑色和蓝色,<我已修改此部分 ...
  • 这里采取的一种方案就是,将对应的接口URL作为标识,匹配的将触发对应的属性,这里目前只支持隐藏和必填属性 @ApiModelProperty(name = "id", position = 0, value = "项目编号[添加操作可不传递,修改必传]", ...
  • 至此基本实现了当点击下拉列表框中任意一个选项时,会触发(联动)该选项需要查看的内容,隐藏其他内容,但还有一个待解决的问题,第一次点击初始界面的复选框中默认的子选项时,不会出现该子选项相应的内容,但是先...
  • C# Winform窗体自动运行隐藏

    千次阅读 2018-01-18 11:41:40
    public Form1() { InitializeComponent(); this.WindowState = FormWindowState.Minimized; this.ShowInTaskbar = false; SetVisibleCore(false); }1234
  • 1、布局的隐藏和显示安卓开发中会遇到很多显示和隐藏的问题,有时候需要隐藏一部分布局,包括所有的布局格式(线性布局、相对布局、网格布局等),这里以LinearLayout的隐藏与显示为例进行展示说明。 首先在layout...
  • Unity3d中Button触发UI显示

    千次阅读 2020-04-13 22:49:19
    并操作 我执行的是点击按钮出现UI 初始化里面隐藏UI Click操作后出现UI 参考Unity3D(九)UI界面控制物体显示和隐藏我是用按钮控制UI显示与隐藏 之前挂错物体,挂载的是button,难怪一直出错,引以为戒
  • 为了防止因为非故意触发手机造成的一定的困扰。 二级锁屏界面是在解锁一级界面后进入的一个界面,算是用于一定的加密,相当于给手机多了一层保护,所以二级界面通常称之为安 全界面-----KeyguardSe
  • 1.对router文件夹下的index.js进行设置 ...navshow:用于判断是否显示的参数,当为true时就显示,为false或者没有设置就不隐藏。 meta:router的元信息 2.在显示的底部的导航栏进行设置 <div class="nav-b
  • pyqt5美化界面

    万次阅读 多人点赞 2019-03-12 21:14:50
    qt做界面很方便,但是一般做出来都不是很好看,需要去美化。 这是效果图 是一个做语音识别的小界面。虽然是一个小界面,但是通过这个小界面的美化方法,能够了解类推制作其他的精美界面。 第一步 制作初始界面 ...
  • Qt实践录:一些界面设计的记录示例

    千次阅读 2020-02-03 16:15:32
    有些场合,需要隐藏界面某些功能,面向特定人员使用,如一些维护升级工具,面向现场支持人员和面向开发人员,所用之功能不同,但又不想同时维护多个工具,则可以隐藏部分功能。 本节演示双击某个提示语(使用 QLabel...
  • QT界面编辑

    千次阅读 2019-05-22 15:22:03
    QT界面编辑 ** QT建立游戏登录界面 1、新建一个界面(app)工程 点击 “欢迎” 选项,点击 “New Project” 弹出新建项目界面,在项目中选择 Application -> QT Widgets Application 选项,再点击 choose ,在弹...
  • 关闭按钮,点击该按钮触发事件,隐藏弹窗.弹窗是这个方法调出来的: > ``` BootstrapDialog.show({cssClass:'two-row-dialog', message: $('<div></div>').load(basePath + '/goEdit/'+id), title: '编辑...
  • 1.首先将你需要隐藏的元件拉出来,然后给他设置交互样式,鼠标单击时。 2.然后交互样式设置成我调制的样子就好。
  • 1. 效果图 2. 实现步骤 给最外层的div加个点击...screenRule" 或者 @click.stop="screenRule=true" 3. 步骤截图 初始化一个值,控制 div 显示和隐藏 设置页面最外层(当用户点击页面内所有地方都会触发,把 div...
  • Java图形界面编程

    万次阅读 多人点赞 2019-02-23 22:23:45
    一、Java图形用户界面(gui)介绍 1、Java GUI简介   图形用户界面(Graphics User Interface,GUI)是用户与程序交互的窗口,比命令行的界面更加直观并且更好操作。   Sun已经提供了一个跨平台GUI开发工具包AWT...
  • 按手机返回键,可以返回当前APP的上一个Activity也可以隐藏任务到后台而不回退到上一个Activity 在需要的任意一个activity中重写onKeyDown方法即可 @Override public boolean onKeyDown(int keyCode, KeyEvent ...
  • c#winform关闭窗口时触发的事件

    千次阅读 2020-12-19 03:31:11
    } *************************************************************************************************************** C# 窗体关闭时可以触发的事件 FormClosing :在窗体关闭时,FormClosing 事件发生。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 55,841
精华内容 22,336
关键字:

如何触发隐藏界面