CSS3 transform
rotate 旋转
translate 平移
scale 缩放
skew 扭曲
rotate 深入
rotate() Z轴
rotateX() X轴
透视效果
perspective(px) 透视的强度
数值越小越明显
推荐范围: 800-1200
切记：
transform一定要加初始值
translate
translate(x,y) x轴和y轴方向平移
Z轴平移
translateZ()
开启3D模式
transform-style: preserve-3d;
开启3D模式，一般加给父级
perspective一般加给父级
例子1：
3D正反面
父级
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s all ease;
-webkit-transform: perspective(800px) rotateY(0deg);
子级
正面
-webkit-transform: translateZ(1px);
反面
-webkit-transform: translateZ(-1px) scale(-1,1);
例子2：
3d盒子(立方体)
父级
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s all ease;
-webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg);
子级
front translateZ(1px);
back translateZ(-1px);
left translate(-150px,0) rotateY(-90deg);
right translate(150px,0) rotateY(90deg);
top translate(0,-150px) rotateX(90deg);
bottom translate(0,150px) rotateX(-90deg);
定时器并不稳定
当transition走完执行的事件
transitionend 必须用事件绑定加
翻书效果
翻书
iNow oBox oFront oBack oPage2
0 1 1 2 2
1 2 2 3 3
2 3 3 1 1
3 1 1 2 2
4 2 2 3 3
5 3 3 1 1
6 1 1 2 2
iNow%3+1
(iNow+1)%3+1
爆炸
反转
字符串对象
str.charAt()
str.indexOf()
str.lastIndexOf()
str.substring()
str.split()
str.toUpperCase()
str.toLowerCase()
数组对象
arr.push()
arr.pop()
arr.unshift()
arr.shift()
arr.splice()
arr.join()
arr.concat()
arr.reverse()
arr.sort()
Math 对象
Math.random() 获取0-1的随机小数，绝对不包括1
取整
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 四舍五入
其他
Math.pow() n次方 幂
Math.pow(3,2) 3的2次方
Math.sqrt() 开方
Math.max(10,30,0,100,25) 最大值
Math.min() 最小值
Math.abs() 绝对值
三角函数
Math.PI π
Math.sin()
Math.cos()
Math.atan2()
function rnd(n,m){
return parseInt();
}
i的问题
1. 循环中加事件，事件中使用i
2. 循环中加定时器，定时器中使用i
函数
i值问题怎么解决?
封闭空间、自执行函数、闭包
传统语言
c语言
申请空间(1000)
...用
free(1000)
内存泄露
内存溢出
垃圾回收机制 生命周期 生存周期
局部 很短 函数调用完成后，里面的局部变量会消失
全局 很长 关闭页面的时候
闭包 可长可短
只要里面的函数还有用，函数中局部变量就不会消失
只要里面的函数还有用，函数中所有的局部变量就不会消失
只要里面的函数还有用，那整条作用域链上的变量就不会消失
function show(){
var a = 12;
}
调用前 没有a
show(); 调用中 有a
调用后 没有a
function show(){
var a = 12;
document.onclick = function(){
alert(a);
};
}
调用前 没有a
show() 调用中 有a
调用后 有a
function show(){
var a = 12;
var b = 5;
document.onclick = function(){
alert(a);
};
}
调用前 没有a，没有b
show() 调用中 有a，有b
调用后 有a，有b
var a = 12;
function show(){
var b = 5;
function show2(){
var c = 3;
document.onclick = function(){
alert(a);
};
}
show2();
}
作用域链:现在自身找，如果没有，找父级，如果在没有再往上找。直到找到全局。
闭包是什么?
递归
函数调用自己，只是递归的一种形式
大事化小
1. 兔子不吃东西，不会死
2. 兔子可以近亲繁殖
3. 小兔子，三个月长大
1 2 3 4 5 6 7 8 9 10 11 12
1 1 2 3 5 8 13 21 34 55 89 144
12 144 1440
24 46368 463680
36 14930352 149303520
48 4807526976 48075269760
斐波那契数列
斐波那契算法
兔子数列
99乘法表