現在の時刻から将来の設定時刻までカウントダウンするカウントダウンタイマーを作成しようとしています。JSだけを使用して完全に機能しましたが、クライアントではなくサーバーの現在の時刻を使用する必要があります。
PHP を使用してサーバーのエポック時間を取得することでこれを試みました。次に、それを毎秒インクリメントし、Javascript Date オブジェクトに変換して、比較を行い、残りの時間を DOM に書き込むことができるようにします。これが可能かどうか、またはそれを行うための最良の方法であるかどうかはわかりませんが、現時点では、サーバーから有効/正しい日付をインクリメントしたり提供したりしません。
<!DOCTYPE html>
<?php
$end_time = $_GET['time'];
$server_epoch = $_SERVER['REQUEST_TIME'];
?>
<html>
<head>
<script type="text/javascript">
var counter = setInterval(function(){
countdown(<?= $server_epoch ?>, "<?= $end_time?>");
server_e++;
}, 1000);
/*
* Calculates the time remaining to the nearest second from the current time until the
* end time and updates DOM elements with id of "time" to display the formatted time(D,H,M,S)
*/
function countdown(server, end_time){
var current_time = new Date(server);
var end = new Date(end_time);
var time_left = (end - current_time) / 1000;
if(time_left <= 0){
document.getElementById("time").innerHTML= "Auction has ended" ;
} else {
var days = Math.floor(time_left / 86400);
var hours = Math.floor(((time_left / 86400)-days) * 24);
var mins = Math.floor(((((time_left / 86400)-days) * 24)-hours)* 60);
var secs = Math.floor(((((((time_left / 86400)-days) * 24)-hours)* 60)-mins) * 60);
var day_string = " days, ";
if (days == 1){
day_string = " day, "
}
document.getElementById("time").innerHTML= days + day_string + hours +" hours, " + mins +" mins, "+ secs+" secs" ;
document.getElementById("current").innerHTML= current_time ;
document.getElementById("ends").innerHTML= end ;
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<div id="time_box">
<form method="get" action="index.php">
<input type="text" name="time"/>
<input type="submit" value="submit">
</form>
php time: <?= $server_epoch; ?><br/>
Current time: <div id="current"></div> <br/>
Ends: <div id="ends"></div><br/>
Time left: <div id="time"></div>
</div>
</body>
</html>