如何解决带有按钮和输入选择表的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">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。