Question

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

我有以下HTML代码：

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

当我通过输入我的名字进入timer.php站点时，新选项卡应计算在此页面上花费的时间，并使用我输入的名称将其保存在任何位置（文件或数据库）并每半小时自动保存一次。 / p>

当前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>

我的timer.php：

<?php
header('Content-Type: text/html; charset=Windows-1250');
$firstName = $_POST['firstname'];
$minutes = $_POST['minutes'];
$seconds = $_POST['seconds'];
?>


<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=Windows-1250" />

</head>
<body>



<
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">



</body>
</html>

Answer 1

使用ajax来计算页面停留时间。对于自动保存，请调用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>

在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">

HTML / JS /在标签中花费的时间

1 个答案: