带有计时器和输入-select形式的JS按钮点击计数器

Question

首先，我对JS和jQuery真的很陌生。以下是我11岁儿子的一个想法，我试着去实现：

一个“点击按钮”计数器，它运行定义的时间，该时间由输入形式 select 值给出。

我的目标是，如果选择了 select 值，则该值应该直接可用，并在单击按钮后启动的计时器功能中使用...如果什么都没有 selected，计时器应该使用 select 形式的预 selected 值。

这是我的资料：

$("#mySelect").on("change", function() {
  //Getting Value
  var selValue = $("#mySelect").val();
  //Setting Value
  $("#mySelectedValue").val(selValue);
  console.log(selValue);
});

var running = false,
  count = 0,
  //run_for = 5000; // 1000 = 1 Second
  run_for = $("#mySelect").val();

var seconds = (run_for / 1000);

var end_counter = function() {
  if (running) {
    running = false;
    $("#status").text("Click and go!");
    alert("Clicks: " + count);
    started_at = 0;
  }
};

$('button').click(function() {
  if (running) {
    count++;
    var clickspersecond = (count / (run_for / 1000));
    $("#seconds").text(seconds);
    $("#clicks").text(count);
    $("#cps").text(clickspersecond);

  } else {
    running = true;
    $("#status").text("Time is running...");
    count = 1;
    setTimeout(end_counter, run_for);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<button>Click me</button>

<div id="status">Click and go...</div>
<p>Timer: <span id="seconds"></span></p>
<p>Clicks: <span id="clicks"></span></p>
<p>Clicks per second: <span id="cps"></span></p>
</div>

<select id="mySelect" class="form-control">
  <option value="3000" selected>3 Seconds</option>
  <option value="4000">4 Seconds</option>
  <option value="5000">5 Seconds</option>
  <option value="6000">6 Seconds</option>
</select>

<input type="text" id="mySelectedValue" class="form-control" placeholder="get value of mySelect form">

Answer 1

您需要每次从 else {} 代码更新 run_for & seconds 值。还添加了新函数 updateTimer，它将设置 timer 值并在每 1 秒后再次调用自身，直到 seconds >= 0.

run_for = $("#mySelect").val(); // Update run_for value
seconds = (run_for / 1000); // Update seconds value   
updateTimer(); // Call updateTimer function.

在下面试试。

$("#mySelect").on("change", function() {
  //Getting Value
  var selValue = $("#mySelect").val();
  //Setting Value
  $("#mySelectedValue").val(selValue);
  console.log(selValue);
});

var running = false,
  count = 0,
  //run_for = 5000; // 1000 = 1 Second
  run_for = $("#mySelect").val();

var seconds = (run_for / 1000);

var end_counter = function() {
  if (running) {
    running = false;
    $("#status").text("Click and go!");
    alert("Clicks: " + count);
    started_at = 0;
  }
};

function updateTimer() {
  // set seconds
  $("#seconds").text(seconds);
  seconds--;
  // if running = true and seconds >= 0 then reinvole this function after 1 second.
  if (running && seconds >= 0) {
    setTimeout(updateTimer, 1000);
  }
}

$('button').click(function() {
  if (running) {
    count++;
    var clickspersecond = (count / (run_for / 1000));
    $("#clicks").text(count);
    $("#cps").text(clickspersecond);

  } else {
    running = true;
    $("#status").text("Time is running...");
    count = 1;
    run_for = $("#mySelect").val(); // Update run_for value
    seconds = (run_for / 1000); // Update seconds value    
    updateTimer(); // Call updateTimer function.
    setTimeout(end_counter, run_for);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<button>Click me</button>

<div id="status">Click and go...</div>
<p>Timer: <span id="seconds"></span></p>
<p>Clicks: <span id="clicks"></span></p>
<p>Clicks per second: <span id="cps"></span></p>
</div>

<select id="mySelect" class="form-control">
  <option value="3000" selected>3 Seconds</option>
  <option value="4000">4 Seconds</option>
  <option value="5000">5 Seconds</option>
  <option value="6000">6 Seconds</option>
</select>

<input type="text" id="mySelectedValue" class="form-control" placeholder="get value of mySelect form">

带有计时器和输入-select形式的JS按钮点击计数器

JS button click counter with timer and input-select form

javascript

jquery

user-input