免责声明:我不是真正的开发人员,所以我这里可能有一些代码意粉...而且现在我需要使用已有的东西,这意味着我可能会得到胶带式的修复。 ;-)
我正在使用javascript和php执行以下操作:
在屏幕上闪烁一对图像
“监听”并捕获按键(特定按键指示左图或右图)
重复10对图像
我通过让javascript更改具有图像对的div的可见性并调用事件侦听器来完成此操作,所有时间都精确计时。 “捕获”部分是通过使用innerHTML将“ L”或“ R”写入页面的表单区域来完成的。
这就是问题所在,我没有办法注意到是否有人错过了机会窗口中的按键。因此,在流程结束之前提交表单之前,我不计算记录的响应。
我希望它可以在10个图像对的末尾注意到,然后让用户重做会话,或者注意到错过了哪个图像对并自动重新显示该对图像。
这是我得到的代码,该代码对图像进行闪烁并捕获按键。
<script type="text/javascript">
var randomPairList = <?php echo $_POST['topicNumber']-1; ?>;
function imgChoice(imgPair)
{
var imgDataR = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="r" />';
var imgDataL = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="l" />';
var noData = '<?php $noData = 1; ?>';
$(document).on('keydown', function(event)
{
if (event.keyCode == 67 || event.keyCode == 37)
{
document.getElementById(imgPair+'Data').innerHTML = imgDataL;
$(document).unbind('keydown');
}
if (event.keyCode == 77 || event.keyCode == 39)
{
document.getElementById(imgPair+'Data').innerHTML = imgDataR;
$(document).unbind('keydown');
}
});
//div = document.getElementById(imgPair);
}
function stopChoice(imgPair)
{
$(document).unbind('keydown');
}
function flashImages()
{
i=500;
//$('#startTopic').fadeOut(500);
setTimeout("document.getElementById('fullpd').style.cursor='none';",50);
setTimeout("document.getElementById('fullpd').style.background='#464646';",500);
for(x=1;x<imgPairs.length;x++)
{
setTimeout("document.getElementById('clickSound').play();",i+2000);
setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="block";',i+3500)
setTimeout('imgChoice("'+imgPairs[x]+'");',i+3495)
setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="none";',i+4000)
setTimeout('stopChoice("'+imgPairs[x]+'");',i+6000)
i=i+4000;
}
setTimeout("document.getElementById('fullpd').style.background='#eaeaea';",i+1000)
setTimeout("document.getElementById('fullpd').style.cursor='default';",i)
setTimeout(function() {$('#endTopic').fadeIn(1000);},i+1000);
}
</script>
因此,我想知道是否有一种方法可以对event.keyCode进行简单计数,以便在最后调用另一个函数以确保它记录了10个事件,如果不重新启动...还是一种方法专门跟踪错过了哪个imagePair,然后自动重新运行这些对。
谢谢,
史考特
最佳答案
我找到了实现我所需要的方式的方法...
我在函数内部添加了一个记录关键事件的计数器:
var randomPairList = <?php echo $_POST['topicNumber']-1; ?>;
var choicesMade = 0;
function imgChoice(imgPair)
{
var imgDataR = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="r" />';
var imgDataL = '<input type="hidden" name="'+imgPair+'[<?php echo $_POST['topicNumber']; ?>]" value="l" />';
var noData = '<?php $noData = 1; ?>';
$(document).on('keyup', function(event) {
if (event.keyCode == 67 || event.keyCode == 37) {
document.getElementById(imgPair+'Data').innerHTML = imgDataL;
$(document).unbind('keyup');
choicesMade+=1;
document.getElementById('choicesMade').innerHTML = choicesMade;
}
if (event.keyCode == 77 || event.keyCode == 39) {
document.getElementById(imgPair+'Data').innerHTML = imgDataR;
$(document).unbind('keyup');
choicesMade+=1;
document.getElementById('choicesMade').innerHTML = choicesMade;
}
});
}
function stopChoice(imgPair)
{
$(document).unbind('keyup');
}
然后,我更改了显示“ endTopic” div的代码,以使其未达到所需的选择数量时选择另一个div来显示:
function flashImages(){
i=500;
//$('#startTopic').fadeOut(500);
setTimeout("document.getElementById('fullpd').style.cursor='none';",50);
setTimeout("document.getElementById('fullpd').style.background='#464646';",500);
for(x=1;x<=imgPairs.length-1;x++){
setTimeout("document.getElementById('clickSound').play();",i+2000);
setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="block";',i+3500)
setTimeout('imgChoice("'+imgPairs[x]+'");',i+3495)
setTimeout('document.getElementById("'+imgPairs[x]+'").style.display="none";',i+4000)
setTimeout('stopChoice("'+imgPairs[x]+'");',i+6005)
i=i+4000;
}
setTimeout("document.getElementById('fullpd').style.background='#eaeaea';",i+1000)
setTimeout("document.getElementById('fullpd').style.cursor='default';",i)
setTimeout(function() {if(choicesMade < 10){$('#missedChoices').fadeIn(1000);} else {$('#endTopic').fadeIn(1000);}},i+1000);
//setTimeout(function() {$('#endTopic').fadeIn(1000);},i+1000);
}
然后,在“ missedChoices” div中,向用户显示他们错过了一些响应的消息,并且该按钮可用于“返回”。
到目前为止,似乎工作正常! :-)
关于php - Javascript捕获错过的按键事件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12520032/