⑴ 这段javascript代码如何添加代码使得能用键盘的上下左右控制方块移动
<!DOCTYPEHTML>
<html>
<head>
<metacharset="UTF-8"/>
<title>动态多宫格</title>
<styletype="text/css">
</style>
<scripttype="text/javascript">
window.onload=function()
{
Grids.init();
}
varGrids=
{
row:4,
col:4,
arr:[
1,2,3,4,5,6,7,8,9,10,11,12,13,14,15
],
init:function()
{
document.body.style['text-align']='center';
vartable=document.createElement('table');
table.style['margin']='0auto';
document.title=table.id='Grids'+this.row*this.col;
document.title+="还未开始游戏";
for(vari=0;i<this.row+1;i++)
{
vartr=table.insertRow(table.rows.length);
for(varj=0;j<this.col;j++)
{
if(i<=this.row-1&&j<=this.col-1)
{
vartd=tr.insertCell(tr.cells.length);
varbtn=document.createElement("input");
btn.type='button';
btn.style.width='50px';
btn.style.height='50px';
td.appendChild(btn);
if(i<=this.row-2||i==this.row-1&&j<=this.col-2)
{
varstart=Math.floor(Math.random()*this.arr.length);
btn.value=this.arr[start];
this.arr.splice(start,1);
}
else
{
btn.value='';
}
}
}
if(i==this.row)
{
vartd=tr.insertCell(tr.cells.length);
td.colSpan=this.col;
td.style.textAlign='center';
varbtn=document.createElement("input");
btn.type='button';
btn.value='开始';
btn.style.width='50px';
btn.style.height='30px';
btn.onclick=function()
{
vartable=this.parentElement.parentElement.parentElement;
varrs=table.rows;
for(varj=0;j<rs.length-1;j++)
{
varcs=rs[j].cells;
for(vark=0;k<cs.length;k++)
{
cs[k].children[0].onclick=function()
{
Grids.go(this);
}
}
}
document.title=document.title.replace(/(Gridsd+).*/,'$1已开始');
}
td.appendChild(btn);
}
}
document.body.appendChild(table);
Grids.key();
Grids.isOver(table);
},
find:function(p,row,col)
{
varreg=/^s*|s*$/g;
varrc=[
[
row-1,col
],[
row+1,col
],[
row,col-1
],[
row,col+1
]
];
for(vari=0;i<rc.length;i++)
{
if(rc[i][0]>=0&&rc[i][0]<this.col&&rc[i][1]>=0&&rc[i][1]<this.col)
{
if(p.rows[rc[i][0]].cells[rc[i][1]].children[0].value.replace(reg,'')=='')
{
return[
rc[i][0],rc[i][1]
];
}
}
}
returnnull;
},
go:function(btn)
{
varp=btn.parentElement.parentElement.parentElement;
varrow=btn.parentElement.parentElement.rowIndex;
varcol=btn.parentElement.cellIndex;
varsite=Grids.find(p,row,col);
if(!!site)
{
varr=site[0],c=site[1];
varreplaced=p.rows[r].cells[c].children[0];
p.rows[row].cells[col].appendChild(replaced);
p.rows[r].cells[c].appendChild(btn);
}
this.isOver(p);
},
key:function()
{
vartable=document.getElementById("Grids"+this.row*this.col);
varrows=table.rows;
document.onkeyup=function(e)
{
e=e||window.event;
varkeycode=e.keyCode;
//up,down,left,right
if(!/^(38|40|37|39)$/.test(keycode))
{
returnfalse;
}
varbtns=[],r=-1,c=-1;
for(vari=0;i<rows.length-1;i++)
{
varri=rows[i];
for(varj=0;j<ri.cells.length;j++)
{
varbtn=ri.cells[j].children[0];
if(btn.value==='')
{
r=i;
c=j;
break;
}
}
}
varsite=[[r+1,c],[r-1,c],[r,c+1],[r,c-1]];
for(vari=0;i<site.length;i++)
{
varrs=rows[site[i][0]];
if(!!rs)
{
if(rs.cells.length==Grids.col)
{
vartemp=rs.cells[site[i][1]];
if(!!temp)
{
btns.push(temp.children[0]);
}
else
{
btns.push(null);
}
}
else
{
btns.push(null);
}
}
else
{
btns.push(null);
}
}
switch(keycode)
{
case38:
!!btns[0]?Grids.go(btns[0]):0;
break;
case40:
!!btns[1]?Grids.go(btns[1]):0;
break;
case37:
!!btns[2]?Grids.go(btns[2]):0;
break;
case39:
!!btns[3]?Grids.go(btns[3]):0;
break;
default:
break;
}
}
},
isOver:function(table)
{
varrows=table.rows,flag=true;
L:for(vari=0;i<rows.length-1;i++)
{
varr=rows[i],len=r.cells.length;
if(i==rows.length-2)
{
len=1;
}
for(varj=0;j<len;j++)
{
if(r.cells[j].children[0].value!=i*r.cells.length+j+1)
{
flag=false;
breakL;
}
}
}
if(flag)
{
alert('YOUWIN!');
returntrue;
}
returnfalse;
}
};
</script>
</head>
<body>
</body>
</html>
⑵ 求js或jquery实现类似百度的键盘上下键选取值，回车选取值，和鼠标选取值
是不是出现下拉内容 然后要使用键盘上的上下键 高亮 回车将高亮的内容显示在搜索框中？
⑶ 在键盘中上下左右怎么打出来
指“↑↓←→”吗？
用智能ABC输入法，按V，再按1
然后按+号翻页，一直翻到最后两页就能看到这四个箭头了。
⑷ 请问（js+html）怎么获取键盘的方向键，来控制图片上一张下一张
js里面方法是可以监听按键的，左右方向键也是有个键值的， 你写一个方法，判断出是否有按左右键，有就触发你现在这些方法就可以了！onkeydown！
⑸ javascript代码实现键盘控制方向
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>在div内部拖动div</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metahttp-equiv="Content-Language"content="zh-CN"/>
<metaname="Keywords"content=""/>
<metaname="Description"content=""/>
</head>
<body>
<divid="main"></div>
</body>
</html>
<scripttype="text/javascript">
varmain=document.getElementById("main");
document.onkeydown=function(event){
event=event||window.event;
varkeycode=event.keyCode||event.which;
switch(keycode){
case13:
main.innerHTML="enter";
break;
case37:
main.innerHTML="zuo";
break;
case38:
main.innerHTML="shang";
break;
case39:
main.innerHTML="you";
break;
case40:
main.innerHTML="xia";
break;
}
};
</script>
⑹ js监控键盘的上下左右,多按一个键,另一个键就会失效,怎么解决
所有的游戏方向键控制思路都是这样的：
设置变量moveX，moveY，初始值是0
监控键盘，当左键按下时moveX--，当左键松开时moveX++，右键按下时moveX++，右键松开时moveX--。上下键同理。
然后每一次游戏逻辑循环（间隔触发的事件，js可以用setInterval），根据moveX、moveY来改变被控制人物的位置。
这样就可以实现人物的平滑移动同时也能解决你所说两个按键同时按下的问题。
⑺ javascript 实现点击键盘上下键，页面右侧滚动条不随之上下滚动
onkeypress = garbEvent;
function grabEvent(){
var key_code = event.keyCode || event.which;
switch(key_code){
case 38: //up
return 0;
break;
case 40: //down
return 0;
break;
}
}
通过onkeypress事件监听按键， 如果按键为38(小键盘上), 40(小键盘下)时, 不进行任何操专作.
跳出程序属.
⑻ Javascript 通过上下左右按键控制元素上下左右移动出问题了
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>
无标题文档
</title>
<styletype="text/css">
#qqq{
position:absolute;
height:100px;
width:100px;
left:100px;
top:100px;
border:1pxsolidblue;
text-align:center;
line-height:100px;
}
</style>
</head>
<scripttype="text/javascript">
document.onkeydown=function(event){
vara=document.getElementById("qqq");
event=event||window.event;
varkeyCode=event.keyCode;
vart=parseFloat(a.style.top)||a.offsetTop;
varl=parseFloat(a.style.left)||a.offsetLeft;
if(keyCode==38){//按下上建
a.style.top=t-10+"px";
}
elseif(keyCode==37){//按下左建
a.style.left=l-10+"px";
}
elseif(keyCode==39){//按下右建
a.style.left=l+10+"px";
}
elseif(keyCode==40){//按下下建
a.style.top=t+10+"px";
}
}
</script>
<body>
<divid="qqq">
ddd
</div>
</body>
</html>
⑼ 用JS做一个div以键盘上下左右控制移动
只走一步是因为移动一次后没有对x进行处理，所以点第二次的时候 x的值不变，x-10也不变，所以就不动了 <html> <head> <title>demo</title> <style type="text/css"> .active { border: 1px solid red; } </style> <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript"> var x = 0;//水平方向位移 var y = 0;//垂直方向位移 $(document).keydown(function (event) { switch (event.which) { case 37: y = y - 10; $("#person").css("left", y + "px"); break; case 38: x = x - 10; $("#person").css("top", x + "px"); break; case 39: y = y + 10; $("#person").css("left", y + "px"); break; case 40: x = x + 10; $("#person").css("top", x + "px"); break; default: break; } }); </script> </head> <body> <div id="person" class="active" style="position: absolute; width: 50px; height: 50px;" /> </body> </html>
⑽ jQuery通过键盘上下左右键，移动层
$(document).ready(function(){
$(document).keydown(function(e){
switch(e.which){
case 37: $('#person').css('left','-=10');break;
case 38: $('#person').css('top','-=10');break;
case 39: $('#person').css('left','+=10');break;
case 40: $('#person').css('top','+=10');break;
}
});
}); 这样就可以了 如果两个键同时按的话就走斜线 测试成功