H5核心技术---canvas实现刮刮卡
摘要：<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title></title> <style> * { margin:
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <canvas id="canvas" width="" height=""></canvas> </body> <script t
阅读全文
摘要：###将画布导出为图像 toDataURL(注意是canvas元素接口上的方法) ###事件操作 ctx.isPointInPath(x, y) 判断在当前路径中是否包含检测点 x:检测点的X坐标 y:检测点的Y坐标 注意，此方法只作用于最新画出的canvas图像
阅读全文
摘要：###全局透明度的设置 globalAlpha = value 这个属性影响到 canvas 里所有图形的透明度， 有效的值范围是 0.0 （完全透明）到 1.0（完全不透明） 默认是 1.0 ###覆盖合成 source:新的图像(源) destination:已经绘制过的图形(目标) globa
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; over
阅读全文
摘要：###在canvas中的像素操作 到目前为止，我们尚未深入了解Canvas画布真实像素的原理，事实上， 你可以直接通过ImageData对象操纵像素数据，直接读取或将数据数组写入该对象中 ###得到场景像素数据 getImageData():获得一个包含画布场景像素数据的ImageData对像,它代
阅读全文
摘要：###在canvas中绘制文本 canvas 提供了两种方法来渲染文本: fillText(text, x, y) 在指定的(x,y)位置填充指定的文本 strokeText(text, x, y) 在指定的(x,y)位置绘制文本边框 ###文本样式 font = value 当前我们用来绘制文本的
阅读全文
摘要：###在canvas中插入图片(需要image对象) 1.canvas操作图片时，必须要等图片加载完才能操作 2.drawImage(image, x, y, width, height) 其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { background-colo
阅读全文
摘要：###canvas中的变换 translate(x, y) 我们先介绍 translate 方法，它用来移动 canvas的原点到一个不同的位置。 translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量， 在canvas中translate是累加的 rotate(angle) 这个
阅读全文
摘要：###角度与弧度的js表达式:radians=(Math.PI/180)*degrees。 ###canvas绘制圆形 arc(x, y, radius, startAngle, endAngle, anticlockwise) 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从star
阅读全文
摘要：###二次贝塞尔 quadraticCurveTo(cp1x, cp1y, x, y) 绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。 起始点为moveto时指定的点 ###三次贝塞尔 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 绘制
阅读全文
摘要：/* 1.路径容器 每次调用路径api时,都会往路径容器里做登记 调用beginPath时,清空整个路径容器 2.样式容器 每次调用样式api时,都会往样式容器里做登记 调用save时候,将样式容器里的状态压入样式栈 调用restor时候,将样式栈的栈顶状态弹出到样式样式容器里,进行覆盖 3.样式栈
阅读全文
摘要：###canvas绘制路径 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。 ###步骤 1.首先，你需要创建路径起始点。 2.然后你使用画图命令去画出路径 3.之后你把路径封闭。 4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。 ###绘制三角形
阅读全文
摘要：###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形： >绘制一个填充的矩形（填充色默认为黑色） fillRect(x, y, width, height) >绘制一个矩形
阅读全文
摘要：canvas基本用法 1.什么是canvas(画布) <canvas> 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形 例如，它可以用于绘制图形，创建动画。<canvas> 最早由Apple引入WebKit 我们可以使用<canvas>标签来定义一个canvas元素
阅读全文
摘要：###语义化标签 在HTML 5出来之前，我们用div来表示页面头部，章节，页脚等。但是这些div都没有实际意义。 各大浏览器厂商分析了上百万的页面，从中发现了DIV名称的通用id名称大量重复。例如，很多开发人员喜欢使用 div id="footer"来标记页脚内容，所以Html5元素引入了语义化标
阅读全文
摘要：DOCTYPE描述了html文档的类型，对不同的DOCTYPE类型，浏览器会使用不同的方法来解析。 没有 <!DOCTYPE html> 会以怪异模式来渲染页面 在ie9往上的浏览器中,三种模式在渲染方面几乎没有区别 在ie 7 8 9中,理论上存在怪异模式,实际只有标准模式 在ie6中,标准模式和
阅读全文
摘要：###1.什么是attribute，什么是property html标签的预定义和自定义属性我们统称为attribute js原生对象的直接属性，我们统称为property ###2.什么是布尔值属性，什么是非布尔值属性 property的属性值为布尔类型的 我们统称为布尔值属性 property的
阅读全文
摘要：参考https://www.layui.com/doc/modules/laydate.html#theme
阅读全文
摘要：学习参考 jQuery UI中文网 https://www.jqueryui.org.cn/demo/
阅读全文
摘要：一、导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="<%=path %>/validate
阅读全文
摘要：定义和用法 delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。 语法 $(selector).delegate(childSel
阅读全文
摘要：mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave 当鼠标移动到元素上时就会触发mouseenter事
阅读全文
摘要：1. 事件绑定(2种)： * eventName(function(){}) 绑定对应事件名的监听, 例如：$('#div').click(function(){}); * on(eventName, funcion(){}) 通用的绑定事件监听, 例如：$('#div').on('click',
阅读全文
摘要：contenteditable 属性是 HTML5 中的新属性，所有的主流浏览器都支持 contenteditable 属性。 contenteditable 属性规定了元素内容是否可编辑。 * 如果元素未设置contenteditable 属性，那么元素会从其父元素继承该属性。 语法： <elem
阅读全文
摘要：1.html5自定义属性及基础 html5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相应的id: 复制代码代码如下: <a href="javascript:;" data-id="2312">测试</a> 这里的data-前缀就被称为
阅读全文
摘要：classList里面包含了add,remove,contains,toggle这四个调用方法，具体用法如下： <div id='div1' class='c1'> </div> classList.add()为添加一个class类名，如： div1.classList.add('c2'); 得到结
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06_Web Workers_测试</title> </head> <body> <!-- 1. H5规范提供了js分线程的实现, 取名为: Web Worke
阅读全文
摘要：1 原型链继承 核心：让子类的原型指向父类的实例 ChildType.prototype = new ParentType() // 所有涉及到原型链继承的继承方式都要修改子类构造函数的指向，否则子类实例的构造函数会指向PerentType。 ChildType.prototype.construc
阅读全文
摘要：// es5中的类 // 1.最简单的类 function Person(){ this.name = 'zhangsan'; this.age = 18; } var p = new Person(); console.log(p.anme); // 2.构造函数和原型链里面增加方法 functi
阅读全文
摘要：内存溢出和内存泄漏 内存溢出：是一种程序运行时出现的错误；当程序运行时需要的内存超过了剩余的内存时，就会抛出内存溢出的错误。 1 2 3 4 var obj = {} for(let i = 0;i < 1000000;i++){ obj[i] = new Array(1000000) } 个人理解
阅读全文
摘要：Javascript闭包（Closure） 闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。 一、变量的作用域 要理解闭包，首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种：全局变量和局部变量。 Javascript
阅读全文
摘要：深入理解JavaScript作用域和作用域链 作用域(Scope) 1. 什么是作用域 作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。可能这两句话并不好理解，我们先来看个例子： function outFun2() { va
阅读全文
摘要：1. 变量提升 ES6之前我们一般使用var来声明变量，提升简单来说就是把我们所写的类似于var a = 123;这样的代码，声明提升到它所在作用域的顶端去执行，到我们代码所在的位置来赋值。 function test () { console.log(a); //undefined var a =
阅读全文
摘要：1. 读取对象的属性值时: 会自动到原型链中查找 2. 设置对象的属性值时: 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值 3. 方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上
阅读全文
摘要：1. 原型链 * 访问一个对象的属性时， * 先在自身属性中查找，找到返回 * 如果没有, 再沿着__proto__这条链向上查找, 找到返回 * 如果最终没找到, 返回undefined * 别名: 隐式原型链 * 作用: 查找对象的属性(方法)
阅读全文
摘要：1. 每个函数function都有一个prototype，即显式原型 2. 每个实例对象都有一个__proto__，可称为隐式原型 3. 对象的隐式原型的值为其对应构造函数的显式原型的值 4. 内存结构(图) 5. 总结: * 函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空
阅读全文
摘要：1. 函数的prototype属性 * 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象) * 原型对象中有一个属性constructor, 它指向函数对象 2. 给原型对象添加属性(一般都是方法) * 作用: 函数的所有实例对象自动拥有原型中的属性(方
阅读全文
摘要：1. this是什么? * 一个关键字, 一个内置的引用变量 * 在函数中都可以直接使用this * this代表调用函数的当前对象 * 在定义函数时, this还没有确定, 只有在执行时才动态确定(绑定)的 2. 如何确定this的值? * test() * obj.test() * new te
阅读全文
摘要：1. 理解 * 全称: Immediately-Invoked Function Expression 立即调用函数表达式 * 别名: 匿名函数自调用 2. 作用 * 隐藏内部实现 * 不污染外部命名空间 <!DOCTYPE html> <html lang="en"> <head> <meta c
阅读全文
摘要：1. 什么函数才是回调函数? * 你定义的 * 你没有直接调用 * 但最终它执行了(在特定条件或时刻) 2. 常见的回调函数? * DOM事件函数 * 定时器函数 * ajax回调函数(后面学) * 生命周期回调函数(后面学) <!DOCTYPE html> <html lang="en"> <he
阅读全文
摘要：1. 什么是函数? * 具有特定功能的n条语句的封装体 * 只有函数是可执行的, 其它类型的数据是不可执行的 * 函数也是对象 2. 为什么要用函数? * 提高代码复用 * 便于阅读和交流 3. 如何定义函数? * 函数声明 * 表达式 4. 如何调用(执行)函数? * test() * new t
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03_相关问题</title> </head> <body> <!-- 问题: 什么时候必须使用['属性名']的方式? * 属性名不是合法的标识名 * 属性名不
阅读全文
摘要：1. 什么是对象? * 代表现实中的某个事物, 是该事物在编程中的抽象 * 多个数据的集合体(封装体) * 用于保存多个数据的容器 2. 为什么要用对象? * 便于对多个数据进行统一管理 3. 对象的组成 * 属性 * 代表现实事物的状态数据 * 由属性名和属性值组成 * 属性名都是字符串类型, 属
阅读全文
摘要：JS引擎如何管理内存? 1. 内存生命周期 1). 分配需要的内存 2). 使用分配到的内存 3). 不需要时将其释放/归还 2. 释放内存 * 为执行函数分配的栈空间内存: 函数执行完自动释放 * 存储对象的堆空间内存: 当内存没有引用指向时, 对象成为垃圾对象, 垃圾回收器后面就会回收释放此内存
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_数据_变量_内存</title> </head> <body> <!-- 1. 什么是数据? * 存储于内存中代表特定信息的'东东', 本质就是0101二
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01_相关问题</title> </head> <body> <!-- 1. undefined与null的区别? * undefined代表没有赋值 * nu
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01_数据类型</title> </head> <body> <!-- 1. 分类(2大类) * 基本(值)类型 * Number: 任意数值 * String
阅读全文
摘要：* json --> js对象 * JSON.parse() * - 可以将以JSON字符串转换为js对象 * - 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回 * JS对象 > JSON * JSON.stringify() * - 可以将一个JS对象转换为JSON字符串 *
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .b1{ width: 100px; height: 100px; background-color: red;
阅读全文
摘要：//尝试创建一个可以执行简单动画的函数 /* * 参数： * obj:要执行动画的对象 * attr:要执行动画的样式，比如：left top width height * target:执行动画的目标位置 * speed:移动的速度(正数向右移动，负数向左移动) * callback:回调函数，这
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var num = 1; //开启一个定时器 /*setInterval(function(){
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //获取count var count =
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * Location * - 该对象中封装了浏览器的地址栏的信息 */ window.onl
阅读全文
摘要：/* * History * - 对象可以用来操作浏览器向前或向后翻页 */ window.onload = function(){ //获取按钮对象 var btn = document.getElementById("btn"); btn.onclick = function(){ /* * l
阅读全文
摘要：/* * BOM * - 浏览器对象模型 * - BOM可以使我们通过JS来操作浏览器 * - 在BOM中为我们提供了一组对象，用来完成对浏览器的操作 * - BOM对象 * Window * - 代表的是整个浏览器的窗口，同时window也是网页中的全局对象 * Navigator * - 代表的
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* * 键盘事件： * onkeydow
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red
阅读全文
摘要：window.onload = function () { var box1 = document.getElementById("box1"); drag(box1); }; /** * 专门用来拖拽的方法，参数为拖拽元素的ID */ function drag(obj) { //当鼠标在被拖拽元
阅读全文
摘要：* 事件的传播 * - 关于事件的传播网景公司和微软公司有不同的理解 * - 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件， * 然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。 * - 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function(){ var u1 = document.g
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* * 点击按钮以后弹出一个内容 */
阅读全文
摘要：- 事件的冒泡（Bubble） - 事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。 - 事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消 - 可以将事件对象的cancelBubble设置为true，即可取消冒泡 - 例子
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red
阅读全文
摘要：- 事件对象 - 当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中， 这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。。 - 可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为
阅读全文
摘要：window.onload = function(){ document.querySelector("p").onscroll = function(){ // 滑动的距离 var n = this.scrollTop; //2304 // 滑动元素的总高度 var v = this.scroll
阅读全文
摘要：注意：以下样式都是只读的 元素.clientHeight - 元素的可见高度，指元素的内容区和内边距的高度 元素.clientWidth - 元素的可见宽度，指元素的内容区和内边距的宽度 元素.offsetHeight - 整个元素的高度，包括内容区、内边距、边框 元素.offfsetWidth -
阅读全文
摘要：- 正常浏览器 - 使用getComputedStyle() - 这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式 - 参数： 1.要获取样式的元素 2.可以传递一个伪元素，一般传null - 例子： 获取元素的宽度 getComputedStyle(box ,
阅读全文
摘要：语法：元素.style.样式名 - 例子： 元素.style.width 元素.style.height - 注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法 将-去掉，然后-后的字母改大写 - 比如：background-color --> backgroundColor border-w
阅读全文
摘要：confirm()用于弹出一个带有确认和取消按钮的提示框 需要一个字符串作为参数，该字符串将会作为提示文字显示出来 如果用户点击确认则会返回true，如果点击取消则返回false var flag = confirm("确认删除" + name + "吗?");
阅读全文
摘要：document.createElement() - 可以根据标签名创建一个元素节点对象 document.createTextNode() - 可以根据文本内容创建一个文本节点对象 父节点.appendChild(子节点) - 向父节点中添加指定的子节点 父节点.insertBefore(新节点,
阅读全文
摘要：document.all - 获取页面中的所有元素，相当于document.getElementsByTagName("*"); document.documentElement - 获取页面中html根元素 document.body - 获取页面中的body元素 document.getElem
阅读全文
摘要：- 通过具体的元素节点来查询 - 元素.getElementsByTagName() - 通过标签名查询当前元素的指定后代元素 - 元素.childNodes - 获取当前元素的所有子节点 - 会获取到空白的文本子节点 - childNodes属性会获取包括文本节点在呢的所有节点 - 根据DOM标签
阅读全文
摘要：/* * 定义一个函数，专门用来为指定元素绑定单击响应函数 * 参数： * idStr 要绑定单击响应函数的对象的id属性值 * fun 事件的回调函数，当单击元素时，该函数将会被触发 */ function myClick(idStr , fun){ var btn = document.getE
阅读全文
摘要：- 浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。 - 如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载， 此时将会无法正常获取到DOM对象，导致DOM操作失败。 - 解决方式一： - 可以将js代码编写到body的下边 <body> <button
阅读全文
摘要：- DOM操作 - DOM查询 - 在网页中浏览器已经为我们提供了document对象， 它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。 - document查询方法： - 根据元素的id属性查询一个元素节点对象： - document.getElementById("id属
阅读全文
摘要：- Document Object Model - 文档对象模型，通过DOM可以来任意来修改网页中各个内容 - 文档 - 文档指的是网页，一个网页就是一个文档 - 对象 - 对象指将网页中的每一个节点都转换为对象 转换完对象以后，就可以以一种纯面向对象的形式来操作网页了 - 模型 - 模型用来表示节
阅读全文
