今天我们将使用JavaScript中的switch让方块在页面上移动
switch是什么呢?switch是选择要执行的多个代码块之一的语句。今天我们要用到的不止是switch语句还有keyCode,keyCode也是这次小案例中必不可少的元素。
为什么说keyCode也是必不可少的一个元素?因为我们让方块移动需要用到键盘事件,而keyCode可以检测到键盘那个键被按下了,它的代号是多少,所以keyCode元素会在我们的小案例中发挥非常大的作用。话不多说,我们进入正题。
获取键盘代号
在计算机中键盘的每一个键都有属于自己的代号。这些代号我们看不到,所以要通过keyCode事件来获取键盘某一个键的代号。
首先用一个input标签作为获取值,赋予这个input标签一个id,然后我们就开始写JavaScript 的代码了。通过var声明一个变量,获取到input标签的值,并给我们声明的变量绑定一个onkeydown事件。(函数后面的参数要加event),为了兼容性我们还需要加一个
event=event||window.event;
因为在IE8以下没有event的事件,而event事件在IE8 中是在window中的所以我们需要从window事件中调出event事件。
然后,我们console.log输出event.keyCode。输出后我们运行代码,在网页中右键打开“检查”
“检查”打开后我们会看到这样一个框
点击上方的Console紧接着在文本框中输入“上下左右”就能获取到上下左右的代号了。38 40 37 39分别对应上 下 左 右
获取到代号后就开始写我们的代码了
HTML只有一个div标签,CSS中也没有太多的样式需要设置,只要给div一个不同于背景的颜色就好了。真正要花功夫的是JS代码。
我们先来一个window.onload事件,也就是页面加载完成事件。在函数中用getElementsByTagName,一定要用ByTagName,因为我们并没有给div一个ID也没有给他一个类,所以只能用ByTagName。(也不是不可以使用getElementById,如何使用取决于使用者)
获取到元素后,还是和上面获取键盘代码一样给它一个onkeydown事件。(普及以下什么是onkeydown事件 onkeydown事件是指键盘被按下事件如果一直按着某个键不松开,则会一直触发该事件,当onkeydown事件连续触发时,第一次和第二次之间的间隔时间稍微长一点,其他则会非常快。这是为了防止误操作的发生。这就是onkeydown事件)
接着我们用var声明一个变量,并将这个变量赋值为20。在这个变量的参数中传入event.keyCode,以便于获取我们给按键绑定的事件。
case 37:xo.style.left=xo.offsetLeft-20+"px";break;
case 38:xo.style.top=xo.offsetTop-20+"px";break;
case 39:xo.style.left=xo.offsetLeft+20+"px";break;
case 40:xo.style.top=xo.offsetTop+20+"px";break;
前面获取到的每个代号都给一个style事件和向左,向上事件,并在键盘被按下时执行,向左向右向上下向下移动多少个单位。最后用break结尾。以下是整体的代码
<style>
div{
width: 100px;
height: 100px;
background:#FF00DF;
position: absolute;
top:0;
left:0;
}
</style>
<body>
<div></div>
<script>
window.onload=function(){
var xo=document.getElementsByTagName("div")[0];
document.onkeydown=function(event){
event=event||window.event;
var speed=20;
switch(event.keyCode){
case 37:xo.style.left=xo.offsetLeft-20+"px";break;
case 38:xo.style.top=xo.offsetTop-20+"px";break;
case 39:xo.style.left=xo.offsetLeft+20+"px";break;
case 40:xo.style.top=xo.offsetTop+20+"px";break;
}
}
}
</script>
代码中包括CSS,HMTL,JavaScript在style标签中的是CSS代码,而HTML代码只有一个div,script标签中的则是JavaScript代码