Question

我是javascript和html的新手，你可以用我的代码告诉你。我正在构建一个简单的登录游戏，帮助孩子们练习登录学校的设备。我想让它在游戏保持得分的同时运行1分钟。

我真正需要的是一个while循环，用于测试是否已经过了一分钟，并在一分钟内聚合分数，每次都重置用户输入字段。来自C ++背景，我真的很困惑自己回到第四，在html和java之间。具体来说，我需要java中的计时器，我需要在game_login_entered中运行一分钟的while循环（或者，我需要在另一个java函数中使用while循环，重复调用game_login_entered（）1分钟。

感谢您抽出宝贵时间阅读这篇杂乱的帖子。我希望我已经足够具体了。任何人都可以帮我解决这个问题吗？

＆＃13;

\documentclass{article}
\usepackage{graphicx}
\begin{document}
\hrule
%%%
\makeatletter%
\setlength{\@tempdima}{\the\columnwidth}% the, well columnwidth
\settowidth{\@tempdimb}{(\ref{Equ:TooLong})}% the width of the "(1)"
\addtolength{\@tempdima}{-\the\@tempdimb}% which cannot be used for the math
\addtolength{\@tempdima}{-1em}%
% There is probably some variable giving the required minimal distance
% between math and label, but because I do not know it I used 1em instead.
\addtolength{\@tempdima}{-1pt}% distance must be greater than "1em"
\xdef\Equ@width{\the\@tempdima}% space remaining for math
\begin{equation}%
\resizebox{\Equ@width}{!}{$\displaystyle{% to get everything inside "big"
 A+B+C+D+E+F+G+H+I+J+K+L+M+N+O+P+Q+R+S+T+U+V+W+X+Y+Z}$}%
\label{Equ:TooLong}%
\end{equation}%
\makeatother%
%%%
\hrule
\end{document}

＆＃13;

function credentials() {
  var real_username = document.getElementById('real_username_field').value;
  var un = document.getElementById('real_username');

  var real_password = document.getElementById('real_password_field').value;
  var pw = document.getElementById('real_password');

  var teacher_confirmation = confirm("Check with your teacher. Is this correct?\nUsername: " + real_username + "\nPassword: " + real_password);
  if (teacher_confirmation == true) {
    //START GAME

    //clear old stuff
    $('.removeMe').hide();
    //start timer (statically set at 60 seconds)
    onTimer();
    //show the hidden game time form.
    $('.gametime').show();

  } else {
    return;
  }
}

function game_login_entered() {

  var real_password = document.getElementById('real_password_field').value;
  var real_username = document.getElementById('real_username_field').value;
  var pw = document.getElementById('game_password_field').value;
  var un = document.getElementById('game_username_field').value;
  var score = 0;
  var multiplier = 1;
  document.getElementById("game_password_field").style.borderColor = "gray";
  document.getElementById("game_username_field").style.borderColor = "gray";
  var x = 0;


  if (pw == real_password && un == real_username) {
    document.getElementById("user_feedback1").innerHTML = "CORRECT!";
    document.getElementById("user_feedback2").innerHTML = "";
    score = score + (100 * multiplier);
    multiplier = multiplier + 1;
  } else if (pw != real_password && un != real_username) {
    document.getElementById("game_username_field").style.borderColor = "red";
    document.getElementById("user_feedback1").innerHTML = "\nIncorrect username.\nEnter: " + real_username;
    document.getElementById("game_password_field").style.borderColor = "red";
    document.getElementById("user_feedback2").innerHTML = "\nIncorrect password.\nEnter: " + real_password;
    multiplier = 1;

  } else if (pw != real_password) {
    document.getElementById("user_feedback1").innerHTML = "\nIncorrect password.\nEnter: " + real_password;
    document.getElementById("game_username_field").style.borderColor = "gray";
    document.getElementById("game_password_field").style.borderColor = "red";
    document.getElementById("user_feedback2").innerHTML = "";
    multiplier = 1;

  } else if (un != real_username) {
    document.getElementById("user_feedback1").innerHTML = "\nIncorrect username.\nEnter: " + real_username;
    document.getElementById("game_username_field").style.borderColor = "red";
    document.getElementById("game_password_field").style.borderColor = "gray";
    document.getElementById("user_feedback2").innerHTML = "";
    multiplier = 1;
  }
  document.getElementById("user_feedback_score").innerHTML = "Score: " + score;
  document.getElementById("user_feedback_multiplier").innerHTML = "Multiplier: " + multiplier;

}

＆＃13;

Body {
  font-family: Calibri;
  background-color: #3399FF;
  color: #FFFFFF;
  font-size: 18pt;
}
body {
  font-size: 1.2em;
}
body input,
body button {
  font-size: 1.2em;
}
form > div {
  margin: 1em;
}
form button {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
label {
  display: block;
}
input {
  width: 50%;
  padding: 0.2em;
}
button {
  margin-left: auto;
  margin-right: auto;
  padding: 0.2em;
}
/*
Blinker 
I'm not sure how this works, but hopefully it will allow me to blink the timer */

<style type="text/css"> .blink_text {
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: blinker;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  animation-name: blinker;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  color: red;
}
@-moz-keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
@-webkit-keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
@keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
</style>

＆＃13;

Answer 1

由于您希望每分钟汇总一次，请使用setInterval功能。

var score = 0;
var inputs = document.querySelectorAll("input");

setInterval(function() {
    score++;
    for (var i = 0; i < inputs.length; i++) {
       inputs[i].value = "";
    }

},60000);

这是更新的小提琴

http://jsfiddle.net/b65902mm/1/

获取用户输入一分钟，汇总分数

1 个答案: