Question

我有一个包含基本客户端详细信息和信息的表单。已经使用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>

如何实现时间计数器和字符数代码。？

Answer 1

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

Answer 2

稍微改善了@ 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);
});

此处计时器在第一次编辑任何输入时启动

在jquery中设置计数器

2 个答案: