100分面试题考一考大家,有正确结果即结贴

<body onkeypress="listenKey()">
<div id="key1" style="display:none;float:left;border:solid 1px black;padding:2px">click '1'</div>
<div id="key2" style="display:none;float:left;border:solid 1px black;padding:2px">click '2'</div>
<div id="key3" style="display:none;float:left;border:solid 1px black;padding:2px">click '3'</div>
<div id="key4" style="display:none;float:left;border:solid 1px black;padding:2px">click '4'</div>
<div id="key5" style="display:none;float:left;border:solid 1px black;padding:2px">click '5'</div>
<script language="javascript">
var keySpan=",49,50,51,52,53,";
var status=0;
var timer=null;
var startTime=0;
function listenKey()
{
var getValue=event.keyCode;
if(keySpan.indexOf(","+getValue+",")!=-1)
{
var now=new Date();
if(status==0)
{
for(var i=1;i<6;i++)
eval('document.getElementById("key'+i+'").style.display="block"');
status=1;
timer=setTimeout(hidden,3000);
startTime=now.getTime();
}
else if(status==1)
{
if(timer)
{
clearTimeout(timer);
}
if(now.getTime()-startTime<5000) //5秒内
{
alert("你按了："+(getValue-48)); //5秒内做的处理
}
}
}
}function hidden()
{
for(var i=1;i<6;i++)
eval('document.getElementById("key'+i+'").style.display="none"');
status=0;
clearTimeout(timer);
}function change(key)
{

}
</script>
</body>

解决方案 »

  1.   

    考试问题内容如下:  
         1    页面上有五张图片(每别是:暂停,播放,前进,后退,停止),这五张图片可以放到一个DIV中,要求使用键盘上的5个数字键盘分别实现对这5张图片进行控制,  开始时这五张图片都不显示,如果按键盘上的5个数字键的任何其中的一个的话,5个图片同时显示出来,如果在3秒内用户没有按这一点上5个键中的任意一个键,这时5个图片同时消失,如果用户在5秒钟内按了这五个键中的任意一个键,这时需要相应的键实现对应的功能(具体功能先不考虑),且图片进行换颜色,这时若用户再按另一键时,原来按过的图片颜色还需要还原.允许用户反复不同的按键.
        这样写不知道有没有说明白需求.       
         要求:页面用DIV标签来实现,代码用DHTML来控制.
      

  2.   

    三秒后隐藏,五秒内按键要执行功能,也就是说
    在图片隐藏后的两秒内按键也是有效的,不知道我理解的对不对?整体来说并不难,需要了解对按键事件的处理,定时器的使用,DHTML属性的修改.也就没什么了.
      

  3.   

    还是不明白
    3s就隐藏掉了
    这时候哪里还有按键呢？
    3-5s这个时间内你去按什么？
    按原div的位置么？。我的理解和zhaoxiaoyang(梅雪香@深圳) ( ) 信誉：100  一样 鼠标事件的捕捉结合setTimeout 和 style.display就可以做到了。
      

  4.   

    <div style="width:50px;height:50px;visibility:visible;background-color:red;" id="test"></div><script>
    document.onkeydown = function()
    {
    test.style.visibility = "visible";
    setTimeout("test.style.visibility='hidden';", 3000);
    }
    setTimeout("test.style.visibility='hidden';", 5000);
    </script>
    so easy
      

  5.   

    <HEAD>
    <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var aKey=false;   //是否所有键都在显示
    var oKey=0;       //单一键显示 1－5，0表示没有,6表示全部
    var timer=null;function myKey(){
    var key=event.keyCode
    switch(key){
    case 49:
    case 50:
    case 51:
    case 52:
    case 53:
    checkKey(key-48);
    break
    }
    }function checkKey(key){
    if(!aKey){
    checkContent(1);
    aKey=true;
    oKey=6;
    timer=setTimeout('checkDisplay()',3000)
    }
    else {
    if(timer){
    clearTimeout(timer);
    timer=null;
    }
    if(oKey==6){
    checkContent(2,key);
    oKey=key;
    }
    else{
    checkContent(3,key);
    oKey=key;
    }
    timer=setTimeout('checkDisplay()',5000)
    }

    }
    function checkContent(flag,key){
    if(flag==1) {
    for(var i=1;i<6;i++){
    document.getElementById('div'+i).style.display="inline";
    document.getElementById('div'+i).style.backgroundColor='red';
    }

    }
    else if(flag==2){
    document.getElementById('img'+key).src=key+"_on.gif";
    document.getElementById('div'+key).style.backgroundColor='green';
    }
    else{

    document.getElementById('img1').src=oKey+"_off.gif";
    document.getElementById('div'+oKey).style.backgroundColor='red';
    oKey=key;
    document.getElementById('img1').src=oKey+"_on.gif";
    document.getElementById('div'+oKey).style.backgroundColor='green';
    }
    }function  checkDisplay(){
    for(var i=1;i<6;i++){
    document.getElementById('div'+i).style.display="none";
    document.getElementById('div'+i).style.backgroundColor='red';
    }
    aKey=false;
    }//-->
    </SCRIPT>
    </HEAD><BODY onkeypress='myKey()'>
    <div style="display:none" id="div1"><img src='1_off.gif' id=img1></div>
    <div style="display:none" id="div2"><img src='2_off.gif' id=img2></div>
    <div style="display:none" id="div3"><img src='3_off.gif' id=img3></div>
    <div style="display:none" id="div4"><img src='4_off.gif' id=img4></div>
    <div style="display:none" id="div5"><img src='5_off.gif' id=img5></div>
    </BODY>
    </HTML>