首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript 实现 Tab 点击切换

给元素绑定点击事件//第一个按钮的点击事件btnList[0].onclick = function () { btnList[0].style.color = "#fff"; btnList[0]...this.style.backgroundColor = "#f60"; divList[this.index].style.display = "block"; }}index 返回字符位置,它是被搜索字符串第一个成功匹配的开始位置...,我们可以通过控制台打印来看到 this 所输出的内容Let 命令ES6 中新增了 let 命令,用来声明变量,其用法类似于 var,但是所声明的变量,只在 let 命令所在的代码块内有效在上面的代码...接着在代码块内外打印这两个变量,可以看到,var 声明的变量返回了正确的值,代码块内打印 let 声明的变量返回了正确的值,而在代码块外打印 let 声明的变量报错,这表明,let 声明的变量只在它所在的代码块有效上面代码...i,导致最后输出的是最后一轮的 i 的值,也就是 10,而如果使用 let,声明的变量仅在块级作用域内有效,最后输出的是 6关于 let 更多的特性,或者想要了解 ES 6 新特性的读者,可以去看下阮一峰老师编著的

4K20
您找到你想要的搜索结果了吗?
是的
没有找到

信息提醒之对话框(AlertDialog + ProgressDialog)-更新

---- 带3个按钮(覆盖、忽略、取消)的对话框 用AlertDialog类创建的对话框最多可以添加3个按钮,除了上面添加两个方法,还可以使用setNeutralButton方法向对话框添加第三个按钮...如果设置第一个列表项为选中状态,该参数值为0 。 如果该值小于0,表示所有的列表项都未被选中。...listener: 单击某个列表项被触发的事件对象 lableColumn:如果数据源是数据集Cursor,数据集中的某一列作为列表对话框的数据加载到列表控件。...sendEmptyMessage和 sendEmptyMessageDelayed方法的第一个参数表示消息代码,这个消息代码用来标识消息队列的消息。...消息代码可以是任意int类型的值 虽然ProgressDialog.getProgress可以获取当前进度,但是只有在水平进度条风格的对话框有效,如果是圆形进度条,该方法返回永远是0 。

4.4K10

浏览器对象BOM

)    1.alert()   显示一段消息和一个带有确认按钮的警告框 ,//消息即为括号内的内容         2 .confirm()   显示一段用户输入消息的对话框,返回值为布尔值 //显示的消息为用户在括号内写...2.当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。         3.如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。...url如(www.baidu.com)则moveTo moveBy resizeBy resizeTo没有效果,(只有当没有值时,各个功能才能实现)   结果:打开一个长为300,宽为300,左上角坐标为...innerHeight  :返回窗口文档显示区的高度       2 innerWidth:返回窗口文档显示区的宽度 二   History 对象的常用方法   1.back() 加载history 列表的前一个...URL         2 forword()  加载history列表的下一个URL         3 go() 加载history列表的某个具体页面 三 Screen 对象 availHeight

80130

【画龙迎春】 HarmonyOS Image 组件的基本使用之画龙迎春,“码”上“鸿”福到

效果展示 素材 已将素材文件上传至oss 服务器,链接如下 素材一 素材二 http://s9g9q4h1t.hb-bkt.clouddn.com/myimg/dino.gif http://s9g9q4h1t.hb-bkt.clouddn.com...demo 开发因为我们使用的是http链接来访问的图片地址, 因此需要申请权限,步骤如下: 找到路劲 entry -> src -> main -> module.json5 在module.json5添加网络权限的申请...this.hasgit=false this.hasMp=true }) } }.padding(10) 代码设置三个...button按钮 第一个button 主要用于清空画布, 第二个和第三个按钮用于展示对应的图片 通过按钮来设置 hasgit和 hasMp两个变量的状态 图片展示 Row(){...注意 layoutWeight 仅在Row/Column/Flex布局中生效。可选值为大于等于0的数字,或者可以转换为数字的字符串。

15810

Android使用AlertDialog创建对话框

AlertDialog类的功能十分强大,它不仅可以生成带按钮的提示对话框,还可以生成带列表列表对话框,概括起来有一下4种: 1.带确定、中立和取消等N个按钮的提示对话框,其中的按钮个数不是固定的,可以根据需要添加...2.带列表列表对话框 3.带多个单选列表项和N个按钮列表对话框 4.带多个多选列表项和N个按钮列表对话框 在使用AlertDialog类生成对话框时,常用的方法如下所示: setTitle :为对话框设置标题...通常情况下,使用AlertDialog类只能生成带N个按钮的提示对话框,要生成另外3种列表对话框,需要使用AlertDialog.Builder类,AlertDialog.Builder类提供的常用方法如下表..., "您单击了中立按钮", Toast.LENGTH_SHORT).show(); } }); alert.show();//显示对话框 } }); //显示列表的对话框 Button button2...,Toast.LENGTH_SHORT).show(); } } }); builder.create().show();//创建对话框并显示 } }); } } 效果如图: 点击第一个按钮

1.7K30

3 个 React 状态管理的规则

No.1 一个关注点 有效状态管理的第一个规则是: 使状态变量负责一个问题。 使状态变量负责一个问题使其符合单一责任原则。 让我们来看一个复合状态的示例,即一种包含多个状态值的状态。...第一个属性 state.on 包含一个布尔值,表示开关。同样,`state.count 包含一个表示计数器的数字,例如,用户单击按钮的次数。...如果你想在列表添加新名称,则只需调用 add('New Product Name') 即可。...继续用 ProductsList 的例子,让我们引入“delete”操作,该操作将从列表删除产品名称。 现在,你必须为 2 个操作编码:添加和删除产品。...以同样的方式,当单击 Delete 按钮时,处理程序将调用 dispatch({ type: 'delete', name })。remove 操作将产品名称从名称状态删除。

1.7K00

一文总结 React Hooks 常用场景

那么第二次渲染后就会跳过 effect 的调用; useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // 仅在...count 更改时更新 5、模拟 componentDidMount 如果想只运行一次的 effect(仅在组件挂载和卸载时执行),可以传递一个空数组([ ])作为第二个参数,如下所示,原理跟第 4...那样一来,这个函数就肯定不会依赖任何 props 或 state,并且也不用出现在依赖列表中了;万不得已的情况下,你可以 把函数加入 effect 的依赖但 把它的定义包裹 进 useCallback...); }; const MemoChildComp = memo(ChildComp); 六、useMemo 假设以下场景,父组件在调用子组件时传递 info 对象属性,点击父组件按钮时,...解决: 使用 useMemo 将对象属性包一层,useMemo 有两个参数: 第一个参数是个函数,返回的对象指向同一个引用,不会创建新对象; 第二个参数是个数组,只有数组的变量改变时,第一个参数的函数才会返回一个新的对象

3.4K20

超实用的 React Hooks 常用场景总结

那么第二次渲染后就会跳过 effect 的调用; useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // 仅在...count 更改时更新 5、模拟 componentDidMount 如果想只运行一次的 effect(仅在组件挂载和卸载时执行),可以传递一个空数组([ ])作为第二个参数,如下所示,原理跟第 4...那样一来,这个函数就肯定不会依赖任何 props 或 state,并且也不用出现在依赖列表中了;万不得已的情况下,你可以 把函数加入 effect 的依赖但 把它的定义包裹 进 useCallback...); }; const MemoChildComp = memo(ChildComp); 六、useMemo 假设以下场景,父组件在调用子组件时传递 info 对象属性,点击父组件按钮时...解决: 使用 useMemo 将对象属性包一层,useMemo 有两个参数: 第一个参数是个函数,返回的对象指向同一个引用,不会创建新对象; 第二个参数是个数组,只有数组的变量改变时,第一个参数的函数才会返回一个新的对象

4.6K30

Android常用对话框大全——Dialog「建议收藏」

需要注意的是:NegativeButton这个按钮是在对话框的左边,PositiveButton在对话框的右边;如果你还想再加一个按钮也是可以的只需要在调用.setNeutralButton("第三个按钮...二:列表对话框 当给用户的选择就那么几条路的时候,就可在对话框上放置一个列表供用户自己选择 final String items[] = { "我是Item一", "我是Item二",...三:单选列表对话框,这个与列表对话框差不对是一样的只是它是单选 final String items[] = { "我是Item一", "我是Item二", "我是Item三", "我是Item...我就放置了一个EditText;在这里好多人在找自己布局的控件时候经常报NullpointException,原因也很简单就是没有使用加载的布局.findViewbyId()。...到了这一步基本上就能满足开发80%的需求了,看官如果还不能满足那别急慢慢往下看。

1.3K30

手写ReactHook核心原理,再也不怕面试官问我ReactHook原理

useState的参数是state变量的初始值,初始值仅在初次渲染时有效。 更新state变量的方法,并不会像this.setState一样,合并state。而是替换state变量。...下面是一个简单的例子, 会在页面上渲染count的值,点击setCount的按钮会更新count的值。...组件仅在它的 props 发生改变的时候进行重新渲染。通常来说,在组件树 React 组件,只要有变化就会走一遍渲染流程。...当监听数组的元素有变化的时候再执行作为第一个参数的执行函数 原理 原理发现其实和useMemo,useCallback类似,只不过,前面前两个有返回值,而useEffect没有。...,实际上作为第一个参数的函数因为是在浏览器渲染结束后执行的。

4.3K30

Android之AlertDialog的基本使用

所以AlertDialog并不需要到布局文件创建,而是在代码通过构造器(AlertDialog.Builder)来构造标题、图标和按钮等内容的。...,表示“积极”、“确认”的意思,第一个参数为按钮上显示的文字,下同; setNegativeButton:设置反面按钮,表示“消极”、“否认”、“取消”的意思; setNeutralButton...仔细阅读谷歌的API文档就知道了,setSingleChoiceItems 方法实现的onClick方法which表示的是当前选中的列表的item下标,而setPositiveButton和setNegativeButton...方法那里的which表示的却是按钮的种类,正面按钮的which值是-1,反面按钮的是-2,与列表的item是没有关系的。...我们创建一个集合,将点击选中的item添加到集合,取消勾选的话就从集合移除,点击确认按钮后就在日志打印出来。

1.4K20

【HTML】HTML 注册表单案例 ② ( 表格的内容设置 | 下拉列表 | 输入文本框 | 复选框 | 文本域 | 图片按钮 | 链接 )

文章目录 一、表格的内容设置 1、设置下拉列表 2、设置输入文本框 3、设置复选框 4、设置文本域 5、设置图片按钮 6、设置链接 二、完整代码示例 一、表格的内容设置 ---- 1、设置下拉列表...下拉列表 写在 td 单元格 标签 , 外层使用 标签 , 内层使用 标签 ; 代码示例 : <!...在表格的 td 单元格 , 设置 input 表单 , type 类型设置为 image 类型 , src 设置图片的 相对路径 ; 要将 图片按钮与 第二列 进行对齐 , 在该行表格 , 第一个单元格...需要空出来 , 只在第二个单元格设置图片按钮 ; 代码示例 : <!..., 通过 a 标签 设置 链接 , 链接目的地在 href 属性值设置 ; 要将 链接与 第二列 进行对齐 , 在该行表格 , 第一个单元格 需要空出来 , 只在第二个单元格设置链接 ; 代码示例

5.7K20

从编程小白到全栈开发:了解事件机制

在上一篇文章,我们初步了解了在HTML处理用户操作的知识,最主要的,就是如何对指定的DOM元素添加事件监听以获取用户操作,并进行后续的处理。...我们创建了一个按钮,这个按钮拥有一个class为inner的父节点,还有一个class为outer的祖父节点。...这三个DOM元素上,都分别设置了onclick事件监听函数。...,你会发现,打印结果,只会出现一行结果了,inner和outer不再会接受到通过冒泡上来的click事件,所以它们的click事件处理函数不再会因为点击按钮而被触发了: button...clicked 总结 事件机制是一种简单有效的消息传递机制,它不仅在前端的HTML DOM编程中被广泛使用,在服务端的JavaScript开发也拥有极高的使用价值。

33040
领券