子匠_Zijor | 前端开发 / 程序媛 / 潜心学艺。

分类:Front End

(待完善) 组件封装:使用隐藏iframe解决跨域问题的无刷新表单提交

事起缘由:

二月份在做倩女coser报名专题的时候,被表单的POST跨域提交闹腾了一阵子。JSONP允许跨域但是不能使用POST请求也不能提交大文件;FormData的ajax提交能提交大文件,可惜会存在跨域报错;Form表单提交不存在跨域问题,但是却会刷新页面并跳转到数据接口页。显然这都不是我想要的。

对于POST请求跨域问题的处理,业界流行的解决办法有…

+ 阅读更多

【实战】HTML5摄像头拍照组件的封装

摄像头调用主要使用了navigator.getUserMedia()函数。为了将摄像头的画像实时展现,可以将录像数据流导入到video或者canvas中。在展示的时候,建议使用video作为视频流容易,因为canvas绘画视频帧时存在一定的卡顿。
在像素数据分析和将画像转成图片,则应将视频流导到canvas中,使用canvas API中进行数据提取。

在这里,我使用了一个隐藏…

+ 阅读更多

Webstorm(Mac版)快捷键整理

用Webstorm来调试Node代码简直太赞了,断点调试、属性方法快速等特性让我快速脱离了用Sublime text + node-inspector那种刀耕火种的痛苦状态,幸福指数嗖嗖嗖的就上来了~~~~

不吹捧啦,但是做Node开发的话,建议珍爱生命,远离ST,使用Webstorm~

欲善其功,必先利其器。我总是记不住WebStorm的快…

+ 阅读更多

学习笔记:vim基础 —— 多窗口功能

一般的编辑软件都有“切割窗口或冻结窗口”的功能,使得一个文件或多个文件放在多个窗口里展示。vim也有这个功能。

下面总结一下Vim中的多窗口操作方法。

一. 窗口的打开与关闭

1.1 打开新分隔窗口

:sp [filename]  // 在新窗口打开新文件
:sp  // 默认打开同一个文件

如果要打开一个新窗口并开始 编辑一个空的缓冲区,可使用:

:new

1.2 关闭窗口

:close

:close可以关闭当前窗口。

实际上,任何退出文件编辑的命令象”:q”和”ZZ…

+ 阅读更多

学习笔记:vim基础 —— 命令行备忘录

缘由:又一次被队友吐槽:咋连vim都不会用?!~( ╯□╰ )~。。。这就尴尬了,于是赶紧找一波资料,做一下笔记,方便下次查找和理解。

一. vim的三种模式

vim共有三种模式,分别是一般模式编辑模式命令行模式。这三种模式分别如下:

1.1 一般模式

以vim打开一个文件就直接进入一般模式(默认模式)。在该模…

+ 阅读更多

【实战】封装一个audio音频组件

备注:因为懒得去重复些一堆的事件兼容性函数,先用jQuery库快速捣鼓一个audio音频组件。等以后有空了,再干掉jQuery库的依赖,用纯JavaScript重构一下。

这个组件包含进度条拖拽,支持自定制audio的样式。体验如下:

直接上代码:

组件代码:

