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

-3

您好我想知道如何使用本地存储需要以毫秒为单位的时间， 我想从那个时候走的时候动画停止时，直到用户按下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的解决方案，在此先感谢，和平！

来源

2015-02-07 Nikki

这里不太清楚究竟是什么问题？它是简单的如何在JavaScript中获得毫秒计时器，还是与本地存储相关？ – 2015-02-07 19:07:20

对不起，这个我不想花时间用本地存储以毫秒为单位 – Nikki 2015-02-07 19:09:11

虽然我仍然不清楚问题是什么？从日期对象中获取毫秒数，并使用本地存储API获取/放入本地存储。哪部分是问题？一般来说，您不会在SO上得到很好的答案，除非您可以显示部分解决方案并突出显示它无法正常工作。 – 2015-02-07 19:12:36

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

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

我不确定何时“何时停止动画”。如果它与CSS动画完成时相关，则可能会遇到问题，因为此时不会引发javascript事件（据我所知）。因此，无法将某些代码挂钩到该时间点以创建日期对象。

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

编辑：一点点谷歌搜索引起了一些检测以JS结尾的CSS动画的可能方式，例如， http://davidwalsh.name/css-animation-callback

看起来很有前途......

来源

2015-02-07 19:33:12

它与css动画有关，我想花时间css动画结束，直到有人按B或R.你知道什么我的意思是？ – Nikki 2015-02-07 19:49:12

是的，我编辑中的链接与在javascript中检测CSS动画的结束有关。 Google上还有其他一些来源。我会尝试一下，如果你被困在某个特定的点上，就会提出一个问题。你不可能让某人在这里发布完整的解决方案来源。 – 2015-02-07 19:58:00

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

回答

相关问题