那些年少的伤寂静微凉-优快云博客

原创全国各大城市的地铁数据、json格式

地铁线数据是常用的基础数据，本人利用爬虫程序爬取了全国所有城市地铁数据，整理成了json文件格式，可供下载,目前全国有40多个城市有地铁，全部包含，以各大城市名称拼音做key，值是数组，数组内每个一个对象是当前城市的一条线，当前线这个对象包含线的名称、id和children子级，children为数组，包含当前线的每个站点名称

2022-10-10 10:12:09 1072 1

原创最新全国行政区划，省市区县乡镇四级json数据

全国行政区划数据在开发中经常使用的基础数据，官方分别在全国民政部网站：mca.gov.cn/article/sj/xzqh/1980/、国家统计局网站：stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/都有发布，但是没有整理好的现成文件可供下载，满足不了开发需要，所以本人写了爬虫程序，将最新的数据爬取下来整理成了jison文件资源

2022-10-10 09:40:53 2183 1

原创 Promise核心原理实现一个简单版promise

创建Promise类，加入三个最常用的回调函数，class Promise { constructor(executor) { this.onResolved = [] this.onRejected = [] this.state = 'padding' try{ executor(this...

2019-11-26 17:10:20 381

原创 8种常见数据结构及其Javascript实现

做前端的同学不少都是自学成才或者半路出家，计算机基础的知识比较薄弱，尤其是数据结构和算法这块，所以今天整理了一下常见的数据结构和对应的Javascript的实现，希望能帮助大家完善这方面的知识体系。1. Stack（栈）Stack的特点是后进先出（last in first out）。生活中常见的Stack的例子比如一摞书，你最后放上去的那本你之后会最先拿走；又比如浏览器的访问历史，当...

2019-10-21 16:37:10 430

转载 HTML DOM 事件

HTML DOM 事件HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，函数不会在事件发生前被执行！(如用户点击按钮)。提示：在 W3C 2 级 DOM 事件中规范了事件模型。HTML DOM 事件DOM：指明使用的 DOM 属性级别。鼠标事件属性描述 DOM onclick ...

2019-10-11 17:50:22 260

转载 DOM变动事件的用法

DOM2级的変动事件是为XML或html的DOM设计的，不特定于某种语言。一：变动事件的分类有7种，最常用的浏览器支持最多的有3种，下面黑体？1. DOMSubtreeModified：在DOM结构中发生任何变化时触发；2. DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发；3. DOMNodeRemoved：在节点从其父节点中被移除时触发；...

2019-09-10 12:57:34 1092

原创移动端手势事件及长按事件模拟

H5原生事件中为移动端增加了3个触控事件，touchstart、touchmove、touchend；但是我们在实际使用手机时有长按和手势动作，但是原生并没有给我们封装类似的事件，所以我们需要模拟实现。(function () { const touch = new Event("touch"), longTop = new Event("longTop"), ...

2019-01-04 17:33:35 1359

原创 js实现双向数据绑定

<div class="app"> <input type="demo" shawn-model="demo" spellcheck="true"> <p shawn-text="sha"></p> <p shawn-text="demo"

2018-12-08 22:01:45 935

原创 vue mint-ui 使用介绍

npm 安装推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。npm i mint-ui -SCDN目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。<link rel="stylesheet" href="https://unp...

2018-09-04 15:20:44 7488

转载 vuex入门

如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃。我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 :<!--父组件中引入子组件...

2018-08-27 14:55:13 195

转载【Vue】详解Vue生命周期

www.cnblogs.com 2017-07-16 22:26（这里的红边圆角矩形内的都是对应的Vue实例的钩子函数）在beforeCreate和created之间，进行数据观测(data observer) ，也就是在这个时候开始监控data中的数据变化了，同时初始化事件对于created钩子函数和beforeMount间可能会让人感到有些迷惑，下面我就来解释一下：...

2018-08-09 18:04:17 642

转载 video 所有属性、方法、事件

src ：视频的属性poster：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视频宽度height：视频高度Media方法和属性：HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElementMedia.error...

2018-08-04 14:15:27 5868

原创自定义滚动条

var scroll = 0;$(".tel").click(function () { if ($(this).hasClass("open")) { $(this).removeClass("open") $(".drop-down").animate({ height: 0, opacity: 0 ...

2018-08-02 16:13:00 420

转载 object-fit 用法

该 object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。初始值 fill 适用于替换元素遗传是媒体视觉计算值按规定动画类型离散的为了规范通过正规的语法定义的唯一无歧义的秩序 /* 关键属性 */object-fit: fill;object-fit: contain;object-fit: cover...

2018-07-31 16:26:41 4922

转载移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法这两天自己在写一个手机网页，用到了触屏滑动的特效，就是往右滑动的时候左侧隐藏的菜单从左边划出来。做完之后在手机原生浏览器中运行正常，但在QQ和微信中打开，发现touchmove只会触发一次，而且touchend也经常不触发。之后百度了一下这个问题，原因是主要是由于...

2018-07-31 11:32:56 1161 1

转载 angularjs-ui-grid的详解

html:[html] view plain copy print?<pre name="code" class="html"> <link rel="stylesheet" type="text/css" href="../lib/angular-ui/ui-grid/ui-grid.min.css"

2018-03-28 15:29:15 2394 1

原创 AngularJS操作DOM——angular.element

addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选clone()-创建...

2018-03-23 10:23:30 1542

转载 fexl布局

网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这

2018-01-10 18:07:45 4182

转载 angularJS自定义指令各配置项详解

指令详解一个指令的定义应当是如下这个样子：code：angular.module('myApp', []) .directive('myDirective', function (UserDefinedService) { // 指令定义放在这里})其中，fun中的注入参数为angular自带或用户定义的服务，需要在指令内部中调用。分析其结构：

2018-01-09 18:12:57 443

转载你知道URL、URI和URN三者之间的区别吗？

这是一个经典的技术争论，许多人都会自问：URL、URI，很可能还有URN，它们之间的区别是什么。虽然，现在我们简单地把 URN 和 URL 都看做 URI，但严格来说URI可以进一步划分为URL、URN或者这两者的组合，所以了解这三者之间的区别将会非常有趣并让人受益匪浅。如果你恰好在某个地方碰到了这些东西，那么至少应该知道它们的含义。我认为，尽管对一般人来说，不了解这三个缩略词之间的技术差

2017-09-21 10:05:10 631

转载认识下一代通信技术WebSocket

认识HTML5的WebSocket在HTML5规范中，我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术，以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推动消息到服务器。让我们看一看HTML5的WebSocket API：它可用于客户端、服务器端。而且有一个优秀的第三方API，名

2017-08-26 09:30:18 458

原创 php操作服务器文件系统中的文件内容

//file_get_contents()函数读取服务器文件系统的文件内容$counter = file_get_contents('cont.text');//intval()函数转整数$counter = intval($counter);$counter++;//file_put_contents()函数将内容写入服务器文件系统的文件中file_put_content

2017-08-14 22:16:17 770

原创 ionic之ui-view嵌套视图配置路由

实现的效果是点击左侧导航，切换右侧视图内容。首先创建一个固定视图的代码片段文件，这个这个代码片段分为两块区域，一块为左侧导航固定内容，一块为右侧更换内容的ui-view视图欢迎来到邮箱收件箱发件箱

2017-08-10 22:00:56 1032

原创 ionic配置页面间跳转的URL

ionic框架是架构于ng之上的，所以同样有路由配置模块，也大致相同，但更强大些，所以也会有些区别，用的模块不再是angular的ngRoute模块，而是angular-ui-route模块，比ng的Route多了一些配置方法和属性。所依赖的服务也有所不同，ng是$routeProvider,ionic依赖的是$stateProvider,称之为状态。配置代码： var ap

2017-08-09 22:41:14 1304

转载 JavaScript 编码小技巧+ES6新增功能

三元操作符如果使用if...else语句，那么这是一个很好节省代码的方式。Longhand:const x = 20;let answer;if (x > 10) { answer = 'is greater';} else { answer = 'is lesser';}复制Shorthand:const answer = x > 10 ? 'is

2017-08-09 17:46:30 563

原创 H5 FormData对象的作用及用法

H5 FormData对象就模拟一个原始的表单格式的数据，以前上传文件非得要用个form包起来，就是和后台约定的一个传输数据格式，FormData就是按照规定的格式，把form中所有表单元素的name与value组装成一个queryString，省去你手工拼接的工作，如果用过jquery的话，应该知道有个表单序列号的函数，作用和它是一样的，不过FormData还提供了更多的操作方法，全部在

2017-08-09 16:03:14 13465

原创 js Blob对象介绍

什么是Blob？Blob是一种JavaScript的对象类型。HTML5的文件操作对象，file对象就是Blob的一个分支或说一个子集。Blob 存储大量的二进制数据，Blob自己本身的属性有两个，分别是：size 和 type ,在原型中有个很有用的方法：slice();slice()方法在js很多对象中都有，其作用也类似，都是用来截取，Blob中的slice也一样，也是用来截取，不

2017-08-09 15:15:59 17036

原创 H5 web worker线程的使用

H5 web worker是执行线程，作用是用来执行耗时的js脚本，但又不完全是线程，为什么这样说呢，因为和真正的线程有些不一样，系统真正的线程是可以用来执行任何任务的，但h5的worker底层虽然也是线程，却被限制了，只能做特定的任务。不能用来操作DOM和BOM，浏览器禁止限制了。注意：因为worker 的限制，所以创建的worker线程只能用来执行耗时的，跟DOM.BOM没有

2017-08-08 22:59:35 2243

原创 H5拖放API

拖放API其原理就是利用事件触发去改变元素的位置或在DOM中的结构；它分一两个场景，一个是拖，一个放。还有一个关系场景，源对象与目标对象的关系。源对象三个事件：dragstart => 拖动开始 drag => 拖动开始进行中 dragend

2017-08-08 20:57:13 612

原创 clipboradData对象

clipboradData对象是一个event事件对象，在其原型中提供了三个操作方法，分别是：getData()、setData、claerDate();因为是事件对象，得通过触发oncopy或onpaste或oncut剪切板事件获得clipboradData对象；getDate获取剪切板数据；比如：document.oncopy=function(){

2017-08-07 18:59:20 662

转载 ionic之AngularJS扩展功能属性

目录：标题栏 : ion-header-bar页脚栏 : ion-footer-barheader/footer : 样式及内容内容区 : ion-content滚动框 : ion-scroll拉动刷新 : ion-refresher滚动刷新 : ion-infinite-scroll脚本接口 : $ionicScrollDelegate标题栏 : ion-header-bar

2017-08-06 00:42:04 696

转载 ionic之AngularJS扩展功能属性(二) 教程

目录：内联模板 : script路由机制 : 状态机导航视图 : ion-nav-view模板视图 : ion-view导航栏 : ion-nav-bar回退按钮 : ion-nav-back-button内联模板 : script可能你没有注意过，HTML中常用的script标签在AngularJS中被重新定义了：除了原来的脚

2017-08-06 00:34:45 591

转载实用的CSS样式知识及技巧

1、垂直对齐如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑：.verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: trans

2017-08-01 11:34:37 1558

转载 HTML meta标签各属性的作用

用html5文档申明做的页面在PC上的效果没问题，但手机浏览器会把该网页缩放到很小，你可以看到整个网页但是看不清字了！！只需在页面head标签内上加入meta标签的viewport申明：就能帮你解决这个看似很糟糕的问题。 viewport 语法介绍：content="height = [pixel_value | device-height]

2017-07-30 21:32:22 953

原创 NG之Route模块路由配置

var app = angular.module("myApp",['ng','ngRoute']);// 调用config方法配置路由，参数是一个function函数，同时注入依赖服务$routeProvider app.config(function ($routeProvider) {//调用$routeProvider服务中的when方法设置路由词典，第一个

2017-07-17 01:23:02 1443

原创最全原生AJAX请求步骤

以下代码为最全原生AJAX请求,包括了设置和获取请求头。btn.onclick=function(){ var xhr=new XMLHttpRequest(); //创建xhr对象--隶属XMLxhr.onreadystatechange=function(){ //事件监听请求执行到哪一步 if(xhr.readyState===4){

2017-07-09 02:56:30 13971

原创 ng自定义指令和四种用法

ng自定义指令只有一种方法，通过directive去定义声明，使用有四种方法，作为元素、属性、class类、注释。以返回一个对象的方式定义。需要注意是名称必须以驼峰式命名，使用时变横杠的方式，比如名称为：myTest, 使用： my-test。ng内置的指令也是这么用的。自定义指令的常用的属性有这么一些：name priority terminal scope controller

2017-07-07 22:43:39 3423

原创 ng自定义服务的几种方式

ng的服务本质上也是一个对象，所以也挺好理解，用法也简单，需要时直接注入即可用，ng称为依赖注入，讲得那么高大上，其实就跟JS函数传参是一样的，完全可以这样去理解，下面直接看代码：clikcMeclikcMe //创建ng模块 var app=angular.module("myModule",['ng']);//下面就两种自定义的方式，两种方式用法差不多

2017-07-06 22:46:06 1278

原创 oninput,onpropertychange,onchange的区别和用法

onchange事件触发必须满足两个条件，内容改变和失去焦点。但很多时候我们要在没失去焦点的情况下触发。onpropertychange事件的触发是在属性改变时立触发，注意是属性改变时，这就可以解决onchange的不足，但由于是属性改变时触发，当内容和其它属性都有改变时，也可能会触发多次，导致执行多次函数，而且它是IE专属，其它内核没法用。oninput事件只在value改变时触发，

2017-07-05 16:34:58 411