OBKoro1

http://obkoro1.com/web_accumulate/ [email protected]

好未来教育集团上海种一颗树最好的时间是在十年前，其次就是现在了。

Results 108 issues of


OBKoro1

H5 notification浏览器桌面通知 | effect

### [博客链接](http://obkoro1.com/web_accumulate/accumulate/effect/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%A1%8C%E9%9D%A2%E9%80%9A%E7%9F%A5.html) # H5 notification浏览器桌面通知 Notification是HTML5新增的API，用于向用户配置和显示桌面通知。上次在别的网站上看到别人的通知弹窗，好奇之余也想知道如何实现的。实际去查一下发现并不复杂，且可以说比较简单，故写篇博客分享给大家,希望能帮你们了解这个API。 # npm包：我还发了一个npm包:notification-Koro1，非常轻量简洁，觉得不错的话，点个Star吧~ # chrome下Notification的表现：以谷歌为例，一开始需要用户允许通知：允许通知之后，显示的通知长这样： # Notification特性该通知是脱离浏览器的，即使用户没有停留在当前标签页，甚至最小化了浏览器，也会在主屏幕的右上角显示通知，然后在一段时间后消失。我们可以监听通知的显示，点击，关闭等事件,比如点击通知打开一个页面。博客、前端积累文档、公众号、GitHub # 栗子：去各个网站里面的控制台去运行 API的具体细节，等下再说，先试试这个API~ 下面是一个简单的栗子，大家可以先在各个网站的控制台里面运行查看Notification的效果： var options = { dir: "auto", // 文字方向...

H5 notification浏览器桌面通知

npm包：

chrome下Notification的表现：

Notification特性

栗子：去各个网站里面的控制台去运行

浏览器支持：

通知权限：

检测权限：

请求权限

推送通知

web H5 notification浏览器桌面通知

计算两个时间的时间差&时区转换 | effect

### [博客链接](http://obkoro1.com/web_accumulate/accumulate/effect/%E6%97%B6%E9%97%B4%E5%B7%AE%E4%B8%8E%E6%97%B6%E5%8C%BA%E8%BD%AC%E6%8D%A2.html) # 计算两个时间的时间差&时区转换 # 计算两个时间的时间差：获取两个时间数据，通常这两个时间是：后端给的时间数据和当前时间 let dateBegin = '2018/08/28 04:56:38'; // 初始时间 dateBegin = new Date(dateBegin); // Mon Aug 28 2017 04:56:38 GMT+0800 (中国标准时间) // 上面是Date对象的数据形式 let dateEnd...

计算两个时间的时间差&时区转换

计算两个时间的时间差：

时区转换

点个Star支持我一下~

web 计算两个时间的时间差&时区转换

前端弹幕效果实现思路 | effect

### [博客链接](http://obkoro1.com/web_accumulate/accumulate/effect/%E5%89%8D%E7%AB%AF%E5%BC%B9%E5%B9%95%E6%95%88%E6%9E%9C%E5%AE%9E%E7%8E%B0%E6%80%9D%E8%B7%AF.html) # 前端弹幕效果实现思路这是几个月前写的文章，文章下面有很多精彩的讨论，或许能给你一点启发更好的方式可以利用canvas或者 CSS 动画来实现弹幕需求，不过文章中的思路，可以参考一下。 # 实现效果： # 实现原理：实现弹幕的原理，并不算太复杂，耗费一些时间，怼一怼应该都可以做出来。获取弹幕数据。将弹幕设置为四个通道，每个通道最多只能出现两条弹幕。使用setInterval动态设置dom的left属性。使用 dom 的offsetWidth和屏幕的宽度判断元素是否滚动超出屏幕，然后移除 dom。 # 实现步骤： # 1. 首先看一下html的结构。 <div class="detailImg"> <img src="url"/>...

前端弹幕效果实现思路

实现效果：

实现原理：

实现步骤：

1. 首先看一下html的结构。

2.获取弹幕所需要的数据。

