随笔分类 - JavaScript
摘要：在早期的浏览器，输入的事件其实相对单纯，只有考虑到鼠标和键盘两种；而当时的鼠标事件，其实就是 click、mousedown、mouseup 等等的事件。但是当手机、平板开始流行时候，再移动装置上的主要操作界面，已经从鼠标变成是触控了～ 由于触控和鼠标的操作逻辑，算是有根本上的差异的，再加上大部分的
阅读全文
摘要：IE浏览器支持直接读写剪切板内容： 但是这种方式不安全，很容易泄露用户的隐私，所以现在浏览器如chrome都不支持这种方式了。 读取系统剪切板 查了很多资料，如果是粘贴系统剪切板内容，前提是先去读取系统剪切板内容。 获取事件对象：粘贴事件提供了一个clipboardData的属性，如果该属性有ite
阅读全文
摘要：canvas转换为dataURL (从canvas获取dataURL) File对象转换为dataURL、Blob对象转换为dataURL File对象也是一个Blob对象，二者的处理相同。 dataURL转换为Blob对象 dataURL图片数据绘制到canvas 先构造Image对象，src为d
阅读全文
摘要：1.在Firefox浏览器 draggable=false 不起作用的问题 https://stackoverflow.com/questions/26356877/html5-draggable-false-not-working-in-firefox-browser 2. svg在Firefox
阅读全文
摘要：Javascript为数组专门提供了push和pop()方法，以便实现类似栈的行为。来看下面的例子： var colors=new Array(); //创建一个数组 var count=colors.push("red","green"); // 推入两项，返回修改后数组的长度 alert(cou
阅读全文
摘要：这是JQuery的语法，$表示JQuery对象，可以有好几种用法。比如传递选择器字符串、页面对象等，如果直接传函数体进去，表示网页加载完毕后要执行的意思。和JAVASCRIPT原来的这个是一样的： window.onload=function(){ //执行函数} 相当于 $(document).r
阅读全文
摘要：javascript与HTML之间的交互是通过事件来实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。通常大家都会认为事件是在用户与浏览器进行交互的时候触发的，其实通过javascript我们可以在任何时刻触发特定的事件，并且这些事件与浏览器创建的事件是相同的。 通过createEvent
阅读全文
摘要：javascript自定义事件 javascript自定义事件 Javascript中的事件包括click、mouseover、submit、change等等，它们分别在元素被点击、鼠标滑过、表单提交、域的内容改变时触发，那么自定义事件是如何定义和触发的？它有什么意义？ 如何定义？ 自定义事件创建分
阅读全文
摘要：jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) 如果想把内容添加到现有内容末尾，可以利用append()命令。append()命令语法：append(content)把传入的HTML片段或元素追加到所有已匹配元素的内容之后参数content (字符串|元
阅读全文
摘要：隐藏滚动条，已经自己实测在浏览器Chrome, IE (6+), Firefox, Opera, Safari。 如下demo: Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Content 1 Conte
阅读全文
摘要：contentType: 告诉服务器，我要发什么类型的数据 dataType：告诉服务器，我要想什么类型的数据，如果没有指定，那么会自动推断是返回 XML，还是JSON，还是script，还是String。
阅读全文
摘要：1. 第三方接口 1) 这里提供一个搜狐接口的地址：http://pv.sohu.com/cityjson?ie=utf-8 ，将这个js引入到页面即可得到returnCitySN。 2) api.ipify.org https://api.ipify.org/?format=jsonp&callb
阅读全文
摘要：在CSS中总有一些你不用不知道，用到才知道的“坑”。比如今天要谈的，把 before, after 伪类用在 <img> 标签上。嗯，实际上你用你会发现，在大多数浏览器这是无效的，dom中并不会出现你想要的结果。为什么会这样呢？让我们回归到 W3C 标准中寻觅一下，在标准中，before, afte
阅读全文
摘要：chrome浏览器默认处理文件的方式来处理拖放的文件，能显示的会直接显示，不能显示的会变成资源下载。在Html元素上，我们可以通过ondragover和ondrop两个事件来处理文件拖放，那么和阻止其他事件行为的方法一样，我们只需要进行监听并阻止默认事件处理程序就可以了。 1 document.ondragover = function (e) { 2 e.preventDefaul...
阅读全文
摘要：砖墙布局 具体原理，参考了腾讯砖墙布局的思路：http://isux.tencent.com/high-equal-response-layout-html.html 等高布局效果图： 如图，并不像等宽一样简单，要在不改变图片分辨率(宽高比)同时保持等高且占满行宽度，如何实现？不妨带着问题跟我走。
阅读全文
摘要：清空canvas画布内容 1、重置宽或高 由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空：（此方法仅限需要清除全部内容的情况） var c=document.getElementById("myCanvas"); c.width=c.width; 2、clearR
阅读全文
摘要：AxeSlide软件项目梳理 canvas绘图系列知识点整理 以下代码是typescript语言来写的，其实和es6面向对象的写法基本一致。大家阅读后都明白这些方法的作用。 hash hash结构用于处理和表现类似key/value的键值对，其中key通常可用来快速查找，同时key是区分大小写；va
阅读全文
摘要：ES6 简介 ECMAScript 6 简称 ES6，是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 ECMAScript 和 JavaScript 的关系：前者是后者的语法规
阅读全文
摘要：DOM树和渲染树 当浏览器下载完所有页面HTML 标记，JavaScript，CSS，图片之后，它解析文件并创建两个内部数据结构：一棵DOM树表示页面结构，一棵渲染树表示DOM节点如何显示。 渲染树中为每个需要显示的DOM 树节点存放至少一个节点（隐藏DOM 元素在渲染树中没有对应节点）。渲染树上的
阅读全文
摘要：1. 使用百分比设置宽高 自适用宽高的，有分割的区域，可以适用百分比：30% 70% 如果有一部分是固定的宽度或者高度，可以使用：height: calc( 100% - 36px ); 2. input进度条 <input type="range" value=0 style=""> 进度条，可以
阅读全文