/*
* 音频组件
* options参
+ 阅读更多

【小技巧】解决iPhone中video视频的行内播放

如果我们希望在一个<div>内播放<video>视频,我们可能会这么写:

// CSS: 
video {width: 100%; height: auto;}

// HTML: 
<div style="width: 500px; height: 300px;">
    <video src="test.mp4" controls></video>
</div>

这在Android系统…

+ 阅读更多

原生JS:无刷新表单的兼容性封装(IE6+)

在做form表单提交的时候,都会遇到一个非常尴尬的事情:就是浏览器默认的submit功能竟然会刷新当前页面,并跳转至action链接

这(“▔□▔) Σ<(=~д~=!)> (~▽~”) (~_~|||) – … …

一般来说,这个action链接都是处理表单并返回一些文本信息的Controller函数,以空白…

+ 阅读更多

canvas转base64/jpeg时,透明区域变成黑色背景的解决方案

问题:png图片转jpeg时,透明区域被填充成黑色

在用canvas将png图片转jpeg时,发现透明区域被填充成黑色。

代码如下:

<p>Canvas:</p>
<canvas id="canvas" style="border: 1px solid #ccc;"></canvas>
<br>
<p>Base64转码后的图片:</p>
+ 阅读更多

JavaScript:获取url的querystring参数

一. 获取url的querystring参数

获取url的querystring参数的两种方法如下:

1.1 方法一:正则匹配

//获取url中的参数
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", i); // 匹配目标参数
    var result = window.location.search.substr(1).match(reg);
+ 阅读更多

input[file]标签的accept=”image/*”属性响应很慢的解决办法

input[file]标签的accept属性可用于指定上传文件的MIME类型

例如,想要实现默认上传图片文件的代码,代码可如下:

<input type="file" name="file" class="element" accept="image/*">

效果如下图所示,默认过滤掉所有非图片文件:

image_1aui7gbrsk4171i1nt1qqs1jbs9.png-12.1kB

但是!

这段代码在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题,可能要等 6~10s…

+ 阅读更多

canvas在高倍屏下变模糊的处理办法

一. 事起缘由

最近在用Canvas做社区网站的技能雷达图,如下图所示。

一倍屏下的显示情况:

image_1au479vu344r18fqg3b74a4859.png-7.2kB

二倍屏下的显示情况:

mohu.png-12.3kB

正当我很开心的准备发布出去时,用Mac Book 开发的同事跟我说,这简直是糊得不要不要的呀~( ╯□╰ )~。。纳尼可是我的华硕显示十分完美呀,这就十分尴尬了。

猜想是Canvas毕竟类似于位图,在Retina屏下如果不做多倍屏显示处理的话,图片应该会模糊。Google了一翻,果然如此。

二. 问题分析

+ 阅读更多

总结:http状态码

简单版:

  • 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
  • 200 OK 正常返回信息
  • 201 Created 请求成功并且服务器创建了新的资源
  • 202 Accepted 服务器已接受请求,但尚未处理
  • 301 Moved Permanently 请求的网页已永久移动到新位置。
  • 302 Found 临时性重定向。
  • 303 See Other 临时性重
+ 阅读更多

HTML5读取拖放的本地文件

在桌面上创建了自定义的放置目标后,可以从桌面上把文件拖放到该目标。与拖放一张图片或链接类似,从桌面上把文件拖放到浏览器中也会触发drop事件。而且可以在event.dataTransfer.files中读取到被放置的文件,此时它是一个File对象,与通过文件输入字段取得的File对象一样。

例子:

<!DOCTYPE HTML>
<html>
<head>
    <style
+ 阅读更多

学习笔记:HTML5的拖放 API

在HTML5之前,如果要实现拖放效果,一般会使用mousedown、mousemove和mouseup三个事件进行组合来模拟出拖拽效果,比较麻烦。而HTML5规范实现了原生拖放功能,使得元素拖放的实现更加方便和高效。

默认情况下,图像、链接和文本是可以拖动的。文本只有在被选中的情况下才能拖动,而图像和链接在任何时候都可以拖动。

HTML5为所有的HTML元素规定了一个draggable属性,表示元…

+ 阅读更多

独创系列:雷达图生成组件radarChart.js

项目地址: https://github.com/dengzhirong/radarChart

Demo展示地址: https://dengzhirong.github.io/radarChart/radarChart.html

一. 使用方法:

1.1 引入组件资源

需要在页面中首先引入radarChart.js和radarChart.css:

<link rel="stylesheet" type="text/css"
+ 阅读更多

我的Sublime Text3插件配置

缘由:每次重装电脑后,Sublime Text的插件又得重新谷歌一份来拼凑,着实很累,还不能保证完整还原。所以写此文档,记录我的Sublime Text3常用插件配置清单,和插件的使用方法。

Package Control安装

Package Control的官方文档

使用Ctrl + `快捷键或View->Show Console菜单打开命令行面板。

如果是Sublime Text3,则在命令行中输入以下代…

+ 阅读更多

总结:Sublime Text3 快捷键 (Windows版)

缘由:尽管谷歌一下就能搜出很多Sublime Text快捷键总结的文章,但是有些分类和快捷键的总结不够完善。自己的记忆不好,需常**用常查,故总结一份,方便日后查找。

一. 文本编辑

Ctrl + Shift + V: 粘贴并格式化代码缩进;

Ctrl + Enter:在下一行插入新行; Ctrl + Shift + Enter:在当前行前面插入新行; Ctrl + X: 删除当前行;(相当于 Ctrl + Shift + KCtrl + Shift

+ 阅读更多

SVG之分组与引用对象

SVG提供了一些元素,允许我们对元素进行分组,从而使得文档更加结构化、模块化。

<g>元素

<g>元素会将其所有子元素作为一个组合,通常组合还会有一个唯一的id作为名称。在程序中类似于“层”的概念,一个层就是一些相关对象构成的组合。每个组合还可以拥有自己的<title><desc>来供文本的XML应用程序识别,或者为用户提供更好的可访问性。

<g>

+ 阅读更多

使用JS控制伪元素的几种方法

一. 缘由:

本文源于在OSC社区中,有人提问如何用jq获取伪元素。我第一想法是强大的CSS Query应该可以获取伪元素吧。

然而事实上,CSS Query并不能。即我们不能通过$(“:before”)、$(dom).find(“:before”)或document.querySelector(“:be…

+ 阅读更多

:before和:after伪元素的常见用法总结

1. 利用content属性,为元素添加内容修饰:

1) 添加字符串:

使用引号包括一段字符串,将会向元素内容中添加字符串。栗子:

a:after { content: "after content"; }

2) 使用attr()方法,调用当前元素的属性的值:

栗子:

a:after { content: attr(href); }
a:after { content: attr(data-attr); }

3)使用url()方

+ 阅读更多

HTML5 拖放API 学习笔记整理

在HTML5推出拖放API之前,我们想要实现拖拽效果,一般都是使用mousedown、mousemove、mouseup鼠标事件监听来模拟出拖拽效果,代码量大,而且由于为了实时的拖拽效果而需要不断获取鼠标坐标位置和修改元素的位置,导致性能较差。而HTML5提供了原生的拖放API,无疑简单很多,而且性能较好。

HTML5的拖放API的兼容性如下:

http://caniuse.com/#feat=dragndrop

+ 阅读更多

Canvas API 语法整理

总有一些API记不住,所以,决定整理出来,方便查用。

canvas元素

canvas元素的属性有width和height。方法有以下三个:
|方法|说明|
|–
|getContext()|返回与该canvas元素相关的绘图环境变量。属性值有"2d"和"3d"。|
|toDataURL(type, quality)|返回一个数据地址(data URL),可以将其设定为img元素的src属性值。第一个参数指定了图像的类型,如"image/jpeg"或"image/png&q…

+ 阅读更多

JavaScript用户交互:移动物体

交互动画的一个主要目标是创建出流畅的用户体验,其中大多数的用户交互都是通过鼠标和触摸屏实现的。

在这篇博文中,我想分享一些JS对于物体移动的常见用法,包括拖拽和投掷效果。

一. 使用鼠标事件

可以将一个鼠标单击事件分解成两个事件:鼠标按下事件和按键弹起事件。通常情况下这两个事件是同时发生的。不过,有时鼠标按下后,鼠标还会移动一段时间才弹起,这种操作称为拖曳,即按下、移动、在释放。

在canvas动画中,…

+ 阅读更多

JavaScript动画详解(三) —— 弹动动画

缓动和弹动都是那对象从已有位置移动到目标位置的方法。但是缓动是指物体滑动到目标点就停下来;而弹动是指物体来回反弹一段时间后,最终停在目标点的运动。

弹动,大多数时候,物体的加速度与它到目标点的距离是成比例的。

来看一个在现实中弹动的例子:在橡皮筋的一头系上一个小球,另一头固定起来。小球的目标点就是它初始静止悬空的那个位置点。将小球拉开一小段距离然后松开,刚松手那一瞬间,它的速…

+ 阅读更多

JavaScript动画详解(二) —— 缓动动画

最普通的动画就是匀速的动画,每次增加固定的值。但是生活中很多运动并不是匀速运动的,而是有加速度改变的运动。在Web动画中,缓动动画有时候会让网站增色不少。

在CSS3中可以使用ease, ease-in, ease-out, ease-in-out 或者 cubic-bezier(n,n,n,n)来实现缓动动画。而且目前也有一些jQuery封装了缓动动画的Move.js, Velocity.js和Tween.js等。在实际项目中使用这些库文件或者CSS3属性可以大大…

+ 阅读更多

环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)

缘由:

在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度【效果如下图所示】,且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”。当时第一…

+ 阅读更多

联动的小球——Canvas实现

一天上午起床,脑子里满是联动小球的模拟实验,然后灵光一闪,就想到了用canvas实现之的原理,( ╯□╰ )。然后赶紧下床开始用纸笔理清实现逻辑和定位计算,然后打开电脑coding,一气呵成就是这么嗨森。

实现的基本思路是将小球的当前坐标用小球位置数组记录。每一次位置变动都将小球的新位置重新写入…

+ 阅读更多

CSS3滤镜特效增强效果

CSS3滤镜种类

CSS3 Filters滤镜效果共有十种特效,分別是:

CSS Filter 特效名称
grayscale 灰度
sepia 褐色老照片色
saturate 饱和度
hue-rotate 色相旋转
invert 反色
opacity 透明度
brightness 亮度
contrast 对比度
blur 模糊
drop-shadow 阴影

语法

elm {
    filter: none | <filter-function > [ <filter-function>
+ 阅读更多

使用srcset + sizes + w标识符实现响应式图片

Tencent前端笔试题竟然考了3道关于srcset + sizes + w标识符实现响应式图片的不定项选择题,当时就蒙了,完全没接触过这种方法来实现响应式图片呐。在此之前的记忆和实践中,一般都是用media query有时还会配合JavaScript判断来实现按屏幕宽度加载相应图片,但是遇到高分屏的情况就比较鸡肋,记得工作室网站当时就直接放弃了兼容高分屏。

考完以后,开始疯狂…

+ 阅读更多