3.执行弹幕的函数。

点个Star支持我一下~

web 前端弹幕效果实现思路

input 的一些坑点分享 | effect

### [博客链接](http://obkoro1.com/web_accumulate/accumulate/effect/input%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9D%91%E7%82%B9%E5%88%86%E4%BA%AB.html) # input 的一些坑点分享 # 本文内容包括：移动端底部 input 被弹出的键盘遮挡。控制 input 显/隐密码。在 input 中输入 emoji 表情导致请求失败。 input 多行输入显示换行。输入框首尾清除空格-trim() 在 input 中监听键盘事件 # 移动端底部 input 被弹出的键盘遮挡 input 输入框是通过position:fixed一直放在页面底部，当点击...

input 的一些坑点分享

本文内容包括：

移动端底部 input 被弹出的键盘遮挡

控制 input 显/隐密码

在 input 中输入 emoji 表情导致请求失败

textarea 多行回车换行，显示的时候换行设置：

输入框首尾清除空格-trim()

在 input 中监听键盘事件

点个Star支持我一下~

web input 的一些坑点分享

推箱子 | amateur

### [博客链接](http://obkoro1.com/web_accumulate/accumulate/amateur/%E6%8E%A8%E7%AE%B1%E5%AD%90.html) # 推箱子 # demo：推箱子小游戏 # 步骤解析：本文代码已经放在了github上面了,里面也进行了很详细的代码注释，可以copy下来，在本地运行一下看看。 # 1. 渲染地图 html结构： html结构十分简单，只要弄一堆div，来放置地图的class就可以了，我这里初始化了12*9个div，地图里最多九行高度。这些div都是同样大小，地图渲染出来区别的只是颜色的不同。地图函数： var box=$('.box div'); //地图使用的div集合 function create(){ //创建地图函数 box.each(function(index){ //index的数量是固定的，是box div下面div的数量 // 每次创建地图初始化div box.eq(index).removeClass(); });...

推箱子

web 推箱子

仿Vue极简双向绑定 | Vue

### [博客链接](http://obkoro1.com/web_accumulate/accumulate/Vue/%E6%9E%81%E7%AE%80%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A.html) # 仿Vue极简双向绑定现在的前端面试不管你用的什么框架，总会问你这个框架的双向绑定机制，有的甚至要求你现场实现一个双向绑定出来，那对于没有好好研究过这方面知识的同学来说，当然是很难的，接下来本文用160行代码带你实现一个极简的双向绑定机制。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 # 效果GIF： # demo地址： codepen:仿Vue极简双向绑定 Github:仿Vue极简双向绑定 # 了解Object.defineProperty()：这个API是实现双向绑定的核心，最主要的作用是重写数据的get、set方法 # 使用方式： let obj = { singer: "周杰伦" }; let default_value = "青花瓷"; Object.defineProperty(obj, "music", {...

仿Vue极简双向绑定

效果GIF：

demo地址：

了解Object.defineProperty()：

使用方式：

示例demo：

画一下重点：

实现思路：

mvvm系列的双向绑定，关键步骤：

流程图：

web 仿Vue极简双向绑定

简单的弹窗组件实现 | Vue

### [博客链接](http://obkoro1.com/web_accumulate/accumulate/Vue/%E5%BC%B9%E7%AA%97.html) # 简单的弹窗组件实现最近在使用element-ui框架，用到了Dialog对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。然后就想着把这种弹窗组件的实现方式与大家分享一下，下面本文会带着大家手摸手实现一个弹窗组件。本文主要内容会涉及到弹窗遮罩的实现，slot插槽的使用方式，props、$emit传参，具体组件代码也传上去了。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 # 组件最后实现的效果 # 实现步骤先搭建组件的html和css样式，遮罩层和内容层。定制弹窗内容：弹窗组件通过slot插槽接受从父组件那里传过来弹窗内容。定制弹窗样式：弹窗组件通过props接收从父组件传过来的弹窗宽度，上下左右的位置。组件开关：通过父组件传进来的props控制组件的显示与隐藏，子组件关闭时通过事件$emit触发父组件改变值。 # 1.搭建组件的html和css样式。 html结构：一层遮罩层，一层内容层，内容层里面又有一个头部title和主体内容和一个关闭按钮。下面是组件中的html结构，里面有一些后面才要加进去的东西，如果看不懂的话可以先跳过， <template> <div class="dialog">  <div class="dialog-cover back" v-if="isShow" @click="closeMyself"></div> <!--...

