小蜜蜂这么经典的游戏,相信大家在FC红白机里面肯定玩过,你或许忘记了这个游戏的名字,但我相信你若干年之后重新看回这个游戏,一定会唤起童年记忆。这游戏看起来很复杂,但是用JavaScript也可以轻轻松松把它写出来。就像上次的《【JavaScript】贪吃蛇》(点击打开链接)一样,关键是解决好几个核心问题,就能写出来。没用到什么复杂、生疏的方法,还是那句大神级的setInterval。

一、基本目标

写出FC上的小蜜蜂游戏。“蜜蜂”不停地往下飞,你可以发射子弹清空,当“蜜蜂”飞到底层就输了。把所有的“蜜蜂”清空,则刷新一个“蜂群”,当然,这里的“蜂群”我就写了一个,大家可以根据《【JavaScript】打印星型金字塔》(点击打开链接)里面的思想,创造不同的蜂群,“蜂群”就是不同形状的星型金字塔。

二、舞台布局

就是一行文字与两个div而已。“蜂群”稍候用Javascript创建,注意,这里的黑色滑块div是镶嵌在舞台这个div里面的,黑色滑块的left与top是相对于舞台而言的,后面用Javascript创建的“蜂群”也是,具体见《【CSS】关于position:absolute布局》(点击打开链接)。

布局思想见下图:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
小蜜蜂游戏,积分:<span id="point">0</span>,请用←与→或A与D控制方向,F发子弹!
<div id="stage" style="position:absolute; left:100px; top:100px; width:400px; height:400px; border:1px solid #000000;" >
<div id="div" style="position:absolute; left:180px; top:380px; background-color:#000000; width:20px; height:20px;"></div>
</div>
</body>
</html>

三、核心脚本

首先,整个游戏分为两大部分,一部分是滑块,其中包括滑块的移动,滑块子弹的发射,子弹的处理,另一部分是蜂群,这一部分简单一点,包括蜂群的创建与蜂群的飘落。

整个游戏有如下的全局变量:

//黑色滑块的初始化
var div=new Div(180,380);
//蜜蜂的数目
var beeCount=0;
//蜂群是向左移还是向右移
var beeMoveFlag=0;
//玩家得分
var point=0;
//这个控制蜂群移动的计时器
var beeMoveTimer=0;
//这是判断玩家是否已经GameOver了
var loseFlag=0;

先从简单的蜂群说起。

1、蜂群的创建

这里用到了《【JavaScript】打印星型金字塔》(点击打开链接)与《【JavaScript】网页节点的增删改查》(点击打开链接)里面的思想,具体代码如下:

function bee_create(){//打印一个三角形for(var i=0;i<7;i++){for(var j=0;j<i;j++){var beediv = document.createElement("div");//这里是要确定最左边的*的起始位置,配合中间位置200px而言var offsetpx = -20 * i ;beediv.innerHTML = "*";//40是每个*相隔的像素值beediv.style.left=200+40*j+offsetpx+"px";//40也是每行*的行距beediv.style.top=40*(i-1)+"px";//定义每个*被击中的有效距离是15x15beediv.style.width="15px";beediv.style.height="15px";//定义每个*的id为beediv1,2,3,...,这样好控制beediv.id="beediv"+beeCount;//记得设置是绝对定位,否则left与top不起作用beediv.style.position="absolute";document.getElementById("stage").appendChild(beediv);beeCount++;}}
}

2、蜂群的移动

