如何使用JavaScript对事件计时并将其输出到屏幕_Javascript

如何使用JavaScript对事件计时并将其输出到屏幕

javascript

如何使用JavaScript对事件计时并将其输出到屏幕,javascript,Javascript,我是javascript的新手，所以请容忍我我基本上做了这个测试，用户回答10个问题。我已经成功地显示了用户写的答案和分数，但我需要输出他们完成测验所用的时间，如果他们花费的时间超过2分钟，默认情况下，测验应该结束 <! DOCTYPE> <html> <head> <title>Interactive quiz</title> </head> <body> <input type="button"

我是javascript的新手，所以请容忍我

我基本上做了这个测试，用户回答10个问题。我已经成功地显示了用户写的答案和分数，但我需要输出他们完成测验所用的时间，如果他们花费的时间超过2分钟，默认情况下，测验应该结束

<! DOCTYPE>
<html>
<head>
<title>Interactive quiz</title>
</head>

<body>

<input type="button" value="Start the quiz" name="quiz" onclick="startingquiz()">
<p id="answer0"> </p>
<p id="answer1"> </p>
<p id="answer2"> </p>
<p id="answer3"> </p>
<p id="answer4"> </p>
<p id="answer5"> </p>
<p id="answer6"> </p>
<p id="answer7"> </p>
<p id="answer8"> </p>
<p id="answer9"> </p>


<script>
var questions = ["How many awards has 50 cent won? a)73 b)42 c)39", 
"What year did Micheal Jackson die? a)2009 b) 2012 c) 2010",
"How many awards has Drake recieved as of January 2015? a)34 b)36 c) 20",
"What year did Kanye West win his first award? a) 2004 b) 2005 c )2003",
"How old is 50 cent? a)45 b)38 c )39",
"What year did the beatles break up? a)1987 b)1970 c)1966",
"How many sons does 50 cent have? a)4 b)3 c)2",
"When did 2Pac die? a)1996 b)1990 c)1991",
"When did biggie smalls die? a)1997 b)1980 d) 1990",
"when did eazy e die? a)1995 b)1996 c) 1989"];

var userAnswers = [];
var pointCounter = 0;


function startingquiz(){
//Timer is started with no delay. quiz is execcuted through gettingAnswers() method;
var time = setTimeout(gettingAnswers(), 0);
changingBACKGROUND();
//ENDING TIMER
clearTimeout(time);
}

