JavaScript 获取 PHP 时间并显示在页面 - 剩余时间计算 - 常规

JavaScript 获取 PHP 时间并显示在页面 - 剩余时间计算

本文将介绍如何使用 JavaScript 获取 PHP 返回的时间，并将其转换为天、时、分、秒的形式，然后在网页上显示剩余时间。

场景: 假设您有一个 PHP 脚本 time.php，该脚本从数据库中获取一个卡号的过期时间，并计算剩余时间。现在，您想在 HTML 页面上使用 JavaScript 获取 time.php 返回的时间，并将结果显示出来。

解决方案:

修改 time.php 代码:

<?php
  include("con.php");
  $card = $_GET["card"];
  $query = mysqli_query($conn, "SELECT expire FROM cardh WHERE card='{$card}'");
  $result = mysqli_fetch_array($query);
  $expire = strtotime($result['expire']);
  $current_time = time();
  $now = strtotime(date("Y-m-d H:i:s"));
  $remaining_time = $expire - $now;
  echo $remaining_time;
?>

编写 HTML 页面代码:

<!DOCTYPE html>
<html>
<head>
	<title>Remaining Time</title>
	<script type="text/javascript">
		function getTime() {
			var card = document.getElementById("card").value;
			var xhr = new XMLHttpRequest();
			xhr.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {
					var remaining_time = parseInt(this.responseText);
					var days = Math.floor(remaining_time / (24*60*60));
					var hours = Math.floor((remaining_time % (24*60*60)) / (60*60));
					var minutes = Math.floor((remaining_time % (60*60)) / 60);
					var seconds = Math.floor(remaining_time % 60);
					document.getElementById("days").innerHTML = days + " days";
					document.getElementById("hours").innerHTML = hours + " hours";
					document.getElementById("minutes").innerHTML = minutes + " minutes";
					document.getElementById("seconds").innerHTML = seconds + " seconds";
				}
			};
			xhr.open("GET", "time.php?card=" + card, true);
			xhr.send();
		}
	</script>
</head>
<body>
	<input type="text" id="card" placeholder="Enter card number">
	<button onclick="getTime()">Get Remaining Time</button>
	<div id="remaining_time">
		<p id="days"></p>
		<p id="hours"></p>
		<p id="minutes"></p>
		<p id="seconds"></p>
	</div>
</body>
</html>

解释:

time.php 使用 mysqli_query 从数据库 cardh 中获取卡号 card 的过期时间 expire，然后计算剩余时间并将其以秒数形式返回给 JavaScript。
HTML 页面中，用户在输入框中输入卡号，点击按钮后，JavaScript 会使用 XMLHttpRequest 向 time.php 发送 GET 请求。
XMLHttpRequest 的 onreadystatechange 事件监听器在 time.php 返回数据后被触发，JavaScript 将返回的秒数转换为天、时、分、秒，并将结果显示在页面上。

注意:

该示例中使用了 mysqli_query 连接数据库，您可以根据自己的实际情况进行调整。
time.php 返回的剩余时间是以秒为单位的整数，您可以根据需要调整 time.php 的返回格式，例如使用 JSON 格式返回更多信息。
如果您需要定期更新剩余时间，可以使用 JavaScript 的 setInterval 函数来实现。

通过以上步骤，您就可以在网页上实时显示 PHP 计算的剩余时间。