投稿
  1. 码文网首页
  2. 码文文章

在给定时间内计算点击次数 /空格键javascript

作者：水漾宝贝 • • 阅读 107

基本上，我想做一个游戏，计算空格键按下 / 按钮点击次数在 10 秒内。我做了一个倒数计时器，计数器都工作正常

基本上，我想做一个游戏，计算空格键按下 / 按钮点击次数在 10 秒内。我做了一个倒数计时器，计数器都工作正常

我找不到一种方法来停止计数按键（定时器停止后），所以我用了“禁用”按钮，但建议我如果有更好的选择。

这是我所做的一切，但我想要同一个游戏的 10 个试验，每次试验后，它应该保存在变量试验 / 表中的点击次数。

var trials = {
  left:{
    trial_1:0,
    trial_2:0,
    trial_3:0,
    trial_4:0,
    trial_5:0
  },
    right:{
    trial_1:0,
    trial_2:0,
    trial_3:0,
    trial_4:0,
    trial_5:0
  }
}
var count_clicks= 0;
function myInterval(i) {
  var interval = setInterval(function(){startInterval()}, 1000);
  function startInterval(){
    if(i <= 0){
      clearInterval(interval);
       $("#btn").prop('disabled', true);
    } else{
      i--;
      $("#timer").text(i);
     
    }
  }
}
  $("#btn").on("click",function(){
    count_clicks++
    $("#result").text(count_clicks);
    if(count_clicks == 1){
    myInterval(10);
    }
  
  });
   
 
document.body.onkeyup = function(e){
  if (e.keyCode == 32){
     $("#btn").click();
      return false;
     }
}
#btn{
  height:30px;
  width:100px;
}
tr, th, td{
  border:1px solid black;
  padding:5px;
}
<script src="https://ajax.googlea.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="timer"></span> seconds<br>
<input id="btn" type="submit" value="Click Me">
<span id="result"></span><br>
<br>
<table>
  <tr>
    <th>hand</th>
    <th>trial 1</th>
    <th>trial 2</th>
    <th>trial 3</th>
    <th>trial 4</th>
    <th>trial 5</th>
  </tr>
  <tr>
    <th>left</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>right</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
2

我添加了一个var disabled = false并将其添加到if (e.keyCode == 32 && !disabled){

我们将其设置为 true 后

clearInterval(interval);
disabled = true;
demo 
var trials = {
  left:{
    trial_1:0,
    trial_2:0,
    trial_3:0,
    trial_4:0,
    trial_5:0
  },
    right:{
    trial_1:0,
    trial_2:0,
    trial_3:0,
    trial_4:0,
    trial_5:0
  }
}
var count_clicks= 0;
var disabled = false;
function myInterval(i) {
  var interval = setInterval(function(){startInterval()}, 1000);
  function startInterval(){
    if(i <= 0){
      clearInterval(interval);
      disabled = true;
       $("#btn").prop('disabled', true);
    } else{
      i--;
      $("#timer").text(i);
     
    }
  }
}
  $("#btn").on("click",function(){
    count_clicks++
    $("#result").text(count_clicks);
    if(count_clicks == 1){
    myInterval(10);
    }
  
  });
   
 
document.body.onkeyup = function(e){
  if (e.keyCode == 32 && !disabled){
     $("#btn").click();
      return false;
     }
}
#btn{
  height:30px;
  width:100px;
}
tr, th, td{
  border:1px solid black;
  padding:5px;
}
<script src="https://ajax.googlea.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="timer"></span> seconds<br>
<input id="btn" type="submit" value="Click Me">
<span id="result"></span><br>
<br>
<table>
  <tr>
    <th>hand</th>
    <th>trial 1</th>
    <th>trial 2</th>
    <th>trial 3</th>
    <th>trial 4</th>
    <th>trial 5</th>
  </tr>
  <tr>
    <th>left</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>right</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
0

我建议添加一个十秒钟为 true 的变量，之后为 false。我还添加了使表工作并存储左右点击所需的代码：

var can_click = true; 
var left_right = "left";
var trial_no = 0;
var trials = {
  left:[0,0,0,0,0],
  right:[0,0,0,0,0],
}
var count_clicks= 0;
function myInterval(i) {
  var interval = setInterval(function(){startInterval()}, 1000);
  function startInterval(){
    if(i <= 0){
      clearInterval(interval);
      can_click = false;      
      trial_no++;
      if(trial_no < 10){
        if((trial_no % 2) == 1){ //odd or even check
          left_right = "right";
          $("#left_or_right_trial").html("right");
        } else {
          left_right = "left";
          $("#left_or_right_trial").html("left");
        }
        myInterval(10)  
      }      
      //$("#btn").prop('disabled', true); //delete this line
    } else{
      can_click = true;
      i--;
      $("#timer").text(i);
     
    }
  }
}
function space_pressed(){
  
  
  if(can_click == true){ 
    count_clicks++
  }
  console.dir("hello");
  console.dir(left_right);
  $("#result").text(count_clicks);
  if(count_clicks == 1){
    myInterval(10);
  }
  
  var this_id = left_right+"_"+trial_no;
  
  trials[left_right][trial_no]++;
  $("#"+this_id).html(trials[left_right][trial_no]);
  
};
 
document.body.onkeyup = function(e){
  if (e.keyCode == 32){
     space_pressed();
     
     $("#btn").click();
      return false;
     }
     
}
#btn{
  height:30px;
  width:100px;
}
tr, th, td{
  border:1px solid black;
  padding:5px;
}
<script src="https://ajax.googlea.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="timer"></span> seconds<br>
<span id="result_left"></span><br>
<span id="result_right"></span><br>
<br>
<table>
  <tr>
    <td id="left_or_right_trial" colspan="6">Left
    </td>
  </tr>
  <tr>
    <th>hand</th>
    <th>trial 1</th>
    <th>trial 2</th>
    <th>trial 3</th>
    <th>trial 4</th>
    <th>trial 5</th>
  </tr>
  <tr>
    <th>left</th>
    <td id="left_0"></td>
    <td id="left_2"></td>
    <td id="left_4"></td>
    <td id="left_5"></td>
    <td id="left_8"></td>
  </tr>
  <tr>
    <th>right</th>
    <td id="right_1"></td>
    <td id="right_3"></td>
    <td id="right_4"></td>
    <td id="right_5"></td>
    <td id="right_7"></td>
  </tr>
</table>

本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处

赞 (947)
从 Web浏览器扫描条形码
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表（80条）