Question

您好我尝试了不同的解决方案，但我找不到我想要的东西，我想要做的是在两个函数之间花费几微秒的时间。但问题首先是我需要在css动画完成后立即启动计时器，第二个我需要在有人按下键盘上的B或R时停止计时器，第三个我需要从计时器发送时间有关按下哪个键的信息。这是一个显示我的意思的代码，第一个是在css中调用计时器：

#first-child {
   width: 200px;
   height: 200px;
   background: white;
   border-radius: 100%;
   margin-top: 150px;
   margin-bottom: 50px;
   margin-left: 550px;
   margin-right: 0px;
   -webkit-animation: myfirst 1s;
   -moz-animation: myfirst 1s;
   animation: myfirst 1s;
}
@-webkit-keyframes myfirst {
   0% {background: white;}
  20% {background: white;}
  40% {background: white;}
  60% {background: white;}
  80% {background: white;}
 100% {background: red;}
}
@keyframes myfirst {
   0% {background: white;}
  20% {background: white;}
  40% {background: white;}
  60% {background: white;}
  80% {background: white;}
 100% {background: red;}
}

//Call the timer here

第二个是停止计时器onkeypress：

document.onkeypress = function(e) {
   e = e || window.event;
   var charCode = e.charCode || e.keyCode,
   character = String.fromCharCode(charCode);

   //Stop timer here

   var answer;
   if(e.charCode == 98 || e.keyCode == 98) {
      answer = "B";
   //Or Stop timer here

   } else if(e.charCode == 114 || e.keyCode == 114) {
      answer = "R";
   //Or stop timer here

   } else {
      alert("Press B or R to continue");
      return false;

第三是将时间与其他信息一起发送：

localStorage.setItem("keypressed", "");
localStorage.setItem("keypressed", "<h3>Test 1</h3>Your Answer: " + answer + "<br />Correct Answer: R<hr>");

//Send the time here

window.location.href="Take time in milliseconds and send it 1.html";
return true;

我想如果您可以花时间将其保存在本地存储中并将其与其他信息一起发送。但我不知道如何，我正在进行反应测试，我有50个不同的文件和一个结果文件。所以我只想发布两个测试文件和结果文件，这样你才知道我的意思。

Test1.html：

<!DOCTYPE html>
<html>
<head>
<title>Test1</title>
<style>
body {
   overflow: hidden;
}
#first-child {
   width: 200px;
   height: 200px;
   background: white;
   border-radius: 100%;
   margin-top: 150px;
   margin-bottom: 50px;
   margin-left: 550px;
   margin-right: 0px;
   -webkit-animation: myfirst 1s;
   -moz-animation: myfirst 1s;
   animation: myfirst 1s;
}
@-webkit-keyframes myfirst {
        0% {background: white;}
       20% {background: white;}
       40% {background: white;}
       60% {background: white;}
       80% {background: white;}
      100% {background: red;}
}
@keyframes myfirst {
        0% {background: white;}
       20% {background: white;}
       40% {background: white;}
       60% {background: white;}
       80% {background: white;}
      100% {background: red;}
}
#first-parent {
   color: blue;
   margin-top: 5px;
   margin-bottom: 50px;
   margin-left: 600px;
   margin-right: 0px;
}
#second-parent {
   color: red;
   margin-top: 0px;
   margin-bottom: 50px;
   margin-left: 40px;
   margin-right: 0px;
}
p {
   margin-left: 640px;
}
</style>
</head>
<body>
<div id="first-child"></div>

<div>
<button id="first-parent">B</button>
<button id="second-parent">R</button>
</div>

<br />
<p>1/50</p>

<script>
document.onkeypress = function(e) {
   e = e || window.event;
   var charCode = e.charCode || e.keyCode,
   character = String.fromCharCode(charCode);

   var answer;
   if(e.charCode == 98 || e.keyCode == 98) {
      answer = "B";
   } else if(e.charCode == 114 || e.keyCode == 114) {
      answer = "R";
   } else {
      alert("Press B or R to continue");
      return false;
   }

   localStorage.setItem("keypressed", "");
   localStorage.setItem("keypressed", "<h3>Test 1</h3>Your Answer: " + answer + "<br /> Correct Answer: R<hr>");
   window.location.href="Take time in milliseconds and send it 1.html";
   return true;
};
</script>
</body>
</html>

Test2.html：

<!DOCTYPE html>
<html>
<head>
<title>Test2</title>
<style>
body {
   overflow: hidden;
}
#first-child {
   width: 200px;
   height: 200px;
   background: white;
   border-radius: 0%;
   margin-top: 150px;
   margin-bottom: 50px;
   margin-left: 550px;
   margin-right: 0px;
   -webkit-animation: myfirst 1s;
   -moz-animation: myfirst 1s;
   animation: myfirst 1s;
}
@-webkit-keyframes myfirst {
        0% {background: white;}
       20% {background: white;}
       40% {background: white;}
       60% {background: white;}
       80% {background: white;}
      100% {background: blue;}
}
@keyframes myfirst {
        0% {background: white;}
       20% {background: white;}
       40% {background: white;}
       60% {background: white;}
       80% {background: white;}
      100% {background: blue;}
}
#first-parent {
   color: blue;
   margin-top: 5px;
   margin-bottom: 50px;
   margin-left: 600px;
   margin-right: 0px;
}
#second-parent {
   color: red;
   margin-top: 0px;
   margin-bottom: 50px;
   margin-left: 40px;
   margin-right: 0px;
}
p {
   margin-left: 640px;
}
</style>
</head>
<body>

<div id="first-child"></div>

<div>
<button id="first-parent">B</button>
<button id="second-parent">R</button>
</div>

<br />
<p>2/50</p>

<script>
document.onkeypress = function(e) {
   e = e || window.event;
   var charCode = e.charCode || e.keyCode,
   character = String.fromCharCode(charCode);

   var answer;
   if(e.charCode == 98 || e.keyCode == 98) {
      answer = "B";
   } else if(e.charCode == 114 || e.keyCode == 114) {
      answer = "R";
   } else {
      alert("Press B or R to continue");
      return false;
   }

   var res = localStorage.getItem("keypressed");
   res+= "<h3>Test 2</h3>Your Answer: " + answer + "<br /> Correct Answer: B<hr>";
   localStorage.setItem("keypressed", res);
   window.location.href="Take time in milliseconds and send it 2.html";
   return true;
};
</script>
</body>
</html>

Result.html：

<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<style>

</style>
</head>
<body>

<div id="result"></div>
<script>
var result = localStorage.getItem("keypressed");
document.getElementById("result").innerHTML = result;
</script>
</body>
</html>

那么我需要花费两个不同函数之间的微秒时间，然后将其发送到结果页面，我知道HTML，JavaScript和jQuery所以没有PHP解决方案，如果有任何问题请问，和平！

更新我真的需要一些帮助，我一直在寻找，但我找不到任何东西！有人在想吗？

在两个函数之间花费几微秒的时间

0 个答案: