创建一个jquery秒表,从用户焦点开始,停止焦点并开始新的计时器

Question

我正在构建一个简单的Web应用程序,允许用户自己测试数学问题.用户首先选择她想要做的问题类型,然后选择她想做多少.

当用户遇到问题时,我想知道完成每个问题需要多长时间.这是显示页面上问题的代码:

function displayMult ($i)
{
echo '<table class="basic">';
    for($k=0; $k < $i; ++$k) // display problems
    {
        $user_response[$k] = 'user_response' . $k ;
        echo '<tr>';
        echo '<td>' . number_format($_SESSION['mult_one'][$k]) . '</td>';
        echo '<td>'. ' x ' . '</td>';
        echo '<td>' . number_format($_SESSION['mult_two'][$k]) . '</td>';
        echo '<td>' . ' =   <input type="text" class="field" name="user_response' . $k . '"' . 'id="u_r' . $k . '" />' . '</td>';
        echo '<td id="timer_' . $k . '">test</td>';
        echo '</tr>';
    }
echo '</table>';
}

这就是我用过的jQuery用户响应的时间.我遇到的问题是1)我无法想出一种写入的方法总是选择正确的计时器ID传递到秒表功能和2)停止旧计时器并开始新的计时器.当前代码仅对第一个问题计时,然后在用户单击下一个问题的输入字段时正确停止计时器.

$(document).ready(function() {
    $('.field').focus(stopwatch('#timer_0'));
});

function stopwatch(container) {
  var interval;
  return function() {
    if (interval) {
       clearInterval(interval); 
    }
    else{
        var count = 0;
        interval = setInterval(function() {
            count++;
            $(container).html(count + ' seconds');
        }, 1000);
    }
  };
}

我是jquery的新手,所以任何帮助和见解都将不胜感激!提前致谢.

Answer 1

这是我的尝试

var timer_id;

$(document).ready(function() {
    $('.field').focus(function() {
        $(this).addClass('active_input');
        timer_id = setInterval('tick()', 1000);
    }).blur(function() {
        $(this).removeClass('active_input');
        clearTimeout(timer_id);
    });
});

function tick() {
    var id_n = $('.active_input').attr('id').substring(3);
    var t_td = $('#timer_' + id_n);
    var t = parseInt(t_td.text(), 10);
    if (isNaN(t)) {
        t = '1 second';
    } else {
        t++;
        t += ' seconds'
    }
    t_td.text(t);
}