编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。 【实例名称】 JS实现用键盘控制图片移动 【实例描述】 本例学习如何实现可用键盘控制图片的上、下、左、右移动,类似在游戏中的效果。 【实例代码】 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页-本站(www.xue51.com)</title>
</head>
<script language="JavaScript">
var key=0
var timer
function setObj()
{
ietype = (document.layers) ? 1 : 0;
//判断浏览器类型
divObj = (ietype)? document.mydiv : mydiv.style
//获取指定的div
Xpos = parseInt(divObj.left);
//获取div的X坐标
Ypos = parseInt(divObj.top);
//获取div的Y坐标
document.onkeydown = keyDown;
//设置按键事件
document.onkeyup = keyUp;
//设置键盘弹起的事件
if (ietype) document.captureEvents(Event.keydown | Event.keyup);
}
function keyDown(e)
//按键的操作
{
key = (ietype)? e.which : event.keyCode
//判断用户按下的键,注意此键盘包括方向键和小键盘(数字键)
if (key == 108 || key == 37) moveObj(1,2);
if (key == 114 || key == 39) moveObj(1,3);
if (key == 100 || key == 40) moveObj(1,4);
if (key == 117 || key == 38) moveObj(1,5);
}
function keyUp(e)
//按键弹起的操作
{
key=0;clearTimeout(timer);
}
function moveObj(t,u)
//移动图片的方法
{
clearTimeout(timer)
if (t==1){
//根据移动的键,改变div的X和Y坐标
if (u==2){divObj.left = Xpos-=5;timer = setTimeout("moveObj(1,2)", 40);}
if (u==3){divObj.left = Xpos+=5;timer = setTimeout("moveObj(1,3)", 40);}
if (u==4){divObj.top = Ypos+=5;timer = setTimeout("moveObj(1,4)", 40);}
if (u==5){divObj.top = Ypos-=5;timer = setTimeout("moveObj(1,5)", 40);}
}
}
</script>
<body OnLoad="setObj();focus()">
<div id="mydiv" style="position:absolute; left:0px; top:80px;">
<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif">
</div></body>
</html>
【运行效果】  【难点剖析】 本例的重点是判断键盘的按键,以及动态改变图片的位置。图片所在的位置是一个div层,首先通过控件的“Left”和“Top”属性,获取此层的x坐标和y坐标。然后通过“event.keyCode”属性获取用户的按键。最后根据按键在“moveObj”方法中改变div控件的坐标。 【源码下载】 为了JS代码的准确性,请点击:JS实现用键盘控制图片移动 进行本实例源码下载
使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。 |