创建一个jquery秒表，它从用户焦点开始，在焦点输出时停止，并开始一个新的计时器

我正在开发一个简单的网络应用程序，允许用户对自己的数学问题进行测试。用户首先选择要解决的问题类型，然后选择要解决的问题数量

由于用户正在处理这些问题，我想计算一下完成每个问题所需的时间。这是在页面上显示问题的代码：

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的新手，因此任何帮助和见解都将不胜感激！提前感谢。

第一部分： 您可能不想在stopwatch中返回函数，而是想在focus（）调用中放入一个内联函数，该函数从字段中获取有关应该发送到哪个计时器的信息。如果您至少使用了jQuery 1.5，那么可以在HTML中设置一个属性，您可以使用jQuery.data（）方法检索该属性

第二部分： 这里遇到的问题是，稍后调用计数和间隔句柄时，它们不在正确的范围内。实际上，只需再次使用.data（）在计时器元素上存储开始时间，然后在每个字段的模糊事件上附加一个处理程序，以停止该事件并显示结果，就可以在没有间隔的情况下执行此操作

以下是PHP：

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 data-timer="#timer_' . $k . '" type="text" class="field" name="user_response' . $k . '"' . 'id="u_r' . $k . '" />' . '</td>';
        echo '<td id="timer_' . $k . '">test</td>';
        echo '</tr>';
    }
echo '</table>';
}

这是我的努力

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

---

谢谢你，马吉德！这项工作做得很好，完全达到了我的目的。我感谢你抽出时间来帮忙！谢谢你花时间帮忙！我尝试了几次这段代码，但不幸的是它无法工作。考虑到我以前从未使用过.data（），我可能错过了一些东西。感谢你的努力。对不起，我发现了一些以前的错误，现在我已经改正了。

$(document).ready(function() {
    $('.field').focus(function() {
        var timer_id = $(this).data("timer");
        stopwatch("#" + timer_id);
    });
    $('.field').blur(function() {
        var timer_id = $(this).data("timer");
        stopwatch("#" + timer_id);
    });
});

function stopwatch(container_id) {
  var $container = $(container_id);
  var time_now = new Date();
  var time_started = $container.data("time");
  if (time_started) {
    time_taken = time_now - time_started; // This is in milliseconds
    $container.html(time_taken / 1000 + ' seconds');
  }
  else {
    $container.data("time", time_now);
  }
}

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