HangMine的博客

转载 JS的隐式转换

eg: x==yx或y为NaN, return false; xy都为Null或undefined,return true; 如果x和y为String，Number，Boolean并且类型不一致，都转为Number再进行比较 如果存在Object，调用先转化为原始对象再比较，流程如下：1、调用valueOf(),如果是原始值，直接返回(如时间对象返回时间戳)2、如果不是原始值，则调...

转载 javascript获取以及设置光标位置

一. 获取光标位置： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // 获取光标位置 getCursorPosistion(dom) { if (!document.selection) { // 非ie...

转载 CSS line-height概念与举例

定义两行文字基线之间的距离。基线的大体位置基线的位置可以看成x字母下边缘的位置。不同字体的基线位置会有微小的差别。文本中的几条线：行高示意图：一行文本的行高为：上间距 + 文本的高度+下间距，并且上间距是等于下间距的。我们还可以基本上这样认为：行高是两行文字基线之间的距离，也是两行文字顶线之间的距离，两行文字中线之间的距离。行内框盒子模型内容区域 c...

原创 vue-router apache 配置history mac环境

1.前端路由设置为history模式：(1)mode: 'history' (这时候已经去掉"#"号，但是子页面刷新时会报404)(2)vue-cli 3 配置 baseUrl: '/'（否则子页面刷新应用不到外部文件（因为路径改变了，所以用绝对路径即可））2.注意匹配好路由的path和实际发布时的path (否则打开index.html后显示一片空白)3.apache配置：(...

原创 前端架构整理

1.css（UI库）（1）始始化CSS（2）基础：不添加类名时的样式（3）布局：布局相关的类（4）模块：可复用的样式（核心）（5）状态：不同状态的样式（6）主题：相当于皮肤（7）命名规则：组件内推荐BEM（块名__元素--修饰符(状态)：toogle__details--active）的命名规范2.JS（1）框架选择：根据项目选择适合的框架和第三方插件（2）代码规范：可参考Airbnb、googo...

原创 css nth-of-type nth-of-child(公式)

知识点:1.nth-of-type公式里的n是从0开始计算2.nth-of-type获取到的元素，是从1开始计算3.如果需要获取或排除前面的元素，用nth-of-type   如果需要获取或排除前面的元素，用nth-last-of-type例子：1.获取前三个：nth-of-type(-n+3),从n=0开始计算，分别得到第3，第2，第1个元素2.获取前三个除外的：nth-of-type(n+4)...

转载 [npm ERR! code ELIFECYCLE]

node_modules安装问题，执行以下：rm-rf node_modulesrm package-lock.jsonnpmcache clear--force//清除缓存，errno-4048时可用，如下面报错npm installnpm WARN deprecated nomnom@1.8.1: Package no longer supp

转载 使用正则表达式找出不包含特定字符串的条目

使用正则表达式找出不包含特定字符串的条目技术随笔概述做日志分析工作的经常需要跟成千上万的日志条目打交道，为了在庞大的数据量中找到特定模式的数据，常常需要编写很多复杂的正则表达式。例如枚举出日志文件中不包含某个特定字符串的条目，找出不以某个特定字符串打头的条目，等等。使用否定式前瞻正则表达式中有前瞻（Lookahead）和后顾（Lookbehind

转载 常见的HTTP状态码(HTTP Status Code)说明

2开头 （请求成功）表示成功处理了请求的状态代码。200   （成功）  服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。 201   （已创建）  请求成功并且服务器创建了新的资源。 202   （已接受）  服务器已接受请求，但尚未处理。 203   （非授权信息）  服务器已成功处理了请求，但返回的信息可能来自另一来源。 204   （无内容）  服务器

转载 javaScript遍历对象、数组总结

javaScript遍历对象、数组总结      在日常工作过程中，我们对于javaScript遍历对象、数组的操作是十分的频繁的，今天抽空把经常用到的方法小结一下，方便今后参考使用！    javaScript遍历对象总结1、使用Object.keys()遍历 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).

转载 原生JS实现最简单的图片懒加载

试一下自己撸一个图片懒加载…Demo地址：http://axuebin.com/lazyload照片都是自己拍的哦~懒加载什么是懒加载懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时候再发送图片请求，避免打开网页时加载过多资源。什么时候用懒加载当页面中需

转载 JS跨域：window.postMessage + window.name +jsonp

