在jquery中设置计数器

Setting up a counter in jquery

本文关键字：计数器 设置 jquery      更新时间：2023-09-26

我有一个表单，其中包括基本的客户详细信息和信息。我已经使用jquery来计算表单中的字符总数，现在我试图实现计数器来查看填写表单所花费的总时间，我的代码如下

   <html>
        <title>  Employment Information
        </title>
      <style>
    table, td, th {
        border: 3px solid black;
    }
    td {
        padding: 15px;
    }
    </style>
    <script src="javascript/jquery-1.11.0.js"></script> 
 // codes for getting total number of charatecs typed //
    <script>
                    $('#form_3').on('submit', function(){
                         var count = 0;
                         $('input[type="text"], textarea', this).each(function(){
                         count += $(this).val().length;
                            });
                           alert("No of Characters Typed:" +count);
                           return true; // or true to submit form
                        });   
    </script>

        <body>
            <h4>MONTHLY INCOME AND COMBINED HOUSING EXPENSE INFORMATION</h4>

                <table border="1"  width="1300" height="150">
                  <tr>
                    <td>Gross monthly income</td>
                    <td>Borrower</td>
                    <td>Co-borrower</td>
                    <td>Total</td>
                    <td>Combined Monthly Housing Exp.</td>
                    <td>Present</td>
                    <td>Proposed</td>
                </tr>
                 <tr>
                 <td>Base EMPL income<</td>
                 <td>$::<input type="text" name="empl_income" id="empl_income"></td>
                 <td>$::<input type="text" name="co_borrower" ></td>
                 <td>$::<input type="text" name="base_empl_total"></td>
                    <td>Rent</td>
                    <td>$::<input type="text" name=""></td>
                     <td>$::<input type="text" name="years"></td>
                 </tr>
                   <tr>
                 <td>Overtime</td>
                 <td>$::<input type="text" name="overtime_borrower"></td>
                 <td>$::<input type="text" name="overtime_coborrower"></td>
                  <td>$::<input type="text" name="overtime_total"></td>
                 <td>Mortgaged</td>
                 <td>$::<input type="text" name="years"></td>
                  <td>$::<input type="text" name="years"></td>
                 </tr>
                 </table>
           <br>
           <br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        <input type="submit" name="submit" value="SUBMIT" onclick="return validateform();">
           </form> 
        </body>
    </html>

我如何实现一个时间计数器随着字符计数代码。

稍微改进了@danfromgermany的回答:

var timeStart;
var timeStop;
$("input").keyup(function () {
    if (!timeStart) {
        timeStart = new Date();
    }
});
$('#form_3').on('submit', function () {
    timeStop = Math.round((new Date().getTime() - timeStart.getTime()) / 1000);
    console.debug('time taken from load till submit: ' + timeStop);
});

当第一次编辑任何输入时，计时器就会启动

var timeStart;
var timeStop;
$(document).load(function() {
    timeStart = new Date();
});
$('#form_3').on('submit', function() {
    timeStop = Math.round((timeStart.getTime() - Date().getTime()) / 1000);
    console.debug('time taken from load till submit: ' + timeStop);
});
相关文章：