0

私の最終的な目標は、ユーザーが指定した間隔で音を出すタイマーを作成することです。たとえば、フィールドに 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);
  }

});
4

3 に答える 3

1

コードはそのままで動作しますが、いくつかの変更を加えるとより明確になります。

http://jsfiddle.net/PxENF/3/

$(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);
  }

});
于 2013-01-07T21:53:45.553 に答える
0 
$('#go').click(function() {
    interval = $('#ping_val').val();
    $('#ping_alert').text('The ping will sound every ' + interval + ' milliseconds.');
    setInterval(timer, interval); 
  });
于 2013-01-07T21:51:40.627 に答える
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); 
  });

「go」をクリックするたびに、新しい間隔が開始されることに注意してください。これらは互いに干渉します。これはより良いでしょう：

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); 
  });
于 2013-01-07T22:14:58.273 に答える