1.window.postMessage(1)在发送数据窗口执行：otherWindow.postMessage(msg,targetOrigin)otherWindow:表示接受数据的窗口的window对象，包括iframe的contentWindwohe和通过window.open打开的新窗口。msg表示要发送的数据，包扩字符串和对象(ie9以下不支持，可以利用字符串和js

原创 15个常用JS优化代码技巧

1.用concat代替push,unshift,spice向数组中插入元素 var arr = [1,2,3,4,5]; //old method arr.unshift(0); //new method 快98% [0].concat(arr).concat([6]);2.面对大量的if-else语句，使用switch或封装成对象处理// 用switchswitch(col

原创 DIV内只显示两行文字，超过的用省略号

// 实现DIV内只显示两行文字，超过的文字用省略号代替 overflow: hidden; text-overflow: ellipsis; // 这里的display必须用-webkit-box display: -webkit-box; // -webkit-line-cl

转载 Cordova打包Vue项目

第一步：安装cordova如果已经安装则直接跳过，否则执行以下命令：npm install -g cordova如果这个命令都不会运行，那我建议你不要继续往下看了。第二步：新建cordova项目执行命令cordova create cordovaApp com.cordova.testappcd cordovaAppcordova platform add android到这里我们的c

转载 Vue.js 2.0和Cordova开发webApp环境搭建

HTML5开发APP技术文档 一、环境参数1、技术语言：HTML、CSS、ES6、Node.js等；2、框架：Vue.js 2.x、Cordova；3、开发系统：mac、windows等；4、环境配置： node 6+ npm 3+ （最好下载Node.js官方最新版本） 、jdk1.8、SDK（请直接下载Androidstudio软件官方最新版本，

转载 es6 箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。为什么叫Arrow Function？因为它的定义用的就是一个箭头：x => x * x上面的箭头函数相当于：function (x) { return x * x;}箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ .

转载 vue.js中的vue-cli中各个文件简单介绍

转载 HTML 获取屏幕、浏览器、页面的高度宽度

本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。目录1. 介绍：介绍页面的容器(屏幕、浏览器及页面)、物理尺寸与分辨率、展示等内容。2. 屏幕信息：介绍屏幕尺寸信息；如：屏幕、软件可用以及任务栏的高度和宽度。3. 浏览器信息：介绍浏览器尺寸信息；如：浏览器、内部页面以及工具栏的高度和宽度。4. 页面信息：介绍HTML页面尺寸信息；如：body总的

原创 VUE脚手架构建

全局安装vue-cli脚手架构建工具：npm install vue-cli -g初始化vue项目：vue init webpack vuetestvue-cli初始化项目选项配置详细解析:$ vue init webpack vuetext1--------------------- 安装vue-cli,初始化vue项目的命令? Target directory e

转载 JQuery 获取touchstart,touchmove,touchend 坐标

JQuery写法： 1234567891011121314$('#id').on('touchstart',function(e) {    var _touch = e.originalEvent.targetTo

原创 WEBPACK 创建基本项目步骤

初始化项目文件夹，创建package.json文件:npm init安装webpack,先全局安装,再本地安装:npm install -g webpacknpm install --save-dev webpack创建两个文件夹和二个文件:index.html --放在public文件夹中;(并引入bundle.js)main.js-- 放在app文件夹中;在pac

原创 webpack:使用expose-loader 解决第三方库的插件依赖问题

安装 node模块 npm install jquery --save npm install bootstrap --save安装 expose-loadernpm install expose-loader --save-dev修改 webpack.config.js：为jquery模块暴露多个变量jQuery、$、scrollable  module: {

原创 windows7上用IIS配置PHP网站，提示如下错误:

原创 兼容性问题学习之路

问题一：IE下居中内容向右偏移原因：absolute的外层必须是relative的情况下在FF和IE下效果才能统一解决：将absolute改为relative

转载 入门Webpack，看这篇就够了

入门Webpack，看这篇就够了 zhangwang 关注2016.08.05 11:21* 字数 7058 阅读 412932评论 638喜欢 1787赞赏 692017年9月18日更新，添加了一个使用webpack配置多页应用的demo,可以点击此处查看2017年8月13日更新，本文依据webpack3.5.3将文章涉及代码完

原创 Bootstrap学习记录，快速手册

前言：记录Bootstrap的学习过程的问题内容：1）.clearfix：利用clearfix样式清除浮动，在超小型屏幕才能清除（因为其是用visible-xs样式控制的2）：实现相对于父元素小一号的副标题效果3）bootstrap文本效果：text-muted（减弱效果）text-success（success效果）text-danger（danger效果）e

原创 IFE-TASK38（任务三十八：UI组件之排序表格）

前言：百度前端技术学院，任务三十八：UI组件之排序表格知识点：1）某列元素大小排序 --> 对行重新排序function(eve){ var content = eve.target.parentNode.innerHTML.split('<')[0], listNum = config.thContent.indexOf(conte

原创 IFE-TASK37（任务三十七：UI组件之浮出层）

前言：百度前端技术学院，任务三十七：UI组件之浮出层知识点：1）通过display:none来显示或隐藏浮出层和遮罩层,遮罩层的z-index位于浮出层与背景层之间,样式为半透明2）利用pageX,pageY,offsetLeft,offsetTop,offsetWidth,offsetHeight,clientWidth,clientHeight等属性,来确定

原创 IFE-TASK32（任务三十二：表单（四）实现表单自动生成工厂）

前言：百度前端技术学院，任务三十二：表单（四）实现表单自动生成工厂知识点：1）学习面对对象的封装思想构建data_box{}对象存放id节点和对应的value值构建validator{}对象来存放不同类型的验证函数构建data{}对象来存放所有表单的信息,以确定需要添加的元素构建Form{}对象验证所有的表单，统一管理构建ShowTag{}对象来构造

原创 IFE-TASK25（任务二十五：JavaScript和树（四））

前言：百度前端技术学院，任务二十五：JavaScript和树（四）知识点：1）通过ajax引入json数据并用eval解析2）通过控制对应节点的class来改变箭头，通过改变display:none来显示或隐藏节点下的，通过childNodes来选中所有子节点3）通过appendChild来新增节点，每个节点都需createElement包括ul、li、i、

原创 IFE-TASK21（任务二十一：基础JavaScript练习（四））

前言：百度前端技术学院，任务二十一：基础JavaScript练习（四）知识点：1）将空格，逗号，回车当分隔符，使用 split函数 + 正则表达式input.value.trim().split(/,|，|、|\s|\n|\r|\t/) //trim()去除左右空白，\s是指空白，包括空格、换行、tab缩进等所有的空白，而\S刚好相反\r 匹配一个回车符\n匹配一个

原创 IFE-TASK17（任务十七：零基础JavaScript编码（五））

前言：百度前端技术学院，任务十七：零基础JavaScript编码（五）知识点：1）构建一个对象，记录当前页面的表单选项var pageState = { nowSelectCity: -1, nowGraTime: "day"};2）条状图的宽度 =  间隔 = 屏幕宽度除以数据量，注意最左的特殊处理3）条状图的高度 = 数据AQI的数值，

原创 IFE-TASK12（任务十二：学习CSS 3的新特性）

前言：百度前端技术学院，任务十二：学习CSS 3的新特性知识点：1）纯CSS制作轮播图（显示DIV + 内容DIV，每次向左移动显示DIV的距离 + A标签的CSS的target选择器 对LEFT实现定位）2）增加CSS3的动画效果3）CSS3的FOCUS事件代码地址：点击打开链接DEMO：点击打开链接

原创 IFE-TASK11（任务十一：移动Web页面布局实践）

前言：百度前端技术学院，任务十一：移动Web页面布局实践知识点：1）通过@media + Flex + 百分比 +rem 实现不同屏幕的响应式设计代码地址：点击打开链接DEMO：点击打开链接

原创 IFE-TASK8（任务八：响应式网格（栅格化）布局）

前言：百度前端技术学院，任务八：响应式网格（栅格化）布局知识点：1）通过@media实现不同屏幕的响应式设计2）通过box-sizing属性来解决不同DIV之间的边距问题（所有div设置为Border-box,方便宽度用百分比进行操作）3）需根据不同屏幕进行响应的div的class命名需包含响应前响应后4）CSS包括两部分，响应前和响应后，响应前必须是小屏幕

原创 IFE-TASK10（任务十：Flexbox 布局练习）

前言：百度前端技术学院，任务十：Flexbox 布局练习知识点：1）通过@media实现不同屏幕的响应式设计2）父元素使用Flex布局，子元素使用order属性，可以调整布局策略代码地址：点击打开链接DEMO：点击打开链接

原创 IFE-TASK07（任务七：实现常见的技术产品官网的页面架构及样式布局）

前言：百度前端技术学院，任务七：实现常见的技术产品官网的页面架构及样式布局知识点：1）引入阿里symbol图标2）采用FLEX布局3）header实现固定div（ul使用flex布局的justify-content: space-between + li去除黑点list-style:none）4）调整边距尽量使用padding，不得已再使用margin代码地址：点击

原创 IFE-TASK06（任务六：通过HTML及CSS模拟报纸排版）

前言：百度前端技术学院，任务六：通过HTML及CSS模拟报纸排版知识点：1）用HTML5新的标签:header + section + article + footer2）采用DIV + Flex布局3）初始化CSS增加DIV边框虚线，方便布局代码地址：点击打开链接DEMO：点击打开链接

原创 使用GitHub部署网站

前言：记录使用GitHub部署网站的步骤第一步：新建仓库，仓库里面放我们的项目第二步：进行仓库，进入Setting设置，拉到GitHub Pages选项卡，点击Change Theme通过修改网站的风格开启网站第三步：将网站的相关文件放到我们的仓库里，需通过Git来使本地的文件上传到Github的仓库上面，步骤如下：0）安装Git1）创建一个文件夹用于保存从Gi