草木黄尘-CSDN博客

原创 web标准

web 标准是一系列标准的组合，网页包含结构、表现及行为三个部分，web 标准也就是这三个部分标准的组合了。1. 结构相关标准常提到的几个标准语言有HTML、XHTML、XML、以及不熟知的SGML和GMLGML【Generalized Maker Language】用来解决不同系统中文档格式不同的问题；SGML【Standard Generalized Markup Language】一...

2019-03-14 23:29:32 191

原创前端主流框架双向绑定实现原理简述

一、AngularAngular的属性绑定语法为[attr]=porperty，事件绑定语法为(event)=fn。双向绑定的使用存在两种场景：1、在表单中双向绑定使用[(ngModel)]=porperty,但同时得设置name属性。其等价于绑定属性[value]=property + 绑定事件(input)=porperty.value = input.value。2、父子组件通信...

2018-08-27 22:33:45 3099

原创 centOS6.8升级gcc

这里计划升级为gcc7.1，原本的是gcc4.7 一、下载安装包：cd /usr/local/src // 进入用户自主操作目录wget http://ftp.gnu.org/gnu/gcc/gcc-7.1.0/gcc-7.1.0.tar.bz2 // 下载安装包（[安装包地址](http://ftp.gnu.org/gnu

2017-07-23 11:17:56 5097 2

原创 wamp配置虚拟主机时可能遇到的问题

一、浏览器输入localhost，提示错误：Forbidden You don’t have permission to access / on this server。解决办法： 1、进入wamp安装目录（假定安装在D盘，D:\wamp\bin\apache\apache2.4.9\conf），打开httpd.conf文件：检查以上两个权限设置是否正确。 2、还是httpd.con

2017-05-19 20:50:00 3121

原创 nginx安装及配置虚拟主机

在腾讯云买了一个学生机，centOS系统，试着学习nginx。一、安装nginx： 1、首先下载xShell，链接到主机。 2、cd /定位到根目录；mkdir download新建下载文件夹；ls查看当前目录下文件；如下图（这水印有点讨厌）： 3、在nginx官网下载稳定版安装包，将安装包上传到主机的download文件夹里（我这里是用ftp上传的），然后cd download进入

2017-05-01 00:48:51 380

原创正则表达式简结

全局匹配： /g 不区分大小写匹配： /i 匹配任意字符： “.” 匹配特殊字符：用”\”进行转义定义字符集： [] 字符区间：用”-“定义，例[0-9] 注意： “-”是一个特殊的元字符，只能用在”[” 与 “]”之间，在字符集合之外的地方，”-“只是一个普通字符，只能与其本身匹配，因此”-“字符不需要被转义。对某个字符集进行取非匹配： “^”，如[^0-9] 元字符大致分

2016-09-17 16:45:26 373

原创 vue数组操作

vue中数组的操作总结：一、根据索引设置元素： 1、调用$set方法：this.arr.$set(index, val);2、调用splice方法：this.arr.splice(index, 1, val);二、合并数组：this.arr = this.arr.concat(anotherArr);三、清空数组：this.arr = [];四、主要的数组方法： 1、变异方法（修改了原始数组

2016-08-27 20:47:32 83312

原创 vux点击事件的优化

Vux是基于Vue和WeUI的组件库。对于应用vux的项目因为点击绑定的是click事件，自然也存在移动端300ms延迟现象。我们可以用fastclick库来解决这个问题，具体步骤如下：这里以vue+webpack项目目录为例： 1、打开node控制台，切换到自己的项目目录 2、npm安装fastclick，并将版本信息写入本地packpage.json文件 3、下载成功后，在node

2016-08-21 12:00:01 5829

原创 vue父子组件的嵌套

组件的注册：先创建一个构造器var myComponent = Vue.extend({ template: '...'})用Vue.component注册，将构造器用作组件(例为全局组件)Vue.component('my-component' , myComponent)注册局部组件：var Child = Vue.extend({ /* ... */ })var Parent

2016-07-19 00:33:19 19663

原创 splice()方法删除二维数组项的问题

这么一段代码：var arr = [["a",1],["b",2],["c",3]];for (var i = 0 , len = arr.length; i < len; i++) { if (arr[i][0]==="a" && arr[i][1]===1) { arr.splice(i,1); }}console.log(arr);运行结果：问题显

2016-07-16 12:29:38 3870

原创 jQuery给动态生成的元素添加事件

有时需要向页面内动态添加元素，其中可能还需要给这些追加的元素绑定事件，这时候采用jquery是很方便的。 1、采用live()方法（该方法与1.4版本后废弃）： live()方法可以给所有元素附加一个事件处理函数，甚至包含动态添加的元素，其采用事件委托的处理方式，事件委托的原理是（如点击元素）：点击某个元素，因为该元素并未绑定任何事件处理函数，事件由DOM树冒泡到绑定了特殊事件处理函数的上层

2016-07-13 23:49:01 7117

原创常见知识点总结

一、输入URL,按下enter，发生了什么? 1、域名解析，浏览器解析域名对应的IP地址 2、发起TCP的3次握手 3、建立TCP链接，发起http请求 4、服务器响应http请求，返回相应的页面资源（html代码） 5、浏览器解析html代码，并请求html代码中的资源（css代码、图片资源等） 6、浏览器对面进行渲染呈现给用户。二、前端性能优化的理解 1、请求数量：合并样式表和脚本

2016-07-01 18:31:49 459

原创 HTML标签嵌套问题