function bee_move(){//创建一个存放每个*的X,Y坐标的数组,因为JS中没有map就定义两个数组咯。var beedivYArr=new Array();var beedivXArr=new Array();//这里是用来判定蜂群下一次移动是否会越界var ExistOverFlag=0;for(var i=0;i<beeCount;i++){//这么长的一段代码只为取走当前*的left与top,因为left与top一开始取出来是个 xx px的字符串,你必须作出一些处理,才能完事。var beediv_y=parseInt(document.getElementById("beediv"+i).style.top.substring(0,document.getElementById("beediv"+i).style.top.indexOf("px")));var beediv_x=parseInt(document.getElementById("beediv"+i).style.left.substring(0,document.getElementById("beediv"+i).style.left.indexOf("px")));//把取到的left与top也就是X,Y放到数组里面的最后一个位置,JavaScript里面的数组就像Java的ArrayList会动态自增的,可以这样放,不是定长数组。beedivYArr[beedivYArr.length]=beediv_y;beedivXArr[beedivXArr.length]=beediv_x;}for(var i=0;i<beedivXArr.length;i++){//如果有一只蜜蜂向左或者向右越界则立起相应的flagif(beedivXArr[i]<40){ExistOverFlag=1;break;}if(beedivXArr[i]>350){ExistOverFlag=2;break;}}//如果蜜蜂向左越界下一次就向右边移动咯,反之亦然if(ExistOverFlag==1){beeMoveFlag=1;}if(ExistOverFlag==2){beeMoveFlag=0;} for(var i=0;i<beedivYArr.length;i++){//如果有一只蜜蜂向下越界,玩家就算了,立起相应的flag,一切都结束了if(beedivYArr[i]>360){loseFlag=1;break;}//否则,每只蜜蜂向下移10px,如果蜂群是向右移动,那么每只移动向左移动40px,反之依然beedivYArr[i]=beedivYArr[i]+10;if(beeMoveFlag==0){beedivXArr[i]=beedivXArr[i]-40;}else{beedivXArr[i]=beedivXArr[i]+40;}}//更新每一只蜜蜂的位置for(var i=0;i<beedivYArr.length;i++){document.getElementById("beediv"+i).style.top=beedivYArr[i]+"px";document.getElementById("beediv"+i).style.left=beedivXArr[i]+"px";}//同时检查一下是否有事件发生?game_check();
}

3、检查事件发生函数

这个非常简单,就两个事件,蜂群是否被玩家清空,蜂群是否向下越界,同时做出相应的处理。

function game_check(){//如果蜂群被清空,那么再创建蜂群if(beeCount==0){bee_create();}//如果玩家输掉游戏,那么统计玩家的分数,清空计数器,刷新页面让玩家重新开始。if(loseFlag==1){var nowPoint=parseInt(document.getElementById("point").innerHTML);alert("Game Over," + "积分:" + nowPoint); clearTimeout(beeMoveTimer);history.go(0);       }
}

做到这里,蜂群就做完了,也算是游戏AI部分,下面是滑块部分,也就是玩家操控部分。

1、滑块移动部分

这个在《【JavaScript】黑点捉红点并躲绿点游戏》(点击打开链接)已经具体里面说过,这里就不再赘述,甚至代码都没有改,只是可以用charCodeAt(0)来取出键值。

首先,是键值处理部分。

