文字全屏化和动画效果的实现

全屏化

全屏化只有用户自己触发才会实现，如果不绑定事件无法实现

document.onclick = function(){

title.webkitRequestFullScreen(); //谷歌等内核

title.mozRequestFullScreen(); //火狐内核

}

以下是全屏的方法

var el = document.documentElement;

var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;

if (typeof rfs != "undefined" && rfs) {

rfs.call(el);

} else if (typeof window.ActiveXObject != "undefined") {

var wscript = new ActiveXObject("WScript.Shell");

if (wscript != null) {

wscript.SendKeys("{F11}");

}

}

使用帧动画

动画可以用 ’ setInterval ’ 或 ’ timeout ’ 的自调实现，也可以用帧动画 ’ requestAnimationFrame ’ 实现(当然，还有canvas动画效果的实现，这里不谈)

这里是部分script代码：

““

var canvas = document.getElementById(‘canvas’);

var cxt = canvas.getContext(‘2d’);

// 创建小球对象

var ball = {
x: 50,
y: 50,
r: 30,
speedX: 5,
speedY: 2,
draw: function(){
cxt.beginPath();
cxt.arc(this.x,this.y,this.r,0,Math.PI*2,false);
cxt.closePath();
cxt.fill();
},
move: function (){
this.x += this.speedX;
this.y += this.speedY;

if(this.x >= 500-this.r || this.x <= this.r) {this.speedX *= -1;}
if(this.y >= 500-this.r || this.y <= this.r){this.speedY *= -1;}
}
}
````

setInterval 实现动画效果，定时器实现动画效果是通过设置间隔时间来实现的，每隔多少毫秒移动坐标

““

setInterval(function(){

cxt.clearRect(0,0,500,500);

ball.draw();

ball.move();

},10);

““

timeout 本意是 setInterval 的延迟效果，但我们可以通过它的自调实现动画

// 使用timeout实现interval的功能，实际上就是自己调用自己

function gameloop(){

cxt.clearRect(0,0,500,500);

ball.move();

ball.draw();

setTimeout(gameloop,10);

}

gameloop();

requestAnimationFrame 帧动画，帧动画的实现，保证每隔一帧执行一次。两次执行中间的时间间隔不确定，由电脑的性能实现，人眼在16帧每秒以上才会觉得连贯。

注意：帧动画可以通过利用 ’ 取余运算 ’ 实现事件多少帧执行一次，取消动画的方式和 interval 、 timeout 一样，都有单独的方法，都有把返回值做参数

““

function gameloop(){

cxt.clearRect(0,0,500,500);

ball.move();

ball.draw();

window.requestAnimationFrame(gameloop);

}
gameloop();

// 取消帧动画
document.onclick = function(){
window.cnacelAnimationFrame(a);
}

““

多个setInterval的清除

如果我们有多个timer，那么清除的时候我们是否需要使用clearInterval进行一个个的清除呢？

相信大家都有答案，如果多个定时器的清除我们需要多个clearIntervval的话，会造成代码的冗余，一点都不简练。

这里我介绍一种清除全部定时器的方法，通过遍历可以实现全部定时器的清除

““

var timer1 = setInterval(function(){

console.log(‘timer1’);

},300);

var timer2 = setInterval(function(){

console.log(‘timer2’);

},300);

var timer3 = setInterval(function(){

console.log(‘timer3’);

},300);

window.onclick = function(){
for(var i =0 ; i < 4; i++){
clearInterval(i);
}
}

““