Javascript HTML/JS/在选项卡中花费的时间_Javascript_Php_Html_Mysql

Javascript HTML/JS/在选项卡中花费的时间

javascript php html mysql

Javascript HTML/JS/在选项卡中花费的时间,javascript,php,html,mysql,Javascript,Php,Html,Mysql,我有一个非常具体的问题。我浏览了整个互联网寻找解决方案，但没有发现任何有用的东西我有以下HTML代码： <form action="/timer.php" method="POST"> <span>First Name:</span><input name="firstname" type="text" /> <input type="submit" value="Submit"> </f

我有一个非常具体的问题。我浏览了整个互联网寻找解决方案，但没有发现任何有用的东西

我有以下HTML代码：

    <form action="/timer.php" method="POST">
      <span>First Name:</span><input name="firstname" type="text" />
      <input type="submit" value="Submit">
    </form>


名字：

当我通过输入我的名字进入timer.php站点时，新的选项卡应该计算在这个页面上花费的时间，并用我输入的名字将它保存到任何地方（文件或数据库），每半小时自动保存一次

当前html

<html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>

function call_ajax(pageOpen, firstname){
pageClose =new Date(); 

//count spent minutes and seconds on page
minutes= pageClose.getMinutes() - pageOpen.getMinutes(); 
seconds= pageClose.getSeconds() - pageOpen.getSeconds(); 

//send the spent minutes, seconds and firstname to timer.php file
$.ajax({ 
url: "timer.php",
data: {'minutes': Math.abs(minutes), 'seconds':Math.abs(seconds), 'firstname':firstname}
})

}

$(document).ready(function() {
//When open the page get the current time
var pageOpen = new Date();

//call the ajax to send the request in timer.php every 30 min
setInterval(function(){var firstname = $('#firstname').val();call_ajax(pageOpen, firstname); }, 1000 * 60 * 30);

$("button").click(function(e){
e.preventDefault();
//call the ajax to send the request in timer.php on click the button
var name = $('#firstname').val();
call_ajax(pageOpen, name);
});
});

</script
</head>
<body>
<form action="/timer.php" method="POST" name="timer" >
 <span>First Name:</span><input name="firstname" type="text" id="firstname" />

<input type="submit" value="Submit">
</form>




</body>
</html>


函数调用\u ajax（pageOpen，firstname）{
pageClose=新日期（）；
//计算在页面上花费的分钟和秒数
分钟数=pageClose.getMinutes（）-pageOpen.getMinutes（）；
seconds=pageClose.getSeconds（）-pageOpen.getSeconds（）；
//将花费的分钟、秒和名字发送到timer.php文件
$.ajax（{
url:“timer.php”，
数据：{'minutes'：Math.abs（分钟），'seconds'：Math.abs（秒），'firstname'：firstname}
})
}
$（文档）.ready（函数（）{
//打开页面时获取当前时间
var pageOpen=新日期（）；
//每隔30分钟调用ajax以timer.php格式发送请求
setInterval（function（）{var firstname=$（'#firstname'）.val（）；call_ajax（pageOpen，firstname）；}，1000*60*30）；
$（“按钮”）。单击（功能（e）{
e、 预防默认值（）；
//单击按钮，调用ajax在timer.php中发送请求
var name=$（'#firstname'）.val（）；
调用_ajax（pageOpen，name）；
});
});




马金什的时刻：最重要的时刻

使用ajax计算页面上花费的时间。对于Autosave，请调用方法setInterval

这是完整的代码

idex.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>

function call_ajax(pageOpen, firstname){
pageClose =new Date(); 

//count spent minutes and seconds on page
minutes= pageClose.getMinutes() - pageOpen.getMinutes(); 
seconds= pageClose.getSeconds() - pageOpen.getSeconds(); 

//send the spent minutes, seconds and firstname to timer.php file
$.ajax({ 
        url: "timer.php",
        type: "POST",
         data: {'minutes': Math.abs(minutes), 'seconds':Math.abs(seconds), 'firstname':firstname},
         success: function(result){
         $('#result').html(result);
         }
      })

}


$(document).ready(function() {
  //When open the page get the current time
  var pageOpen = new Date();

  //call the ajax to send the request in timer.php every 30 min
  setInterval(function(){var firstname = $('#firstname').val();call_ajax(pageOpen, firstname); }, 1000 * 60 * 30);


  $("button").click(function(e){
  e.preventDefault();
  //call the ajax to send the request in timer.php on click the button
      var name = $('#firstname').val();
      call_ajax(pageOpen, name);

   });
});




</script>
</head>
<body>

<!-- Form --->
<form name="timer" method="POST">
<span>First Name:</span><input name="firstname" type="text" id="firstname" />
<button>Submit</button>
</form>

<div id="result"></div>

</body>
</html>


函数调用\u ajax（pageOpen，firstname）{
pageClose=新日期（）；
//计算在页面上花费的分钟和秒数
分钟数=pageClose.getMinutes（）-pageOpen.getMinutes（）；
seconds=pageClose.getSeconds（）-pageOpen.getSeconds（）；
//将花费的分钟、秒和名字发送到timer.php文件
$.ajax（{
url:“timer.php”，
类型：“POST”，
数据：{'minutes'：Math.abs（分钟），'seconds'：Math.abs（秒），'firstname'：firstname}，
成功：功能（结果）{
$（'#result'）.html（result）；
}
})
}
$（文档）.ready（函数（）{
//打开页面时获取当前时间
var pageOpen=新日期（）；
//每隔30分钟调用ajax以timer.php格式发送请求
setInterval（function（）{var firstname=$（'#firstname'）.val（）；call_ajax（pageOpen，firstname）；}，1000*60*30）；
$（“按钮”）。单击（功能（e）{
e、 预防默认值（）；
//单击按钮，调用ajax在timer.php中发送请求
var name=$（'#firstname'）.val（）；
调用_ajax（pageOpen，name）；
});
});
名字：
提交

在timer.php文件中获取ajax请求。并保存在数据库或文件中

timer.php

<?php
header('Content-Type: text/html; charset=Windows-1250');
$firstName = $_POST['firstname'];
$minutes = $_POST['minutes'];
$seconds = $_POST['seconds'];
?>
Meno Užívateľa:   <b>  <?= $firstName ?>    </b>
</br>
</br>
Momentálne majníš :   <b> <?= $minutes ?>  Minút  </b>    <b>   a   </b>   <b>   <?= $seconds ?>  Sekúnd   </b>
 </br>
</br>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">


Meno Užívateľa：




马金什的时刻：最重要的时刻

我不知道我是否做错了什么，但它对我不起作用：这是我的代码，格式为idex.html:First Name:这是我的计时器php:header（'Content-Type:text/html；charset=Windows-1250'）$firstName=$_POST['firstName']$分钟=$_POST['minutes']$秒数=$_POST['seconds']；？>Čas:Minút a Sekúnd在idex.html中，在我更新的任何地方都放上完整的代码。我每半小时使用ajax进行一次autosave。我添加了。。。我正在编辑这篇文章，因为我不能把它贴在这里。编辑帖子。

<?php
header('Content-Type: text/html; charset=Windows-1250');
$firstName = $_POST['firstname'];
$minutes = $_POST['minutes'];
$seconds = $_POST['seconds'];
?>
Meno Užívateľa:   <b>  <?= $firstName ?>    </b>
</br>
</br>
Momentálne majníš :   <b> <?= $minutes ?>  Minút  </b>    <b>   a   </b>   <b>   <?= $seconds ?>  Sekúnd   </b>
 </br>
</br>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">