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

分类:JavaScript

光标位置工具函数的实现

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

*   (2)selectRange.getCurPos()
+ 阅读更多

学习笔记:Blob对象

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

继承Blob功能的API有:

  • File对象:负责处理那些以文件形式存在的二进制数据,也就是操作本地文件;
+ 阅读更多

javascript获取以及设置光标位置

一. 获取光标位置:

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

学习笔记:Video和Audio API

一. 媒体元素

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

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

这两个元素的用法如下:

<!-- 嵌入视频 -->
<video src="test.mp4">Video player not
+ 阅读更多

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

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

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

+ 阅读更多

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/

+ 阅读更多

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)
+ 阅读更多

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

需求:

模拟球形的脉冲运动

小球的构造函数如下:

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

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

一. 需求:

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

小球的构造函数如下:

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

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

一. 需求:

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

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

// 箭头绘制的构造函数
+ 阅读更多

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

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

三角函数

  • Math.sin():正弦函数
+ 阅读更多

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

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

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

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

element.addEventListener(type,
+ 阅读更多

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,
+ 阅读更多

谈谈requestAnimationFrame的动画循环

一. 动画的循环间隔

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

+ 阅读更多

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
+ 阅读更多

HTML5读取拖放的本地文件

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

+ 阅读更多

学习笔记:HTML5的拖放 API

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

+ 阅读更多

学习笔记:HTML5的File API

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

HTML5虽然可以让我们访问本地文件系统,但是文件只有在用户触发了文件读取行为才能读取到File…

+ 阅读更多

学习笔记:JavaScript数组的语法

一. 获取数组长度

  • array.length

二. 检测数组

方法一:使用instanceof检测:

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

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

if(Array.isArray(array)) {
    // 进行数组操作
+ 阅读更多

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

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

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

+ 阅读更多

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

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

HTML代码:…

+ 阅读更多

jQuery的Ajax实现方法总结

一. jQuery中Ajax的基本语法

1. Ajax 请求

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

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

  • url:一个用来包含发送请求的URL字符串。
+ 阅读更多

JavaScript阻止表单提交

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

(1) return false

<form name="loginForm" action="login.aspx" method="post">
    <button 
+ 阅读更多

正则表达式 学习笔记整理

一. 正则表达式语法

1. 元字符

1.1 匹配字符

元字符 说明
. 匹配除换行符以外的任意字;
\w 匹配字母、数字、下划线或行字
\W 匹配任意非字母、数字、下划线或汉字的字符
+ 阅读更多

HTML5 拖放API 学习笔记整理

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

+ 阅读更多

缓动函数 学习笔记

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

+ 阅读更多

JavaScript用户交互:移动物体

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

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

+ 阅读更多

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

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

+ 阅读更多

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

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

+ 阅读更多

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

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

+ 阅读更多