我的最终目标是创建一个计时器,以用户提供的间隔产生声音。例如,他们将10输入到一个字段中,然后每10秒发出一次蜂鸣声。现在,我只是在获取setInterval以显示跨度中的效果时遇到问题。任何让我回到正轨的帮助非常感谢。谢谢!
<div id="ping_div">
<p>
Enter the desired interval in milliseconds to sound ping noise. <br />
<input id="ping_val" type="text" /> <input id="set_ping" type="button" value="Submit" /><span id="ping_alert"></span>
</p>
<p>
<input id="go" type="button" value="Click to Start Pings" />
<span id="progress"></span>
</p>
</div>
____________________________
$(document).ready(function() {
$('#set_ping').click(function() {
interval = $('#ping_val').val();
$('#ping_alert').text('The ping will sound every ' + interval + ' milliseconds.');
});
$('#go').click(function() {
setInterval(timer, interval);
});
function timer() {
var base = base + interval;
$('#progress').text(base);
}
});
答案 0 :(得分:1)
您的代码按原样运行,但如果您进行了一些更改,则会更加明显:
$(document).ready(function() {
var base = 0, interval = 1000; // <-----
$('#set_ping').click(function() {
interval = parseInt($('#ping_val').val(),10); // <-----
$('#ping_alert').text('The ping will sound every ' + interval + ' milliseconds.');
});
$('#go').click(function() {
setInterval(timer, interval);
});
function timer() {
base = base + interval; // <-----
$('#progress').text(base);
}
});
答案 1 :(得分:0)
$('#go').click(function() {
interval = $('#ping_val').val();
$('#ping_alert').text('The ping will sound every ' + interval + ' milliseconds.');
setInterval(timer, interval);
});
答案 2 :(得分:0)
您可以在不声明全局变量的情况下使间隔自我支持:
$("#go").click(function() {
var interval = $("#ping_val").val();
setInterval(function(){
var progress = $("#progress");
var html = progress.html();
var offset = html.length > 0 ? parseInt(html) : 0;
progress.html(offset + interval);
}, interval);
});
请记住,每次单击“开始”时,都会启动新的间隔。这些会干扰彼此。这会更好:
var runningInterval = 0;
$("#go").click(function() {
clearInterval(runningInterval);
$("#progress").html("0");
var interval = $("#ping_val").val();
runningInterval = setInterval(function(){
var progress = $("#progress");
var html = progress.html();
var offset = html.length > 0 ? parseInt(html) : 0;
progress.html(offset + interval);
}, interval);
});