function gettingAnswers (){

for(var i = 0; i < questions.length; i++){
var answers = prompt(questions[i]);
userAnswers[i] = answers;
}

if(userAnswers[0] == "73"){
document.getElementById("answer0").innerHTML = "<p><span class = 'correct'>" + questions[0] + ". You typed in " +userAnswers[0] + ". Correct! +2 points! " + "</span></p>"; 
pointCounter = pointCounter + 2;
}else if(userAnswers[0] == "a"){
document.getElementById("answer0").innerHTML ="<p><span class = 'correct'>" + questions[0] + ". You typed in " +userAnswers[0] + ". Correct! +2 points! " + "</span></p>";
pointCounter = pointCounter + 2;}
else{
document.getElementById("answer0").innerHTML ="<p>" + questions[0] + ". You typed in " +userAnswers[0] + ". Incorrect! -1 points! " + "</p>"; 
pointCounter = pointCounter - 1;
}

if(userAnswers[1] == "2012"){
document.getElementById("answer1").innerHTML = "<p>" + questions[1] + ". You typed in " +userAnswers[1] + ". Correct! +2 points! " + "</p>"; 
pointCounter = pointCounter + 2;
}else if(userAnswers[1] == "a"){
document.getElementById("answer1").innerHTML = "<p>" + questions[1] + ". You typed in " +userAnswers[1] + ". Correct! +2 points! " + "</p>"; 
pointCounter = pointCounter + 2;}
else{
document.getElementById("answer1").innerHTML = "<p>" + questions[1] + ". You typed in " +userAnswers[1] + ". Incorrect! -1 points! " + "</p>"; 
pointCounter = pointCounter - 1;
}

if(userAnswers[2] == "36"){
document.getElementById("answer2").innerHTML = "<p>" + questions[2] + ". You typed in " +userAnswers[2] + ". Correct! +2 points! " + "</p>"; 
pointCounter = pointCounter + 2;
}else if(userAnswers[2] == "b"){
document.getElementById("answer2").innerHTML = "<p>" + questions[2] + ". You typed in " +userAnswers[2] + ". Correct! +2 points! " + "</p>"; 
pointCounter = pointCounter + 2;
}
else{
document.getElementById("answer2").innerHTML = "<p>" + questions[2] + ". You typed in " +userAnswers[2] + ". Incorrect! -1 points! " + "</p>"; 
pointCounter = pointCounter - 1;
}

if(userAnswers[3] == "2004"){
document.getElementById("answer3").innerHTML = "<p>" + questions[3] + ". You typed in " +userAnswers[3] + ". Correct! +2 points! " + "</p>"; 
pointCounter = pointCounter + 2;
}else if(userAnswers[3] == "a"){
document.getElementById("answer3").innerHTML = "<p>" + questions[3] + ". You typed in " +userAnswers[3] + ". Correct! +2 points! " + "</p>";
pointCounter = pointCounter + 2;}
else{
document.getElementById("answer3").innerHTML = "<p>" + questions[3] + ". You typed in " +userAnswers[3] + ". Incorrect! -1 points! " + "</p>";
pointCounter = pointCounter - 1;
}

if(userAnswers[4] == "39"){
document.getElementById("answer4").innerHTML ="<p>" + questions[4] + ". You typed in " +userAnswers[4] + ". Correct! +2 points! " + "</p>"; 
pointCounter = pointCounter + 2;
}else if(userAnswers[4] == "c"){document.getElementById("answer4").innerHTML ="<p>" + questions[4] + ". You typed in " +userAnswers[4] + ". Correct! +2 points! " + "</p>";
pointCounter = pointCounter + 2;}
else{document.getElementById("answer4").innerHTML = "<p>" + questions[4] + ". You typed in " +userAnswers[4] + ". Incorrect! -1 points! " + "</p>"; 
pointCounter = pointCounter - 1;}

if(userAnswers[5] == "1970"){document.getElementById("answer5").innerHTML ="<p>" + questions[5] + ". You typed in " +userAnswers[5] + ". Correct! +2 points! " + "</p>"; 
pointCounter = pointCounter + 2;
}else if(userAnswers[5] == "b"){
document.getElementById("answer5").innerHTML ="<p>" + questions[5] + ". You typed in " +userAnswers[5] + ". Correct! +2 points! " + "</p>";
pointCounter = pointCounter + 2;}
else{document.getElementById("answer5").innerHTML ="<p>" + questions[5] + ". You typed in " +userAnswers[5] + ". Incorrect! -1 points! " + "</p>"; 
pointCounter = pointCounter - 1;}

if(userAnswers[6] == "2"){
document.getElementById("answer6").innerHTML = "<p>" + questions[6] + ". You typed in " +userAnswers[6] + ". Correct! +2 points! " + "</p>"; pointCounter = pointCounter + 2;
}else if(userAnswers[6] == "c"){
document.getElementById("answer6").innerHTML ="<p><span class = 'correct'>" + questions[6] + ". You typed in " +userAnswers[6] + ". Correct! +2 points! " + "</span></p>";pointCounter = pointCounter + 2;}
else{document.getElementById("answer6").innerHTML ="<p>" + questions[6] + ". You typed in " +userAnswers[6] + ". Incorrect! -1 points! " + "</p>"; pointCounter = pointCounter - 1;}

if(userAnswers[7] == "1996"){
document.getElementById("answer7").innerHTML ="<p>" + questions[7] + ". You typed in " +userAnswers[7] + ". Correct! +2 points! " + "</p>"; 
pointCounter = pointCounter + 2;
}else if(userAnswers[7] == "a"){
document.getElementById("answer7").innerHTML ="<p>" + questions[7] + ". You typed in " +userAnswers[7] + ". Correct! +2 points! " + "</p>";
pointCounter = pointCounter + 2;}
else{document.getElementById("answer7").innerHTML ="<p>" + questions[7] + ". You typed in " +userAnswers[7] + ". Incorrect! -1 points! " + "</p>"; 
pointCounter = pointCounter - 1;}

if(userAnswers[8] == "1997"){
document.getElementById("answer8").innerHTML ="<p>" + questions[8] + ". You typed in " +userAnswers[8] + ". Correct! +2 points! " + "</p>"; 
pointCounter = pointCounter + 2;
}else if(userAnswers[8] == "a"){
document.getElementById("answer8").innerHTML ="<p>" + questions[8] + ". You typed in " +userAnswers[8] + ". Correct! +2 points! " + "</p>";
pointCounter = pointCounter + 2;}
else{document.getElementById("answer8").innerHTML ="<p>" + questions[8] + ". You typed in " +userAnswers[8] + ". Incorrect! -1 points! " + "</p>"; 
pointCounter = pointCounter - 1;}

if(userAnswers[9] == "1995"){
document.getElementById("answer8").innerHTML ="<p>" + questions[9] + ". You typed in " +userAnswers[9] + ". Correct! +2 points! " + "</p>"; 
pointCounter = pointCounter + 2;
}else if(userAnswers[9] == "a"){
document.getElementById("answer8").innerHTML ="<p>" + questions[9] + ". You typed in " +userAnswers[9] + ". Correct! +2 points! " + "</p>";
pointCounter = pointCounter + 2;}
else{document.getElementById("answer9").innerHTML ="<p>" + questions[9] + ". You typed in " +userAnswers[9] + ". Incorrect! -1 points! " + "</p>"; 
pointCounter = pointCounter - 1;}

document.getElementById("answer9").innerHTML ="Total point = " + pointCounter;

}

function changingBACKGROUND(){
//CHANGING BACKGROUND
if(pointCounter<5){
document.body.style.backgroundColor="grey";
}else if(pointCounter > 6 && pointCounter <10){
document.body.style.backgroundColor="pink";
}else if(pointCounter > 11){
document.body.style.backgroundColor="blue";
}
}


</script>
</body>
</html>


互动测验










var questions=[“50美分赢得了多少奖项？a）73 b）42 c）39”，
“迈克尔·杰克逊死于哪一年？a）2009 b）2012 c）2010”，
“截至2015年1月，德雷克获得了多少奖项？a）34 b）36 c）20”，
“Kanye West在哪一年获得了他的第一个奖项？a）2004 b）2005 c）2003”，
“50美分是几岁？a）45 b）38 c）39”，
“披头士乐队是哪一年解散的？a）1987 b）1970 c）1966”，
“50美分有多少个儿子？a）4 b）3 c）2”，
“2Pac是什么时候去世的？a）1996 b）1990 c）1991”，
“biggie smalls是什么时候去世的？a）1997 b）1980 d）1990”，
“eazy e是什么时候去世的？a）1995 b）1996 c）1989”]；
var userAnswers=[]；
var pointCounter=0；
函数启动测验（）{
//定时器无延迟启动，通过gettingAnswers（）方法执行测验；
var time=setTimeout（gettingAnswers（），0）；
改变背景（）；
//结束计时器
clearTimeout（时间）；
}
函数获取应答（）{
对于（var i=0；i”；
点计数器=点计数器+2；
}else if（userAnswers[0]=“a”）{
document.getElementById（“answer0”）.innerHTML=“”+问题[0]+”。您键入了“+用户答案[0]+”。正确！+2分！”+“”；
点计数器=点计数器+2；}
否则{
document.getElementById（“answer0”）.innerHTML=“”+问题[0]+”。您键入了“+用户答案[0]+”。不正确！-1分！”+“”；
点计数器=点计数器-1；
}
如果（用户回答[1]=“2012”）{
document.getElementById（“answer1”）.innerHTML=“”+问题[1]+”。您键入了“+用户答案[1]+”。正确！+2分！”+“”；
点计数器=点计数器+2；
}else if（userAnswers[1]=“a”）{
document.getElementById（“answer1”）.innerHTML=“”+问题[1]+”。您键入了“+用户答案[1]+”。正确！+2分！”+“”；
点计数器=点计数器+2；}
否则{
document.getElementById（“answer1”）.innerHTML=“”+问题[1]+”。您键入了“+用户答案[1]+”。不正确！-1分！”+“”；
点计数器=点计数器-1；
}
如果（用户回答[2]=“36”）{
document.getElementById（“answer2”）.innerHTML=“”+问题[2]+”。您键入了“+用户答案[2]+”。正确！+2分！”+“”；
点计数器=点计数器+2；
}else if（userAnswers[2]=“b”）{
document.getElementById（“answer2”）.innerHTML=“”+问题[2]+”。您键入了“+用户答案[2]+”。正确！+2分！”+“”；
点计数器=点计数器+2；
}
否则{
document.getElementById（“answer2”）.innerHTML=“”+问题[2]+”。您键入了“+用户答案[2]+”。不正确！-1分！”+“”；
点计数器=点计数器-1；
}
如果（用户回答[3]=“2004”）{
document.getElementById（“answer3”）.innerHTML=“”+问题[3]+”。您键入了“+用户答案[3]+”。正确！+2分！”+“”；
点计数器=点计数器+2；
}else if（userAnswers[3]=“a”）{
document.getElementById（“answer3”）.innerHTML=“”+问题[3]+”。您键入了“+用户答案[3]+”。正确！+2分！”+“”；
点计数器=点计数器+2；}
否则{
document.getElementById（“answer3”）.innerHTML=“”+问题[3]+”。您键入了“+用户答案[3]+”。不正确！-1分！”+“”；
点计数器=点计数器-1；
}
如果（用户回答[4]=“39”）{
document.getElementById（“answer4”）.innerHTML=“”+问题[4]+”。您键入了“+用户答案[4]+”。正确！+2分！”+“”；
点计数器=点计数器+2；
}如果（userAnswers[4]==“c”）{document.getElementById（“answer4”）.innerHTML=“”+问题[4]+”。您键入了“+userAnswers[4]+”。正确！+2分！”+“”；
点计数器=点计数器+2；}
else{document.getElementById（“answer4”）.innerHTML=“”+问题[4]+”。您键入了“+用户答案[4]+”。不正确！-1分！”+“”；
pointCounter=pointCounter-1；}
如果（userAnswers[5]==“1970”）{document.getElementById（“answer5”）.innerHTML=“”+问题[5]+”。您键入了“+userAnswers[5]+”。正确！+2分！”+“”；
点计数器=点计数器+2；
}else if（userAnswers[5]=“b”）{
document.getElementById（“answer5”）.innerHTML=“”+问题[5]+”。您键入了“+用户答案[5]+”。正确！+2分！”+“”；
点计数器=点计数器+2；}
else{document.getElementById（“answer5”）.innerHTML=“”+问题[5]+”。您键入了“+用户答案[5]+”。不正确！-1分！”+“”；
pointCounter=pointCounter-1；}
如果（用户回答[6]=“2”）{
document.getElementById（“answer6”）.innerHTML=“”+问题[6]+”。您键入了“+用户答案[6]+”。正确！+2分！”+“”；pointCounter=pointCounter+2；
}else if（userAnswers[6]=“c”）{
document.getElementById（“answer6”）.innerHTML=“”+问题[6]+”。您键入了“+用户答案[6]+”。正确！+2分！”+“”；pointCounter=pointCounter+2；}
else{document.getElementById（“answer6”）.innerHTML=“”+问题[6]+”。您键入了“+用户答案[6]+”。不正确！-1分！”+“”；点计数器=点计数器-1；}
if（userAnswers[7]=“1996”）{
document.getElementById（“answer7”）.innerHTML=“”+问题[7]+”。您键入了“+用户答案[7]+”。正确！+2分！”+“”；
点计数器=点计数器+2；
}else if（用户回答）[
var timeElapsed = 0;

var timeInterval = setInterval(function() {
    timeElapsed++;
    console.log(timeElapsed);
}, 1000);