基于JS和jQuery的带选择表单计时的按钮点击计数器开发求助

Hey there! Let's get this click counter working perfectly for your son—what a fun little project to build together 😊

Looking at your code, the main issue is that the timer duration (run_for and seconds) only gets set once when the page loads. When you change the dropdown selection, you're updating the input field but not the variables that actually control the timer. That's why the new duration doesn't take effect when you start the counter.

Here's the fixed, complete code with explanations of the key changes:

Full Working Code #

<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> 

<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">

// Initialize global variables
var running = false, count = 0;
var run_for = parseInt($("#mySelect").val()); // Convert value to number for timing
var seconds = run_for / 1000;

// Update duration when dropdown changes
$("#mySelect").on("change", function() { 
    var selValue = $(this).val(); 
    $("#mySelectedValue").val(selValue); 
    // Update global timer variables to the new selection
    run_for = parseInt(selValue);
    seconds = run_for / 1000;
    // Show the new duration immediately in the UI
    $("#seconds").text(seconds);
    console.log(selValue); 
}); 

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

// Button click handler
$('button').click(function() { 
    if (running) { 
        count++; 
        // Calculate clicks per second with clean decimal formatting
        var clickspersecond = count / seconds;
        $("#clicks").text(count); 
        $("#cps").text(clickspersecond.toFixed(2)); 
    } else { 
        running = true; 
        $("#status").text("Time is running..."); 
        count = 1; 
        // Reset UI with current duration values
        $("#seconds").text(seconds);
        $("#clicks").text(count);
        $("#cps").text((count / seconds).toFixed(2));
        // Start timer with the latest selected duration
        setTimeout(end_counter, run_for); 
    } 
}); 

// Set initial timer display on page load
$("#seconds").text(seconds);

Key Changes Explained #

• Global Variable Sync: When the dropdown selection changes, we now update the run_for and seconds variables directly. This ensures the next time you start the counter, it uses the newly chosen duration.
• Number Conversion: We use parseInt() to turn the dropdown's string value into a number (since val() returns text, and we need numeric values for timing calculations).
• Immediate UI Feedback: The displayed timer updates right when you change the dropdown, so your son can see exactly how much time he has to click.
• Cleaner CPS Display: Added .toFixed(2) to the clicks-per-second calculation to avoid messy long decimal numbers.
• Removed Unused Code: Got rid of the started_at variable since it wasn't serving any purpose in your logic.

Now when you pick a new duration from the dropdown, it'll be ready to go the next time you click the button. If you leave the dropdown as-is, it uses the default 3-second value like expected.

内容的提问来源于stack exchange，提问作者Kai L.