html2canvas

JavaScript library
var dwsnapshot = function(){ var ele = document.querySelector('.content-wrap'); html2canvas(ele,{ // width: 800, scale: 2, }).then(function(c) { var aNode = document.createElement('a'); aNode.href = c.toDataURL("png", 1); //别忘了设置download属性,否则会...
READ MORE

JavaScript Array

JavaScript
数组是一种数据结构,内含一组有序元素.在js中,数组也是对象 参考 Object.prototype.toString方法的原理 紫云飞 How can I shuffle an array? stackoverflow 获取两个数间的随机数 stackoverflow 速查表 实例化(创建)数组 有两种方式创建数组 1 通过Array构造函数创建数组 new Array() new Array(length | element1, element2...) //不传入参数,返回空数组 var arr = new Array(); console.log(arr) //[] /...
READ MORE

jQuery入门

jQuery
jquery是一个Javascript库.简化了js Dom/CSS/Ajax操作,支持链式表达式/动画.兼容ie6+浏览器,拥有丰富的第三方扩展 参考 jQuery API 中文文档 载入jQuery 本地加载 123<head> <script type="text/javascript" src="jquery-3.2.1.js"></script></head cdn加载 12<!--使用Microsoft CDN加载jQuery--><script type=&quo...
READ MORE

CSS动画

CSS
transition transition: property duration timing-function delay,property2...; 12//宽度 变化时间1s,背景颜色 变化时间0.5s 匀速变化 延迟1s执行transition: width 1s,background 0.5s linear 1s; transition用于设置元素样式改变时的过渡动画效果,是以下4项属性的简写 transition-property 属性名 transition-duration 过渡时间 transition-timing-function 过渡曲线 transition...
READ MORE

基线与vertical-algin

CSS
参考 eep dive CSS: font metrics, line-height and vertical-align vertical-align和line-height的关系 张鑫旭 em框(em square) 字符的em框大小受font-size影响,字符尺寸越大,em框越高. .baseline-0 span { background:#ccc; color: #555; } <p class="baseline-0"> <span style="font-family: Microsof...
READ MORE

CSS选择器

CSS
参考 选择器 MDN 选择器详解 MDN 优先级 MDN css属性选择器 结构 一个标准的CSS规则(rule)结构如下 body { color: yellow; margin: 40px; } 其由两部分组成,选择器(selector) 和声明块(declaration block)."声明块"由许多个"声明"(declaration)组成,写在"选择器"后,被一对大括号包裹. selector {declaration block}; 声明由"属性...
READ MORE

用Babel转换es6代码

JavaScript
Babel是个js编译工具,可以把es6语法转换成es5,从而兼容ie9/10. 参考 Babel 入门教程 阮一峰 怎样设置babel-polyfill babel 官网 babel 中文网 安装 本地安装(windows) #工程文件根目录下,用管理员模式执行 npm install --save-dev babel-cli babel-preset-env # Babel默认只转换语法,如果需要转义Array Promise之类的es6全局变量,需安装polyfill npm install --save-dev babel-polyfill 不建议全局安装,目前有些问题...
READ MORE

unicode字符处理

JavaScript
js的发布时间早于UTF,因此在unicode字符处理上,存在很多问题. 参考 Unicode与JavaScript详解 阮一峰 字符串的扩展 阮一峰 汉字 Unicode 编码范围 es6-features nicode String & RegExp Literal JavaScript has a Unicode problem chinese character regExp 什么是unicode Unicode是一种字符格式,包含世界上的所有字符. 其目的是为了解决传统字符编码的兼容问题,只要支持unicode,就能显示世界上的大部分语言. unicode字符的表...
READ MORE

负外边距的影响

CSS
元素外边距可以为零/正数/负数.我们可以设定外边距为负值,调整元素的位置. 特点 margin-left为负时向左移动,后面的元素也跟着移动 .box-1{width:250px; height:100px; border: 1px solid;} .child-1{float: left;background: #F4F4F5;height:100px;width:100px;} 行内元素也一样 .box-3{width:250px; height:100px; border: 1px solid;} .child-3{} ...
READ MORE

元素居中

CSS
参考 Centering in CSS: A Complete Guide position:absolute和margin:auto连用居中的原理 水平居中 行内(内联)元素水平居中 .box{text-align: center;} .box-1 {width:200px;border:1px solid;} inline element <style> .box-1 {width:200px;border:1px solid;} </style> <div class=&q...
READ MORE