使用本地存儲需要時間以毫秒爲單位

-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

使用本地存儲需要時間以毫秒爲單位

回答

相關問題