document.onkeydown = function(event) {var code;if (window.event) {code = window.event.keyCode;} else {code = event.keyCode;}switch(code){case 37:div.move_left();break;case 39:div.move_right();break;case 65:div.move_left();break;case 68:div.move_right();break;//可以直接找出F的键值,charCodeAt(n)能够返回当前字符串的第N个字符的Unicode码//大写字母的Unicode码与其键值对应,所以F必须要大写case ("F".charCodeAt(0)):div.fire();break;         }
}

然后,与《【JavaScript】黑点捉红点并躲绿点游戏》( 点击打开链接)同样,为这个滑块开一个类,在里面写出对应的构造函数与响应移动的类函数,如果发现滑块会越界则直接不响应这次移动。

function Div(x,y){this.x=x;this.y=y;this.move_left=function(){if(this.x>0){this.x=this.x-10;document.getElementById("div").style.left=this.x+"px";}}this.move_right=function(){if(this.x<380){this.x=this.x+10;document.getElementById("div").style.left=this.x+"px";}}
}

2、子弹的发射

首先在这个类里面定义作用与这个类的全局变量。

 //考虑到玩家很可能一次性发射多个子弹,必须定义一个数组保存玩家的子弹,一个一个地处理var BulletArr=new Array();//玩家是否第一次发射子弹?var First=true;

然后,继续为Div类添加相应的子弹发射的类函数。与上面蜂群的创建同样生成子弹,只是这次需要把生成的子弹放到一个数组里面处理。如果不这样做,前一颗子弹没有处理完,用户在后面发生的子弹就会把前面的子弹覆盖,导致程序无法正常运行。

 //发子弹this.fire=function(){var bullet=document.createElement("div");bullet.innerHTML="x";//子弹的初始位置就是滑块的位置bullet.style.left=this.x+10+"px";bullet.style.top=this.y+"px";//其有效范围同样与蜜蜂*范围一样为15x15bullet.style.width="15px";bullet.style.height="15px";//记得设置绝对定位,否则left与top无效bullet.style.position="absolute";document.getElementById("stage").appendChild(bullet);//把这个子弹放在数组中,进行管理BulletArr[BulletArr.length]=bullet;//如果玩家发射子弹之后只有一颗子弹,才调用子弹移动函数。这个子弹移动是整个子弹数组里面的子弹移动,不是单一子弹//如果每一发射一颗这段都调用这个子弹移动函数,子弹数组的移动会变得越来越快。if(BulletArr.length==1&&First){window.setInterval("div.bullet_move()",50);}}

3、子弹移动函数

这个函数最为复杂,当然也是最核心的函数,同时也是本工程最后一个函数了。

子弹移动的时候是否碰到蜜蜂,同样是用到了《【JavaScript】黑点捉红点并躲绿点游戏》(点击打开链接)里面的思想,看子弹的有效范围是否与蜜蜂的有效范围重合。取出整个残余蜂群的时候,用到了《【JavaScript】利用getElementsByTagName与getElementsByName改进原生态兼容IE6标签页》(点击打开链接)的方法取出舞台上的所有div,然后对取出的所有div判断哪个的innerHTML是*,就是蜜蜂了,就可以对蜜蜂重新编号了。

this.bullet_move=function bullet_move(){//首先,一进来就禁止其他子弹再调用这个线程,如果所有子弹都消失,子弹输出长度变成0,由于没有clearTimeout,处理子弹移动的线程依旧存在的。//再发射子弹,这个线程会自动处理的First=false;for(var i=0;i<BulletArr.length;i++){//取出当前子弹的坐标var bullet=BulletArr[i];var bullet_y=parseInt(bullet.style.top.substring(0,bullet.style.top.indexOf("px")));var bullet_x=parseInt(bullet.style.left.substring(0,bullet.style.left.indexOf("px")));//如果子弹没有到舞台上界if(bullet_y>0){//那么向上移动20pxbullet.style.top=bullet_y-20+"px";//同时判断是否碰见蜜蜂             var BulletHitBeeFlag=0;//以下存放蜜蜂坐标的数组var beedivYArr=new Array();var beedivXArr=new Array();//这里是记录第几只蜜蜂被打中的idvar beeHited=0;//取出当前所有蜜蜂的坐标,之所以用j来做计算变量,是为了防止与外循环for的计算变量i冲突for(var j=0;j<beeCount;j++){var beediv_y=parseInt(document.getElementById("beediv"+j).style.top.substring(0,document.getElementById("beediv"+j).style.top.indexOf("px")));var beediv_x=parseInt(document.getElementById("beediv"+j).style.left.substring(0,document.getElementById("beediv"+j).style.left.indexOf("px")));beedivYArr[beedivYArr.length]=beediv_y;beedivXArr[beedivXArr.length]=beediv_x;}//判断是否有蜜蜂被打中for(var j=0;j<beedivYArr.length;j++){if((beedivYArr[j]>bullet_y-20)&&(beedivYArr[j]<bullet_y+20)&&(beedivXArr[j]>bullet_x-20)&&(beedivXArr[j]<bullet_x+20)){BulletHitBeeFlag=1;beeHited=j;break;}   }//如果有蜜蜂被打中if(BulletHitBeeFlag==1){//在舞台清理那只被打中的蜜蜂var BeeHitedDiv=document.getElementById("beediv"+beeHited);document.getElementById("stage").removeChild(BeeHitedDiv);//玩家得分+1,并更新得分point++;document.getElementById("point").innerHTML=point;//下面,对残余蜜蜂的id重新编号,并统计有多少个蜜蜂,beediv1,2,3,4,...配合其他的函数控制,如果出现beediv1,3,4的情况,就不好整beeCount=0;var BeeExistDivArr=document.getElementById("stage").getElementsByTagName("div");   for(var j=0;j<BeeExistDivArr.length;j++){if(BeeExistDivArr[j].innerHTML=="*"){BeeExistDivArr[j].id="beediv"+beeCount;beeCount++;}}              }}//如果子弹到达上界else{//从数组中取出这个元素,删除BulletArr.splice(i,1);//找到自己的父节点,把自己删掉bullet.parentNode.removeChild(bullet);}}}

最后,在一开始调用如下函数,整个游戏就可以跑起来了:

window.onload = function(){bee_create();bee_move();beeMoveTimer = setInterval("bee_move()",1000);
}

四、总结与展望

这个游戏的写作根本就没有用到任何新的内容,新用法,仅仅是以前做过的项目的升华。仅仅是需要注意《【JavaScript】变量冲突是可以通过编译的》(点击打开链接)这个问题就可以了。整个游戏的代码如下,把如下代码拷贝到记事本,保存为.html就可以重温当年在FC红白机上的小蜜蜂游戏了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
小蜜蜂游戏,积分:<span id="point">0</span>,请用←与→或A与D控制方向,F发子弹!
<div id="stage" style="position:absolute; left:100px; top:100px; width:400px; height:400px; border:1px solid #000000;" >
<div id="div" style="position:absolute; left:180px; top:380px; background-color:#000000; width:20px; height:20px;"></div>
</div>
</body>
</html>
<script>
//黑色滑块的初始化
var div=new Div(180,380);
//蜜蜂的数目
var beeCount=0;
//蜂群是向左移还是向右移
var beeMoveFlag=0;
//玩家得分
var point=0;
//这个控制蜂群移动的计时器
var beeMoveTimer=0;
//这是判断玩家是否已经GameOver了
var loseFlag=0;
function Div(x,y){this.x=x;this.y=y;//考虑到玩家很可能一次性发射多个子弹,必须定义一个数组保存玩家的子弹,一个一个地处理var BulletArr=new Array();//玩家是否第一次发射子弹?var First=true;this.move_left=function(){if(this.x>0){this.x=this.x-10;document.getElementById("div").style.left=this.x+"px";}}this.move_right=function(){if(this.x<380){this.x=this.x+10;document.getElementById("div").style.left=this.x+"px";}}//发子弹this.fire=function(){var bullet=document.createElement("div");bullet.innerHTML="x";//子弹的初始位置就是滑块的位置bullet.style.left=this.x+10+"px";bullet.style.top=this.y+"px";//其有效范围同样与蜜蜂*范围一样为15x15bullet.style.width="15px";bullet.style.height="15px";//记得设置绝对定位,否则left与top无效bullet.style.position="absolute";document.getElementById("stage").appendChild(bullet);//把这个子弹放在数组中,进行管理BulletArr[BulletArr.length]=bullet;//如果玩家发射子弹之后只有一颗子弹,才调用子弹移动函数。这个子弹移动是整个子弹数组里面的子弹移动,不是单一子弹//如果每一发射一颗这段都调用这个子弹移动函数,子弹数组的移动会变得越来越快。if(BulletArr.length==1&&First){window.setInterval("div.bullet_move()",50);}}//让子弹飞一会this.bullet_move=function bullet_move(){//首先,一进来就禁止其他子弹再调用这个线程,如果所有子弹都消失,子弹输出长度变成0,由于没有clearTimeout,处理子弹移动的线程依旧存在的。//再发射子弹,这个线程会自动处理的First=false;for(var i=0;i<BulletArr.length;i++){//取出当前子弹的坐标var bullet=BulletArr[i];var bullet_y=parseInt(bullet.style.top.substring(0,bullet.style.top.indexOf("px")));var bullet_x=parseInt(bullet.style.left.substring(0,bullet.style.left.indexOf("px")));//如果子弹没有到舞台上界if(bullet_y>0){//那么向上移动20pxbullet.style.top=bullet_y-20+"px";//同时判断是否碰见蜜蜂              var BulletHitBeeFlag=0;//以下存放蜜蜂坐标的数组var beedivYArr=new Array();var beedivXArr=new Array();//这里是记录第几只蜜蜂被打中的idvar beeHited=0;//取出当前所有蜜蜂的坐标,之所以用j来做计算变量,是为了防止与外循环for的计算变量i冲突for(var j=0;j<beeCount;j++){var beediv_y=parseInt(document.getElementById("beediv"+j).style.top.substring(0,document.getElementById("beediv"+j).style.top.indexOf("px")));var beediv_x=parseInt(document.getElementById("beediv"+j).style.left.substring(0,document.getElementById("beediv"+j).style.left.indexOf("px")));beedivYArr[beedivYArr.length]=beediv_y;beedivXArr[beedivXArr.length]=beediv_x;}//判断是否有蜜蜂被打中for(var j=0;j<beedivYArr.length;j++){if((beedivYArr[j]>bullet_y-20)&&(beedivYArr[j]<bullet_y+20)&&(beedivXArr[j]>bullet_x-20)&&(beedivXArr[j]<bullet_x+20)){BulletHitBeeFlag=1;beeHited=j;break;}   }//如果有蜜蜂被打中if(BulletHitBeeFlag==1){//在舞台清理那只被打中的蜜蜂var BeeHitedDiv=document.getElementById("beediv"+beeHited);document.getElementById("stage").removeChild(BeeHitedDiv);//玩家得分+1,并更新得分point++;document.getElementById("point").innerHTML=point;//下面,对残余蜜蜂的id重新编号,并统计有多少个蜜蜂,beediv1,2,3,4,...配合其他的函数控制,如果出现beediv1,3,4的情况,就不好整beeCount=0;var BeeExistDivArr=document.getElementById("stage").getElementsByTagName("div");   for(var j=0;j<BeeExistDivArr.length;j++){if(BeeExistDivArr[j].innerHTML=="*"){BeeExistDivArr[j].id="beediv"+beeCount;beeCount++;}}              }}//如果子弹到达上界else{//从数组中取出这个元素,删除BulletArr.splice(i,1);//找到自己的父节点,把自己删掉bullet.parentNode.removeChild(bullet);}}}
}window.onload = function(){bee_create();bee_move();beeMoveTimer = setInterval("bee_move()",1000);
}function bee_create(){//打印一个三角形for(var i=0;i<7;i++){for(var j=0;j<i;j++){var beediv = document.createElement("div");//这里是要确定最左边的*的起始位置,配合中间位置200px而言var offsetpx = -20 * i ;beediv.innerHTML = "*";//40是每个*相隔的像素值beediv.style.left=200+40*j+offsetpx+"px";//40也是每行*的行距beediv.style.top=40*(i-1)+"px";//定义每个*被击中的有效距离是15x15beediv.style.width="15px";beediv.style.height="15px";//定义每个*的id为beediv1,2,3,...,这样好控制beediv.id="beediv"+beeCount;//记得设置是绝对定位,否则left与top不起作用beediv.style.position="absolute";document.getElementById("stage").appendChild(beediv);beeCount++;}}
}function bee_move(){//创建一个存放每个*的X,Y坐标的数组,因为JS中没有map就定义两个数组咯。var beedivYArr=new Array();var beedivXArr=new Array();//这里是用来判定蜂群下一次移动是否会越界var ExistOverFlag=0;for(var i=0;i<beeCount;i++){//这么长的一段代码只为取走当前*的left与top,因为left与top一开始取出来是个 xx px的字符串,你必须作出一些处理,才能完事。var beediv_y=parseInt(document.getElementById("beediv"+i).style.top.substring(0,document.getElementById("beediv"+i).style.top.indexOf("px")));var beediv_x=parseInt(document.getElementById("beediv"+i).style.left.substring(0,document.getElementById("beediv"+i).style.left.indexOf("px")));//把取到的left与top也就是X,Y放到数组里面的最后一个位置,JavaScript里面的数组就像Java的ArrayList会动态自增的,可以这样放,不是定长数组。beedivYArr[beedivYArr.length]=beediv_y;beedivXArr[beedivXArr.length]=beediv_x;}for(var i=0;i<beedivXArr.length;i++){//如果有一只蜜蜂向左或者向右越界则立起相应的flagif(beedivXArr[i]<40){ExistOverFlag=1;break;}if(beedivXArr[i]>350){ExistOverFlag=2;break;}}//如果蜜蜂向左越界下一次就向右边移动咯,反之亦然if(ExistOverFlag==1){beeMoveFlag=1;}if(ExistOverFlag==2){beeMoveFlag=0;}   for(var i=0;i<beedivYArr.length;i++){//如果有一只蜜蜂向下越界,玩家就算了,立起相应的flag,一切都结束了if(beedivYArr[i]>360){loseFlag=1;break;}//否则,每只蜜蜂向下移10px,如果蜂群是向右移动,那么每只移动向左移动40px,反之依然beedivYArr[i]=beedivYArr[i]+10;if(beeMoveFlag==0){beedivXArr[i]=beedivXArr[i]-40;}else{beedivXArr[i]=beedivXArr[i]+40;}}//更新每一只蜜蜂的位置for(var i=0;i<beedivYArr.length;i++){document.getElementById("beediv"+i).style.top=beedivYArr[i]+"px";document.getElementById("beediv"+i).style.left=beedivXArr[i]+"px";}//同时检查一下是否有事件发生?game_check();
}function game_check(){//如果蜂群被清空,那么再创建蜂群if(beeCount==0){bee_create();}//如果玩家输掉游戏,那么统计玩家的分数,清空计数器,刷新页面让玩家重新开始。if(loseFlag==1){var nowPoint=parseInt(document.getElementById("point").innerHTML);alert("Game Over," + "积分:" + nowPoint); clearTimeout(beeMoveTimer);history.go(0);     }
}document.onkeydown = function(event) {var code;if (window.event) {code = window.event.keyCode;} else {code = event.keyCode;}switch(code){case 37:div.move_left();break;case 39:div.move_right();break;case 65:div.move_left();break;case 68:div.move_right();break;//可以直接找出F的键值,charCodeAt(n)能够返回当前字符串的第N个字符的Unicode码//大写字母的Unicode码与其键值对应,所以F必须要大写case ("F".charCodeAt(0)):div.fire();break;           }
}
</script>

【JavaScript】小蜜蜂相关推荐

  1. javascript 面向对象之路.1 - 小蜜蜂

    写这个系列文章是想通过几个案例来学习javascript html5 css3,其实这个小游戏谁都能做出来,但对于一个作为后端.net程序员的我来说还是有学习的必要,毕竟javascript的面向对象 ...

  2. JS原生编写飞机大战小蜜蜂游戏

    javascript设计模式之单体模式--飞机大战小蜜蜂游戏 单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象,如果他可以被实例化,那么他只能被实例化一次. 单体模式是javascr ...

  3. 小蜜蜂财务软件 免费

    Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...

  4. 小蜜蜂采集器 怎么用

    Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...

  5. 暴强:用iOS设备控制的HTML5“小蜜蜂”游戏

    摘要:红白机上的经典"小蜜蜂"游戏在HTML5技术下得到了革新:英国伦敦的Webdigi公司运用HTML5结合Node.js进行开发,扫描二维码使得游戏在PC浏览器中显示,玩家通过 ...

  6. 小蜜蜂网络电话 bt

    Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...

  7. 【AJAX】JavaScript的面向对象

    Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...

  8. 【JavaScript总结】JavaScript语法基础:JS高级语法

    作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...

  9. 【JavaScript总结】JavaScript语法基础:DOM

    ->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...

最新文章

  1. AI企业下一个使命:让生物特征数据使用走向阳光透明
  2. 如何在Markdown中链接到同一文档的一部分?
  3. 获取macos mojave_高仿MacOS教程
  4. Hive的内置数据类型
  5. 信息学奥赛一本通 1961:【13NOIP普及组】计数问题 | 洛谷 P1980 [NOIP2013 普及组] 计数问题
  6. php操作mysql数据_详解PHP操作MySQL数据库
  7. 均匀带电直线外一点的场强
  8. soapui调用java类_soapui接口测试-验签值处理-调用java的加密jar包
  9. Spring IOC源码分析
  10. 计算机中英汉字段如何切换,电脑上中英文切换按哪个键
  11. linux飞行模式切换,光遇飞行的两种模式区别 飞行模式切换和区别分析
  12. PPT学习整理(五)编辑顶点
  13. 通过微信小程序看前端
  14. # java swing,awt图形化界面代码案例合集
  15. WIFI6 80211.ax 的理论速率计算及对照表
  16. iwork8 Android86,酷比魔方(CUBE)IWORK8 U80GT平板电脑整体评测-ZOL中关村在线
  17. Python语言基础学习报告(心得与体会)
  18. 沧海一声笑的人生态度
  19. reduce函数详解以及自己实现一个reduce函数
  20. 综述:利用深度学习实现的虚拟试衣技术(基于图像)

热门文章

  1. Android面试题小结
  2. 通过 bitbake 移植 qrencode 到嵌入式
  3. 皮卡丘为什么不进化_神奇宝贝中皮卡丘和喵喵为什么不进化?这些理由扎心了!...
  4. 微信停止为苹果服务器,艰难选择!微信和支付宝如果停止在苹果手机上使用,会选择谁?...
  5. Mac OS X 10.2 完美的数码解决方案(转)
  6. 太有才了!创新的街头涂鸦手绘欣赏【中篇】
  7. Educoder - Java面向对象 - 类与对象各关卡题目总结
  8. 花了十年攻下“5天工作制”,4天离我们还有多远
  9. 王振2020-6-1笔记
  10. Adaptec by PMC 联合希捷展示12Gb/s SAS及分层存储解决方案