⑴ 這段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;
}
});
}); 這樣就可以了 如果兩個鍵同時按的話就走斜線 測試成功