简单的弹窗组件实现

组件最后实现的效果

实现步骤

1.搭建组件的html和css样式。

2. 通过slot定制弹窗内容

3.通过props控制弹窗显隐&&定制弹窗style

4.$emit触发父组件事件修改数据，关闭弹窗

弹窗组件代码

小结：

参考资料：

web 简单的弹窗组件实现

Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子] | Vue

### [博客链接](http://obkoro1.com/web_accumulate/accumulate/Vue/vue%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0.html) # Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子] 说到Vue的钩子函数，可能很多人只停留在一些很简单常用的钩子(created,mounted)，而且对于里面的区别，什么时候该用什么钩子，并没有仔细的去研究过，且Vue的生命周期在面试中也算是比较高频的考点，那么该如何回答这类问题，让人有眼前一亮的感觉呢... # Vue-Router导航守卫：有的时候，我们需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导航，否则就取消跳转，并跳到登录页面让其登录。为此我们有很多种方法可以植入路由的导航过程：全局的, 单个路由独享的, 或者组件级的,推荐优先阅读路由文档 # 全局守卫 vue-router全局有三个守卫： router.beforeEach 全局前置守卫进入路由之前 router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用 router.afterEach 全局后置钩子进入路由之后使用方法： // main.js 入口文件 import router from...

Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

Vue-Router导航守卫：

全局守卫

路由独享守卫

路由组件内的守卫：

关于钩子的一些知识：

完整的路由导航解析流程(不包括其他生命周期)：

你不知道的keep-alive[我猜你不知道]

用法：

生命周期钩子：

web Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

Vue 定义全局函数 | Vue

### [博客链接](http://obkoro1.com/web_accumulate/accumulate/Vue/vue%E5%AE%9A%E4%B9%89%E5%85%A8%E5%B1%80%E5%87%BD%E6%95%B0.html) # Vue 定义全局函数 # 原理通过 Vue.prototype 将函数挂载到 Vue 实例上面，在组件中通过 this.函数名，来运行函数。 # 1. 在 main.js 里面直接写函数直接在 main.js 里面写: Vue.prototype.test = function() { console.log('执行全局函数test'); }; 组件中调用： this.test(); //...

原理

Vue 定义全局函数

1. 在 main.js 里面直接写函数

2. 写一个模块文件，挂载到 main.js 上面。

点个Star支持我一下~

web Vue 定义全局函数

数组API解析合集 | JS

### [博客链接](http://obkoro1.com/web_accumulate/accumulate/JS/%E6%95%B0%E7%BB%84API%E8%A7%A3%E6%9E%90%E5%90%88%E9%9B%86.html) # 数组API解析合集数组的使用场景非常多，平日中也涉及到很多数组的api/相关操作，一直也没有对这块内容进行一块整理总结，所以这次对这块内容做一个较为系统的总结，方便自己、也方便他人。 # 创建一个数组: // 字面量方式: // 这个方法也是我们最常用的，在初始化数组的时候相当方便 let a = [3, 11, 8]; // [3,11,8]; // 构造器: // 实际上 new Array === Array,加不加new 一点影响都没有。 let...

数组API解析合集

创建一个数组:

ES6 Array.of() 返回由所有参数值组成的数组

ES6 Arrary.from() 将两类对象转为真正的数组

方法:

改变原数组的方法(9个):

splice() 添加/删除数组元素

sort() 数组排序

pop() 删除一个数组中的最后的一个元素

shift() 删除数组的第一个元素

web 数组API解析合集