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

分类:JavaScript

光标位置工具函数的实现

/**
* 光标位置组件
* ## selectRange对象的方法:
*   (1)selectRange.of(ele)   [创建光标位置获取的新对象]
           参数:
                ele  {{JavaScript DOM}}  光标所在的元素,原生JavaScript DOM

*   (2)selectRange.getCurPos()   [获取当前坐标位置]

*   (3)selectRange.setCurPos(pos)   [设置当前光标位置]
           参数:
                pos  {{Int}}
+ 阅读更多

学习笔记:Blob对象

Blob表示二进制原始数据,一个Blob对象就是一个包含有只读原始数据的类文件对象。

继承Blob功能的API有:

  • File对象:负责处理那些以文件形式存在的二进制数据,也就是操作本地文件;
  • FileList对象:File对象的网页表单接口;
  • FileReader对象:负责将二进制数据读入内存内容;
  • URL对象:用于对二进制数据生成URL。

一. 创建Blob对象的方法

创建Blob对象的方法有三种,如下:

  • 1)可以调
+ 阅读更多

javascript获取以及设置光标位置

一. 获取光标位置:

// 获取光标位置
function getCursortPosition (textDom) {
    var cursorPos = 0;
    if (document.selection) {
        // IE Support
        textDom.focus ();
        var selectRange = document.selection.createRange();
        selectRange.moveStart ('character', 
+ 阅读更多

学习笔记:Video和Audio API

一. 媒体元素

<audio>标签:嵌入音频内容;

<video>标签:嵌入视频内容。

这两个元素的用法如下:

<!-- 嵌入视频 -->
<video src="test.mp4">Video player not available.</video>

<!-- 嵌入音频 -->
<audio src="test.mp3">Audio player 
+ 阅读更多

JS:获取图片的原始宽度和高度

页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法。如下:

<img id="img" src="1.jpg">

<script type="text/javascript">
    var img = document.getElementById("img");
    console.log(img.innerWidth);
+ 阅读更多

Backbone.js 学习资料整理

近期想学习Backbone.js。故整理一波。

Backbone.js API官方网站:http://backbonejs.org/

Backbone.js API中文文档: http://www.css88.com/doc/backbone-0.5.3/

Hello Backbone.js:http://arturadib.com/hello-backbonejs/

What are some good resources…

+ 阅读更多

canvas中的三角运动(5) —— 圆周运动和椭圆运动

一. 圆周运动

1.1 思路分析:

圆的方程为:

// (x0, y0)为圆心位置;(x, y)为圆上的点
(x - x0) ^ 2 + (y - y0) ^ 2 = r ^ 2
cos(angle) ^ 2 + sin(angle) ^ 2 = 1

因此,综合以上两式,可得:

  • x = r * cos(angle) + x0
  • y = r * sin(angle) + y0

因此,应用正弦函数计算y坐标,用余弦函数计算x坐标。

1.2 实例:

// cancelRequestAnimFrame的
+ 阅读更多

canvas中的三角运动(4) —— 脉冲运动

需求:

模拟球形的脉冲运动

小球的构造函数如下:

// 圆球的构造函数
function Ball(radius, color) {
    if(radius === undefined) { radius = 40; }
    if(color === undefined) { color = "#ff0000"; }
    this.x = 0;
    this.y = 0;
    this.radius = radius;
    this.rotation = 0;
    this.scaleX = 1;
    this.scaleY
+ 阅读更多

canvas中的三角运动(3) —— 正弦波运动

一. 需求:

要求:让小球沿着正弦波运动。

小球的构造函数如下:

// 圆球的构造函数
function Ball(radius, color) {
    if(radius === undefined) { radius = 40; }
    if(color === undefined) { color = "#ff0000"; }
    this.x = 0;
    this.y = 0;
    this.radius = radius;
    this.rotation = 0;
    this.scaleX
+ 阅读更多

canvas中的三角运动(2) —— 旋转动画

一. 需求:

来一个挑战:绘制一个物体,并让它随着鼠标旋转,使它总能指向鼠标。

假设这个可供旋转的对象为箭头对象,箭头的构造函数如下:

// 箭头绘制的构造函数
function Arrow() {
    this.x = 0;
    this.y = 0;
    this.color = "#ffff00";
    this.rotation = 0;
}
Arrow.prototype.draw = function(context) {
    context.save();
+ 阅读更多

canvas中的三角运动(1) —— 三角函数基础

学习三角学,主要就是掌握各种边角关系,事实上,用于实现基本的动画90%的三角学只是都可以归结于两个函数:Math.sin()和Math.cos()。

三角函数

  • Math.sin():正弦函数
  • Math.cos():余弦函数
  • Math.tan():正切函数
  • Math.asin():反正弦函数
  • Math.acos():反余弦函数
  • Math.atan():反正切函数
  • Math.atan2():反正切函数

弧度与角度的转换

+ 阅读更多

JS中用户交互的常见事件处理

用户交互是基于用户事件的,这些事件通常是鼠标事件、触摸事件以及键盘事件。

一. 监听器与事件处理程序

添加事件监听可以使用addEventListener()

element.addEventListener(type, handler [, userCapture])

移除事件监听可以使用removeEventListener()

element.removeEventListener(type, handler
+ 阅读更多

Canvas绘图API总结

一. 绘图API总览:

  • strokeStyle
  • fillStyle
  • lineWidth
  • save()
  • restore()
  • beginPath()
  • closePath()
  • stroke()
  • lineTo(x, y)
  • moveTo(x, y)
  • quadraticCurveTo(cpx, cpy, x, y)
  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
  • arcTo(x1, y1, x2, y2, radius)
  • arc(x,
+ 阅读更多

谈谈requestAnimationFrame的动画循环

一. 动画的循环间隔

编写动画循环的关键,是要知道延迟时间多长合适。一方面,循环时间必须足够短,这样才能保证动画效果更平滑流畅;另一方面,循环还要足够长,这样才能保证浏览器有能力渲染产生的变化。大多数显示器的刷新频率是60Hz,相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过了这个频率,用户体验也不会有提升。

因此最平滑动画的最佳循环间隔是1000ms/60,约等于17ms。以这个循环间隔重绘的…

+ 阅读更多

cookie的增删改操作

cookie的接口封装如下:

// 设置cookie
function setcookie(name, value, days) {
    var date=new Date();
    date.setDate(date.getDate()+days);
    document.cookie=name+'='+value+';expires='+date;
}
// 获取cookie
function getcookie(name) {
     var arr=document.cookie.split(';');
+ 阅读更多

HTML5读取拖放的本地文件

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

例子:

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

学习笔记:HTML5的拖放 API

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

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

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

+ 阅读更多

学习笔记:HTML5的File API

File API的宗旨是为Web开发人员提供一种安全的方式,以便在客户端访问用户计算机中的文件,并更好地对这些文件执行操作。

HTML5虽然可以让我们访问本地文件系统,但是文件只有在用户触发了文件读取行为才能读取到File API,这通常在发生在表单文件选择和拖拽的情况下。

一. File API的兼容性

File API在各大主流浏览器中的支持情况如下图所示:

image_1aq4834d3116gcos1gkh156b19m19.png-43kB

备注:图片转载自: http://www.ibm.com/developerworks/cn/web/1210_jiangjj_html5log/

+ 阅读更多

学习笔记:JavaScript数组的语法

一. 获取数组长度

  • array.length

二. 检测数组

方法一:使用instanceof检测:

if(array instanceof Array) {
    // 进行数组操作
}

方法二:使用isArray()方法:

if(Array.isArray(array)) {
    // 进行数组操作
}

三. 转换为字符串

  • toLocaleString()
  • toString()
  • valueOf()

四. 向数组中插入或删除元素

栈方法(Last in First…

+ 阅读更多

Node.js学习笔记:文件的常规操作

Node.js的文件操作部分的官方API文档如下:
https://nodejs.org/api/fs.html

fs模块是文件操作的封装,它提供了文件的读取、写入、更名、删除、遍历目录、链接等POSIX文件系统操作。与其他模块不同的是,fs模块中所有的操作都提供了异步和同步的两个版本,例如读取文件内容的函数有异步的fs.readFile()和同步的fs.readFileSync()。

进行文件操作前,都…

+ 阅读更多

jQuery动态创建元素的事件绑定问题解决方法

最近项目需要,希望能用jQuery实现To Do List的效果。想着这功能应该很简单呀,不就是一个节点的动态增删嘛。刷刷刷的代码就写出来了,如下:

HTML代码:

<ul class="pageList" id="pageList">
</ul>
<span id="addPage" class="addPage">Add</span>
+ 阅读更多

jQuery的Ajax实现方法总结

一. jQuery中Ajax的基本语法

1. Ajax 请求

(1) $.ajax(url,[settings])

通过 HTTP 请求加载远程数据。$.ajax() 返回其创建的 XMLHttpRequest 对象。

  • url:一个用来包含发送请求的URL字符串。
  • settings:AJAX 请求设置。所有选项都是可选的。

如果要处理$.ajax()得到的数据,则需要使用回调函数。回调函数主要有以下4个:

  • 1) beforeSend:在发送请求之前调用,并
+ 阅读更多

JavaScript阻止表单提交

在JavaScript中,阻止表单默认提交行为的方法有两种,分别是:

(1) return false

<form name="loginForm" action="login.aspx" method="post">
    <button type="submit" value="Submit" id="submit">Submit</button>
+ 阅读更多

正则表达式 学习笔记整理

一. 正则表达式语法

1. 元字符

1.1 匹配字符

元字符 说明
. 匹配除换行符以外的任意字;
\w 匹配字母、数字、下划线或行字
\W 匹配任意非字母、数字、下划线或汉字的字符
\s 匹配任意的空白符
\S 匹配任意非空白符的字符
\d 匹配数字
\D 匹配任意非数字的字符

1.2 匹配位置

元字符 说明
\b 匹配单词的开始或结束
\B 匹配不是单词开口或结束的位置
^ 匹配字符串的开始
\$ 匹配字符串的结束
\G 上一个匹配的结尾(本次匹配开始)
\A 字符串开头(类
+ 阅读更多

HTML5 拖放API 学习笔记整理

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

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

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

+ 阅读更多

缓动函数 学习笔记

大一的时候就知道有缓动函数这种东东(这种炫酷的特技是促使我后来走上IT路的原因之一,~( ╯□╰ )~),但是当时语法不通而且觉得公式推导太深奥了,未详学。最近在整理缓动动画的实现方式,看了古松师兄写的《缓动公式小析》,于是,便决定整理一下Web前端中使用的缓动函数知识,方便以后调用。

一. 缓动函数效果种类

【备注:其中 f(x) 表示动画进度,t 表示时间。】

Linear:无缓动效果,f(t) = t;

Quadratic:二次方…

+ 阅读更多

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属性可以大大…

+ 阅读更多

JavaScript动画详解(一) —— 循环与事件监听

其实Web动画的实现原理跟早期的运动影片很类似,都是通过将一张张的赛璐珞片以较快速度播放,从而模拟出连贯的物体运动。而这一张张的赛璐珞片就类似于投影运动媒体的帧的概念,而几乎所有投影运动媒体都是通过帧来实现的。

动画循环

几乎所有的程序动画都会表现为某种形式的循环,我们会创建一个展现一系列图像的流程图以实现逐帧动画,其中每一帧只需要绘制出来即可。

为了实现动画,需要为每一帧执行以下操作:

1 . 执行该帧…

+ 阅读更多