案例

一.别踩白块
1.创建showPage方法，建立一个五行五列的二维空数组，每行五列集合类名称为child，将每个child使用push（在数组末端加入元素）.
showPage:function(){
for(var i=0;i<this.H;i++){
this.arraylist.push([]);
for(var k=0;k<this.V;k++){
var child=document.createElement(“div”);
child.className=“child”;
this.arraylist[i].push(child);
}
}
},
2.创建showEle方法将每行五个child元素加入到par_child类中，创建randomIndex方法产生随机数，每行随机产生一个黑色块.
if(kr&&i<4){
child.style.background=“black”;
this.blackdiv.unshift(child);
}
else{
child.style.background=“white”;
}
showEle:function(){
var that=this;
that.arraylist.forEach(function(a,b){
var par_child=document.createElement(“div”)
par_child.className=“par_child”;
a.forEach(function(a1, b1){
par_child.appendChild(a1,b1);
});
that.block.appendChild(par_child);
})
},
randomIndex:function(){
return Math.floor(Math.random()*this.V);
},
3.创建addEvent方法创建点击事件：当点击随机黑块时使用shift（在数组首部移除元素）使黑块变为白块，当黑色块移除完使用rerun跳出.
addEvent:function(){
var that=this;
//当没有黑块时跳出
if(!that.blackdiv.length) return;
if(!this.isstart){
that.blackdiv[0].innerHTML=“开始”;
}
that.blackdiv[0].οnclick=function(){
that.isstart=true;
this.style.background=“white”
that.blackdiv.shift();
that.addEvent();
}
}
4.创建sendEle方法将整个二维集合进行上下传递，再使用randomfirstH方法重新建立一个空div继续重新产生一个黑色块，在sendEle方法中
重新调用showEle方法，使得集合再次创建，在addEvent中调用sendEle，这样就会有不断地黑块产生.
sendEle: function () {
var len = this.arraylist.length - 1;
for (var i = len; i > 0; i–) {
this.arraylist[i] = this.arraylist[i - 1];
}
this.randomfirstH();
this.showEle();
},
randomfirstH: function () {
this.arraylist[0] = [];
var r = this.randomIndex();
for (var i = 0; i < this.V; i++) {
var child = document.createElement(“div”);
child.className = “child”;
if (ir) {
child.style.background = “black”;
this.blackdiv.push(child);
}
else {
child.style.background = “white”;
}
this.arraylist[0].push(child);
}
}
5.创建gamestart方法，通过timenow与game.oldtime的差值，进行操作动画效果.
gamestart: function () {
if (game.isstart) {
var timenow = new Date().getTime();
if (timenow - game.oldtime >= game.time) {
game.sendEle();
game.oldtime = timenow;
timenow = null;
}
game.addEvent();
}
window.requestAnimationFrame(game.gamestart);
}
6.在前面addEvent的方法下对点击黑块进行记分，对游戏进行速度进行叠加.
if(this.style.backgroundColor==“black”){
that.scorehtml.innerHTML=that.score;
that.score+=100;
console.log(that.score);
that.time-=10;
console.log(that.time);
if(that.time<=100){
that.time=100;
}
}
7.创建selectwhite的方法产生对点击白色块时停止游戏以及对白色块变红色块的警告.
selectwhite: function () {
var that = this;
for (var i = 0; i < that.H; i++) {
for (var k = 0; k < that.V; k++) {
if (that.arraylist[i][k].style.backgroundColor == “white”) {
that.arraylist[i][k].onclick = function () {
this.style.background = “red”;
that.isstart = false;
}
}
}
}
},
8.创建selectlastblack方法当黑块出界时停止游戏.
selectlastblack: function () {
for (var i = 0; i < this.arraylist[4].length; i++) {
if (this.arraylist[4][i].style.backgroundColor == “black”) {
this.isstart = false;
}
}
},
二.左右图片滚定轮播
1.创建cs样式
2.创建方法setInterval（无限次动画）将图片的父容器photo进行轮播，通过count++、count++对图片的marginleft进行轮播，并判断当count
值小于photolist最大长度-1时重新回到第一张图片上，（会出现一张单独的白色）多增加第一张图片，让最后一张过渡直接停到第一张.
var photo=document.getElementsByClassName(“photo”)[0];
var count=0;
setInterval(function(){
count++;
if(count>photo.children.length-1){
count=0;
}
photo.style.marginLeft=(-600count)+“px”
},1000)
3.当图片轮播时对应红色的圆块，当图片轮播完一次，将count值再次赋为0；
circle[0].style.background=“red”;
circle[count].style.background=“white”;
count++;
circle[count>photo.children.length-2?0:count].style.background=“red”;
transition:background-color 0.3s linear ;
4.创建鼠标离开和进入block事件，当鼠标进入block图片轮播停止，当鼠标离开block图片轮播继续.
block.οnmοuseenter=function(){
clearInterval(time);
console.log(14);
};
block.οnmοuseleave=function(){
time=setInterval(function(){
circle[count].style.background=“white”;
count++;
circle[count>photo.children.length-2?0:count].style.background=“red”;
photo.className=“photo trans”;
photo.style.marginLeft=(-600count)+“px”;
setTimeout(function(){
if(count>photo.children.length-2){
count=0;
photo.className=“photo”;
photo.style.marginLeft=“0px”
}
},500)
},1000);
};
5.给每个点添加事件，当悬停在某一个点上时，切换到该点对应的图片上并且背景色变为红色，之前的点背景会变为白色.
for(var i=0;i<circle.length;i++){
circle[i].index=i;
circle[i].οnmοuseenter=function(){
circle[count].style.background=“white”;
this.style.background=“red”;
photo.style.marginLeft=-600*this.index+“px”;
count=this.index;
}
}
语法：
1.别踩白块：
push（）：在数组末端加入元素
pop（）：在数组末端删除元素
shift（）：在数组首部移除元素
unshift（）:在数组首部加入元素
foreach（）：调用数组中的每个元素
requestAnimationFrame（）：根据浏览器内建的刷新频率来执行回调
get.time（）：返回从 1970 年 1 月 1 日至今的毫秒数
2.左右图片滚定轮播：
clearInterval（）:取消setInterval()方法设置的定时器