带有按钮和输入选择表的JS按钮单击计数器

问题描述

首先，我真的是JS和jQuery的新手。以下是我11岁儿子想要实现的想法：

“点击按钮”计数器，其运行由输入表单选择值指定的定义时间。

我的目标是，如果选择了选择值，则该值应直接可用并在计时器功能中使用，如果单击该按钮，计时器功能将启动...如果未选择任何内容，计时器应使用预选择表单的选定值。

这就是我所拥有的：

$("#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">

解决方法

您每次需要从run_for代码中更新seconds和else {}的值。还添加了新函数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">