HTML里块元素都可以自由嵌套吗，如果不能，会产生什么问题？以前没思考这个问题，也没发现这个问题，可能代码太规范了⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄ 终于，偶然写了这么一段代码 :-( 基础没学好，迟早得补回来）浏览器里运行字体颜色并没有变化，“F12”找原因发现了这个：这是什么鬼，换成h1等其他块元素也是这种情况，用display属性修改为inline也无济于事。赶紧补补知识总

2016-06-11 21:07:00 1385

原创 CSS优先级

多重样式下的优先级：假使对同一个元素应用了外部样式、内部样式和内联样式，则其优先级如下：内联样式 > 内部样式 > 外部样式存在特殊情况：如果外部样式是在内部样式后引用，则会覆盖掉内部样式。选择器的优先级： css7中基础选择器： id选择器（#container{…}）类选择器（.container{…}）属性选择器（input[type=”text”]{…}）伪类选择器（

2016-06-11 19:57:19 275

原创 Sass安装

官网介绍：“Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。” Sass 和 SCSS 其实是同一种东西，平常都称之为 Sass，其区别有两个： 1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名， SCSS 是以“.scss”后缀为扩展

2016-06-10 13:21:49 513

原创 ECMAScript数据属性和访问器属性

ECMA-262中把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。” js中每个对象都是基于一个引用类型创建的。创建自定义对象的最简单方式无非是创建一个object的实例，再为其添加属性和方法。用对象字面量模式可以写成这样：以上两种写法创建的person对象具有相同的属性和方法，这些属性在创建时都带有一些特征值，javascript通过这些特征值来定义他们的

2016-06-09 21:51:59 1135

转载 js几种跨域方法原理

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:要解决跨域的问题，我们可以使用以下几种方法：一、通过jsonp跨域在js中，

2016-03-23 17:00:30 348

转载 js性能优化

javascript是一种解释型语言，性能无法达到和C、C++等编译语言的水平，但还是有一些方法来改进。1、循环 JavaScript中的循环方式有for(;;)、while()、for(in)3种。其中for(in)的效率极差，因为for(in)执行过程中需要查询散列键。for(;;)和while()比较，while循环的效率要优于for(;;)。2、局部变量和全局变量局部变量的访问速度

2016-03-23 08:13:45 507

原创 canvas实现挂钟

canvas实现挂钟，实现该效果不难，只是实现过程帮助我们更好的掌握几个知识点。照例先奉上效果图： <div id="block"><canvas id="bgcan" width="250" height="250"></canvas><canvas id="clockcan" width="200" height="200"></canvas></div>div设置整个背景图。这

2016-03-18 16:38:34 335

原创 canvas实现放大镜功能

采用canvas实现放大镜功能，只需要使用一个方法。。。先奉上效果图：先介绍该方法： drawImage（）这个方法有三种使用情况： 1、drawImage(img,x,y) 三个参数，第一个参数当然是img元素了，也可以是video元素或者Image对象，x 、y 为图片绘制时在画布中的起始坐标，图像大小与原图相同。 2、drawImage(img , x , y , w

2016-03-17 20:53:31 4804

原创位操作符

突然发现，连位操作符都没有完全掌握。。。。。。先引用一段：位操作符作用于最基本的层次上，即按内存中表示数值的位来操作数值。ECMAScript中的所有数值都以IEEE-754 64位格式存储，但是位操作符并不直接操作64位的值，而是先将64位的值转换成32位的整数，然后执行操作，最后再将结果转换回64位，对于开发人员来说，64位存储格式是透明的，则该过程就像是只存在32位的整数。对于有符号的整数

2016-03-16 16:11:10 419

原创与元素大小相关的属性

元素区域由内至外依次为：内容区域、内边距、边框、外边距。（盒子模型）如下图：通过以下四个属性可以取得元素的偏移量：、 offsetHeight：垂直方向上占用空间大小（像素），包括元素内容区高度、左右内边距高度、水平滚动条的高度（可见的）、上下边框高度。（不包括外边距），这里值为240。 offsetWidth：水平方向上占用空间大小（像素），包括元内容区素宽度、左右内边距宽度、垂直滚动

2016-03-10 22:36:30 376

原创瀑布流插件

早就听闻瀑布流布局，今天用jquery试着写出，不够完善，基本能用。照例先奉上最终效果图： HTML结构代码：<div id="waterfall"> <ul> <li><img src="img/1.jpg"></li> <li><img src="img/2.jpg"></li> <li><img src="img/3.jpg"></

2016-03-08 22:21:27 750

原创分页插件

今天完成一个分页插件。首先看最终效果图： 1、创建文件夹： 2、编写page.html文件：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>分页</title> <link rel="stylesheet" type="text/css" href="css/page.css">

2016-03-05 10:41:25 247

原创焦点轮播图

开始编写一个焦点轮播图的插件 :）实现焦点轮播的方式有许多，这里采用的方式的主要点是采用css中z-index属性和position属性，通过设置图片的层级和位置来实现焦点轮播。首先照例奉上最终效果图： 1、首先创建文件夹： 2、编写img.html文件<!DOCTYPE html><html><head> <meta charset="utf-8"> <ti

2016-02-27 11:37:53 900

原创视频播放器

今天编写一个视频播放器插件，依然采用html5+jquery，所需要的知识点和上一篇（音乐播放器）差不多。照例先奉上最终效果图： 1、创建文件夹： 2、编写video.html文件：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>视频播放器</title> <link rel="style

2016-02-27 10:23:27 576

原创音乐播放器

因为日常喜欢听音乐，也就很想编写一个音乐播放器玩玩。现在积累的差不多了，今天用html5和jquery实现一个音乐播放器的插件。先奉上最终实现的效果图：界面很简单，功能主要包括：控制当前播放歌曲的进度；前后切换；播放模式包括顺序播放、单曲循环、随机播放；显示隐藏歌单；1、创建插件文件夹： 2、编写music.html文件：<!DOCTYPE html><html>

2016-02-26 17:48:37 754

转载 jquery插件编写

参照公众号”jquery大师“的jquery插件编写分享，在这里做一次转载。编写jquery插件的方法主要有三种： 1、第一种是最常见的，通过一个简单的jquery函数prototype属性的别名（jquery.fn）进行扩展； 2、第二种方法采用jquery函数extend()方法； 3、第三种是最为复杂的方法，是使用强大发jqueryUIWidgeFactory进行扩展（不常用到，略去

2016-02-26 15:53:59 617

原创笔记二十二（越界处理）

应用动画时需关注动画所实现的环境，动画对象需要根据环境的变化而改变运动状态。这里系统总结处理物体越界以及应用摩擦力的公式。注： left为环境右部边界所在坐标x值; right为环境左部边界所在坐标x值; top 为环境顶部边界所在坐标y值; bottom为环境底部边界所在坐标y值。 1、移除越界的对象if(object.x - object.width

2015-12-12 20:37:55 360

原创笔记二十一（综合运用——飞船）

基本动画知识总结综合运用。首先创建一个飞船构造函数。文件名：ship.js。function Ship(){ this.x = 0; this.y = 0; this.width = 25; this.height = 20; this.rotation = 0; this.showFlame = false;}Ship.prototype

2015-12-07 20:21:20 272

原创笔记二十（加速度实例）

直接上代码啦。。双轴加速度：文件名：acceleration1.html。<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>加速度实例1</title><style>#canvas{background-color: #99cc33;}</style></head><body><canvas i

2015-12-07 19:22:19 441

原创笔记十九（基本动画——速度实例）

本节笔记中引用的js文件具体参见前几节笔记。速度实例中主要理解速度向量概念。速度实例1：文件名：velocity1.html。<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>速度实例1</title><style>#canvas{background-color: #99cc33;}</styl

2015-12-07 17:25:00 277

原创笔记十八（视频）

文件中载入一段视频并将其逐帧渲染到canvas元素上。文件名：video.html。<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>视频</title><style>#canvas{background-color: #99cc33;}#video{display: none;}</style>

2015-12-07 12:02:07 232

原创笔记十七（绘制图片）

绘制图片有两种方式： 1、加载图片 2、使用图片元素文件名：img.html。<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>绘制图片</title><style>#canvas{background-color: #99cc33;}#jielun{display: none;}</style

2015-12-07 11:35:56 218

原创笔记十六（绘制六——线性渐变色）

文件名：drawing6.html。<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>绘制6</title><style>#canvas{background-color: #99cc33;}</style></head><body><canvas id="canvas" width="400" h

2015-12-06 22:48:36 637

原创笔记十五（绘制五）

其他形式的曲线 bezierCurveTO(cp1x , cp1y , cp2x , cp2y , x , y); 增加一个到当前路径的点，并由三次贝塞尔曲线连接两个控制点。 arcTo(cp1x , cp1y , cp2x , cp2y , radius); 使用两个控制点和指定半径为连接到前一个点的直线路径添加一个弧度。 arc(x , y , radius , startAngle

2015-12-06 21:46:38 259

原创笔记十四（绘制三+四）

绘制平滑的多条曲线。文件名：drawing3.html。第二个for循环略过第一个和最后一个点。再循环中创建一个新的控制点，其x , y值分别设置为循环中当前点和后续点的坐标的平均值。继而绘制一条穿过当前点并以控制点结尾的曲线，重复直至循环结束，循环结束时，索引指向倒数第二个点，绘制一条曲线穿过它到达最后一个点。得到一条平滑的曲线。<!DOCTYPE html><html><head>

2015-12-06 21:14:12 253

原创笔记十三（绘制二）

利用quadraticCurveTo(cpx,cpy,x,y)方法绘制曲线,接收两个参数，第一个是控制点，第二个是曲线终点。该形状由一个名为二次贝塞尔曲线的标准算法决定。该曲线会弯向但永不触及控制点。要想曲线穿过某点，使用一下公式：(x0,y0)为起点，(x2,y2)为终点，(x1,y1)作为控制点，(xt,yt)代表要穿过的目标点。x1 = xt * 2 - (x0 + x2) / 2y1 =

2015-12-05 20:13:17 313

原创笔记十二（绘制一）

利用简单的绘图指令创建一个简单的绘制程序：文件名：drawing1.html<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>绘制1</title><style>#canvas{background-color: #99cc33;}</style></head><body><canvas id=

2015-12-05 11:32:47 276

原创笔记十一（canvas颜色应用基础）

1、色彩合成假设想通过红绿蓝三原色的三个数值合成一个完整有效的颜色值，可以借助以下公式：var color = 0xFF << 16 | 0X55 << 8 | 0X33; //采用十六进制var color = 255 <<16 | 88 << 8 | 10; //采用十进制亦可2、提取三原色假设想从一种颜色中提取每个独立的三原色的值：red = color >> 16 & 0xFF;

2015-11-30 20:52:22 508