Question

您好，我想知道如何使用本地存储空白时间， 我想花时间从动画停止的那一刻开始直到用户按下B或R ，测试是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" onclick="">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="Test2.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="Test3.html";
   return true;
};
</script>
</body>
</html>

Result.html：

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

</style>
</head>
<body>

<div id="result"></div>
<script>

</script>
</div>

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

这就是我知道HTML，jQuery和JavaScript所以没有PHP解决方案，提前感谢，和平！

Answer 1

使用日期对象上的.getTime（）方法获取当前的毫秒计数。因此，只需在您感兴趣的两个时间点创建一个日期对象，即可获得差异。

var start = new Date();
.... do stuff...
var end = new Date();
var timeInMilliseconds = end.getTime() - start.getTime();

我不确定＆＃34;什么时候动画停止＆＃34;是。如果它与CSS动画完成的时间相关，则可能会出现问题，因为此时没有引发javascript事件（据我所知）。因此，无法将某些代码挂钩到该时间点以创建日期对象。

您可以切换到使用javascript动画（例如jquery），或者只是假设动画每次都需要固定的时间。

编辑：Googling的一小部分提出了一些检测以JS结尾的CSS动画的可能方法，例如： http://davidwalsh.name/css-animation-callback

看起来很有希望......

使用本地存储需要花费时间（以毫秒为单位）

1 个答案: