一.软键盘拖拽

效果图:

![img](file:////Users/sairitsutakara/Library/Group%20Containers/UBF8T346G9.Office/TemporaryItems/msohtmlclip/clip_image276.jpg)

功能思路分析:

1. 面向对象框架

\1. 构造函数中: 获取案例上需要用到的元素及数据相关信息

\2. 原型对象中:写好结婚证,初始化方法,事件监听方法

3. 实例对象中: 以对象的形式传参,如数据,选择器名等

2. 键盘显示隐藏

\1. 给两个文本框绑定点击事件,点击文本框显示键盘

\2. 给页面document绑定点击事件,点击页面空白区域隐藏键盘

\3. 给文本框的点击事件阻止冒泡(e.stopPropagation()),以免点击文本框触发document的点击事件

3. 键盘拖拽

\1. 鼠标按下: 为了避免跟键盘按下时的冲突,只给键盘上方空白区域做拖拽,获取鼠标到元素的位置,开启开关

\2. 鼠标移动: 判断开关是否为真, 键盘位置 = 鼠标到页面距离 - 鼠标到键盘距离

\3. 鼠标抬起: 关闭开关

4. 输入内容

\1. 给键盘绑定点击事件

\2. 阻止冒泡(e.stopPropagation()),避免与document的点击事件冲突

\3. 利用事件委托判断每一个按键,将按钮的内容innerHTML,拼接给文本框的value

\4. 特殊功能按键,额外判断: 拼接空格 += ‘ ’ > 清空value > 大小写转换( toUpperCase() toLowerCase() )

#二.今日小结

1. 面向对象三部曲: 构造函数 原型对象 实例化

prototype => 构造 找 原型

constructor => 原型 找 构造

proto => 实例找原型

\2. 隔了函数this指向会发生改变,需要在函数外保留this指向

\3. 实例化时以对象的形式传参

#三.作业 -- 数据筛选

效果图:

功能思路分析:

1. 默认渲染所有数据

封装一个渲染方法,根据传递过来的参数进行渲染,默认渲染所有的数据

2. 选中下拉列表筛选数据

给下拉列表绑定change事件,拿到下拉列表的value值,根据value值筛选不同的数据,使用数组的filter()方法筛选。

3. 文本框搜索数据

根据文本框输入的内容筛选数据,使用indexOf()做筛选条件

js下 Day14、面向对象案例的更多相关文章

  1. js下的面向对象

    本文记录了一种Javascript的面向对象方法及原理理解,示例代码如下: //构造函数 var MClass = function(value1, value2) { this.member = & ...

  2. JS 下拉菜单案例

    css代码 .nav { width: 300px; height: 400px; list-style: none; padding:; margin: 0 auto; } .nav>li { ...

  3. js下 Day12、案例

    一.垃圾分类 效果图: 功能思路分析: 1. 鼠标按下 (1) 获取鼠标到元素的距离(e.offsetX) (2) 开启开关变量 (3) 获取事件源 (4) 记录垃圾初始位置 ​  2. 鼠标移动 ( ...

  4. js下 Day11、案例

    一.成绩分类 效果图: 功能思路分析: 1. 渲染数据 2. 鼠标按下开启拖拽 \1. 给成绩盒子绑定鼠标按下事件(mousedown),用事件委托做多个标签的拖拽 \2. 开启控制拖拽的变量 \3. ...

  5. python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  6. 前端JavaScript(3)-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  7. Day046--JavaScript-- DOM操作, js中的面向对象, 定时

    一. DOM的操作(创建,追加,删除) parentNode 获取父级标签 nextElementSibling 获取下一个兄弟节点 children 获取所有的子标签 <!DOCTYPEhtm ...

  8. z-tree官方提供的下拉菜单案例

    1.z-tree官方提供的下拉菜单案例 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - selec ...

  9. 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__

    这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...

随机推荐

  1. 学习Validator验证框架总结

    在项目开发中许多地方需要加以验证,对于使用if-else简单粗暴一个一个验证,spring的validation封装了Javax ValidationI校验参数,大大缩减了代码量. 以前的分层验证,从 ...

  2. 来吧,展示!SpringBoot OSS 整合全过程,没见过比这更详细的了

    前言 阿里云对象存储服务(Object Storage Service,简称 OSS),是阿里云提供的海量.安全.低成本.高可靠的云存储服务.其数据设计持久性不低于 99.9999999999%(12 ...

  3. ABBYY FineReader 15 中保存和导出PDF文档的小细节

    运用ABBYY FineReader OCR文字识别软件,用户能将各种格式的PDF文档保存为新的PDF文档.PDF/A格式文档,以及Microsoft Word.Excel.PPT等格式.在保存与导出 ...

  4. 为什么思维导图软件MindManager成为了企业培训必备的工具

    企业培训,无论是前期准备.中间的演讲演示.还是后期的总结整理等.MindManager都可以以不同的形式,给你更好的培训方式.下面就来看看MindManager是怎么协助企业培训的吧: 前期准备--制 ...

  5. web端项目如何测试

    1.是否支持各种网络 2.网络如果演示能否正常加载 3.加载时断网还能加载出来么 4.浏览时断网页面是否保持 5.是否兼容各种不同的浏览器 6.不同的浏览器加载出的页面是否一致 7.页面效果如何 8. ...

  6. LeetCode 018 4Sum

    题目描述:4Sum Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c ...

  7. JZOJ 【NOIP2017提高A组模拟9.14】捕老鼠

    JZOJ [NOIP2017提高A组模拟9.14]捕老鼠 题目 Description 为了加快社会主义现代化,建设新农村,农夫约(Farmer Jo)决定给农庄里的仓库灭灭鼠.于是,猫被农夫约派去捕 ...

  8. 【NOIP2012模拟8.7】JZOJ2020年8月8日提高组T1 奶牛编号

    [NOIP2012模拟8.7]JZOJ2020年8月8日提高组T1 奶牛编号 题目 作为一个神秘的电脑高手,Farmer John 用二进制数字标识他的奶牛. 然而,他有点迷信,标识奶牛用的二进制数字 ...

  9. npm常用操作

    Npm常用操作 1. 淘宝镜像 1.1 npm临时使用淘宝镜像安装依赖包 npm i -g express --registry https://registry.npm.taobao.org 1.2 ...

  10. 从内存泄露、内存溢出和堆外内存,JVM优化参数配置参数

    内存泄漏 内存泄漏是指程序在申请内存后,无法释放已申请的内存空间,无用对象(不再使用的对象)持续占有内存或无用对象的内存得不到及时释放,从而造成内存空间的浪费.内存泄漏最终会导致OOM. 造成内存泄漏 ...