时间戳

首页 > 解决方案 > 你如何实现一个计时器来计算用户在页面上提交表单所花费的时间

javascript - 你如何实现一个计时器来计算用户在页面上提交表单所花费的时间

问题描述

我最近开始使用 laravel 框架在 php 中编码，并试图将内容实现到现有页面中。我没有跟踪用户查看页面的时间，而是尝试跟踪用户从他们第一次单击输入框开始提交表单需要多长时间。

我创建了表单页面，并且正在使用一些基本的 JS 脚本，但无法让它工作。

    <form id="form" method="POST" action="/contact">
        <div class="row">
            <div class="col-md-6  col-12">
                <input type="text" placeholder="Name  *" name="name" class="form-control input" required>
                <br>
                <input type="text" placeholder="Email *" name="email" class="form-control" required>
                <br>
                <input type="text" placeholder="Phone *" name="phone" class="form-control" required>
            </div>

我希望计时器在用户单击 3 个输入框（姓名、电子邮件或电话）之一时开始计数，然后在用户单击提交后停止计数。

标签： javascriptlaravel

解决方案

有几种方法可以做到这一点，第一种更简单的是在 onClick 事件发生时保存时间戳，您可以使用如下函数：

发送开始时间

在表单中创建一个开始字段：

<form id="form" method="POST" action="/contact">
<input type="hidden" id="start" name="start" value="0">

在 onclick 事件上使用此函数：

function startValue(){
    const startEl = document.querySelector('#start');
    if (!startEl.value) {
        startEl.value = Date.now();
    }
}

document.querySelectorAll('.form-control').forEach(function(item){
    item.addEventListener('click',startValue);
});

开始时间将被发送到服务器，您可以在那里创建逻辑来提取经过的时间。

以秒为单位发送时间

第二种方法是创建一个“startCounter”函数并在 onclick 事件中调用它，然后他们使用表单提交函数上的值：

在 HTML 中添加一个隐藏的输入：

<form id="form" method="POST" action="/contact">
<input type="hidden" id="seconds" name="seconds">

并创建一个增加

let counter = 0;
let interval = 1000;  //1 second

function startCounter(){
    if (counter === 0) {
        setInterval(function(){
            counter++;
            document.querySelector('#seconds').value = counter;
        },interval);
    }
}

document.querySelectorAll('.form-control').forEach(function(item){
    item.addEventListener('click',startCounter);
});

推荐阅读