JS按钮点击计数器与定时器和输入选择表格

Question

首先，我对JS和jQuery还很陌生。以下是我11岁儿子的想法，我试图实现：

A"；点击按钮"；计数器，运行由输入形式选择值给定的定义时间

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

这是我所拥有的：

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

您需要更新run_for&CCD_ 3代码中每次CCD_。还增加了新的函数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">