Question

我们正在准备一场游戏＆＃34;具有类功能的按钮，您可以尽可能频繁地单击以生成（此时）增加的随机数。但是，我们希望它在设定的时间段10秒后停止运行。

下面的点击代码用于生成数字，但不确定如何创建计时器以停止按钮，并且出于测试目的，显示警报。

 $('.click-button').click(function() {
     $('.score').html(function(i, val) {
         return val - Math.floor(Math.random() * -11);
     });
 });

Answer 1

我承认这有点像黑客攻击并且可以有更好的性能，但是对于这个例子它会起作用。

创建一个时间数组，用于存储记录点击事件的时间。 getTime()方法返回自1970年代以来的毫秒数。要获得秒数，我们只需将其乘以1000即可。

每次点击，我们都会检查自第一次点击以来是否已经过了10秒。

查看代码段

＆＃13;

var clickTimes = [];                         // Store click times here

/* Get number of ms since the epoch with getTime and add to array. On every click check whether the time has elapsed */

$('.click-button').click(function() {
    
  clickTimes.push(new Date().getTime());
  
    if (new Date().getTime() - clickTimes[0] < 10000) {
        $('.score').html(function(i, val) {
            return val - Math.floor(Math.random() * -11);
        });
    }
    else {
        $(".score").html("Time's up! Click again to try again!");
        
        clickTimes.length = 0;             // Clear array
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click-button">Generate Random Numbers</button>

<p class="score"></p>

＆＃13;

Answer 2

我们如何使用setInterval设置一个每秒递增1的变量，并且只有当该变量小于10时才允许单击才能运行：

在此示例中，您将在10秒后收到其他警报。

＆＃13;

   var time = 0;

function start() {
  setInterval(function() {
    var curr = $('#container').text();
    time++;
    $('#container').text(time);
  }, 1000);
}

$('#btn').on('click', function(e) {
  if ($('#container').text() < 11) {
     console.log('K cool, enough time left');
  } else {
     alert('TOO Late');
  }
})

start()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  0
</div>
<button id='btn'>Click me Before 10 seconds</button>

＆＃13;

按钮点击的计时器

2 个答案: