拍卖式倒计时

Question

我已经试了好几天了，所以我终于觉得我该问了。下面我会发布我所拥有的，任何直接的解决方案都将是很棒的。我会尽量详细。

我需要创建什么？

带有与MySQL交互的拍卖类型倒计时，以检索所讨论项目的结束时间。我也将使用Javascript获得一个实时倒计时动画。它需要使用服务器时间，而不是用户在其计算机上的时间，而这些时间似乎不起作用。

文件类型使用

MySQL，Javascript

特别说明

我还必须确保时间来自服务器，而不是目标计算机。如果有更好的方法来做我正在尝试的事情，请告诉我。我已经做了大量的研究，但还是不能让它发挥作用。

文件名

index.php           - Main File
db.php              - Connection to DB          - within "system" folder
functions.php       - Contains all functions.   - within "system" folder

DataBase Info

Table Name: time 
Fields : id, name, end_time

关于DataBase的注释："end_time“是一个TimeStamp

index.php

 <?
   // Calls the DB for Connection
   include("system/db.php"); 
   // Calls all Functions
   include("system/functions.php"); 
 ?>

 <!-- Loads the actual Countdown -->
  <div id="countdowncontainer"></div>
 <br />

 <?
 // This Part loads the "end_date" so the countdown can stop.
 ////////////////////////////////////////////////////////////
   $id_num = "1";
   $result = mysql_query("SELECT * FROM item WHERE id = '$id_num'");
   while($row = mysql_fetch_array($result))
   {
         $end_time = $row['end_date'];   // 2013-12-11 00:00:00
         $end_time = $end_time ;
   }
 ?>


  <!-- The script below loads the data from the server in this format : 
  2013-12-11 00:00:00 -->
    <script type="text/javascript">

      var futuredate=new cdtime("countdowncontainer", "<? echo $end_time; ?>")
         futuredate.displaycountdown("days", formatresults)

    </script>

下面的文件是函数文件。这就是我假设我需要更改或做一些事情的地方，这样它就可以加载服务器时间而不是本地时间。

functions.php

<script type="text/javascript">
    function cdtime(container, targetdate) {
        if (!document.getElementById || !document.getElementById(container)) return
        this.container = document.getElementById(container)
        this.currentTime = new Date()
        this.targetdate = new Date(targetdate)
        this.timesup = false
        this.updateTime()
    }

    cdtime.prototype.updateTime = function () {
        var thisobj = this
        this.currentTime.setSeconds(this.currentTime.getSeconds() + 1)
        setTimeout(function () {
            thisobj.updateTime()
        }, 1000) //update time every second
    }

    cdtime.prototype.displaycountdown = function (baseunit, functionref) {
        this.baseunit = baseunit
        this.formatresults = functionref
        this.showresults()
    }

    cdtime.prototype.showresults = function () {
        var thisobj = this


        var timediff = (this.targetdate - this.currentTime) / 1000 //difference btw target date and                                                                 current date, in seconds
        if (timediff < 0) { //if time is up
            this.timesup = true
            this.container.innerHTML = this.formatresults()
            return
        }
        var oneMinute = 60 //minute unit in seconds
        var oneHour = 60 * 60 //hour unit in seconds
        var oneDay = 60 * 60 * 24 //day unit in seconds
        var dayfield = Math.floor(timediff / oneDay)
        var hourfield = Math.floor((timediff - dayfield * oneDay) / oneHour)
        var minutefield = Math.floor((timediff - dayfield * oneDay - hourfield * oneHour) / oneMinute)
        var secondfield = Math.floor((timediff - dayfield * oneDay - hourfield * oneHour - minutefield * oneMinute))
        if (this.baseunit == "hours") { //if base unit is hours, set "hourfield" to be topmost  level
            hourfield = dayfield * 24 + hourfield
            dayfield = "n/a"
        } else if (this.baseunit == "minutes") { //if base unit is minutes, set "minutefield" to be    topmost level
            minutefield = dayfield * 24 * 60 + hourfield * 60 + minutefield
            dayfield = hourfield = "n/a"
        } else if (this.baseunit == "seconds") { //if base unit is seconds, set "secondfield" to be  topmost level
            var secondfield = timediff
            dayfield = hourfield = minutefield = "n/a"
        }
        this.container.innerHTML = this.formatresults(dayfield, hourfield, minutefield, secondfield)
        setTimeout(function () {
            thisobj.showresults()
        }, 1000) //update results every second
    }




    function formatresults() {
        if (this.timesup == false) { //if target date/time not yet met
            var displaystring = arguments[0] + " days " + arguments[1] + " hours " + arguments[2] + " minutes     " + arguments[3] + " seconds <b>left until Target Date </b>"
        } else { //else if target date/time met
            var displaystring = "<? $test2 = "
            Test Is a Success ";?><b><? echo $test2; ?></b>"
        }
        return displaystring
    }
</script>

现在，这在某种程度上是可行的。然而，如果我改变我的本地时间，我可以欺骗它，而不是时间是服务器的时间，因为这是不能改变的。

我遗漏了什么？

Answer 1

这将是一种更好的方法，可以以毫秒(或秒)为单位检索计数器长度，然后将其传递给您的javascript函数以创建targetdate。这样，倒计时就相对于用户而言。例如：

1. 用户生活在一个时区+5小时从您的服务器
2. 你的倒计时将在17:00 04/12/2013 (服务器)结束。
3. 对于实际用户，倒计时将于2013年12月22日04:00结束。

(如果不将其保存在用户的本地，则时间安排将是不正确的，很容易开始混淆用户。)

向日期添加毫秒的示例(这将使Javascript日期增加5个小时)：

var targetdate=new Date(currentTime.getTime() + 18000000);

获取时间差的示例(使用Javascript)：

// PHP
//Get current date
$currdate = date('Y-m-d H:i:s');
$end_time = $row['end_date'];   // 2013-12-11 00:00:00
$end_time = $end_time;

// Javascript
//Pass current date to the Javascript function
var futuredate=new cdtime("countdowncontainer", "<? echo $currdate; ?>", "<? echo $end_time; ?>")

function cdtime(container, currentdate, targetdate) {
    if (!document.getElementById || !document.getElementById(container)) return
    this.container = document.getElementById(container)
    this.currentTime = new Date()
    //Creates temp date variables
    var curDate = new Date(currentdate);
    var endDate = new Date(targetdate);
    //Gets time Difference in Milliseconds
    var diff = endDate.getTime() - curDate.getTime();
    //Sets targetdate to be the current date + the difference
    this.targetdate = new Date(currentTime.getTime() + diff)
    this.timesup = false
    this.updateTime()
}

Answer 2

问题在于：

   this.currentTime=new Date()

您正在使用本地客户端日期作为“当前”日期。相反，您应该传递它，就像您对目标日期所做的一样。

就像这样

   (php)
   $current_time = date( 'Y-m-d H:i:s' );

   (javascript)
   var futuredate = new cdtime( "countdowncontainer", "<? echo $current_time; ?>", "<? echo $end_time; ?>")

和

   function cdtime(container, currentdate, targetdate) {
     ...
     this.currentdate=new Date(currentdate)

完成后，您可以让时钟与您的超时功能。

然而，这将导致时间缓慢(注意它有时是如何在eBay上这样做的)。

绕过去的方法是，时不时地询问服务器一次又一次。并重置“currentTime”。您可以通过使用PHP实现一个简单的服务来做到这一点，该服务可能以JSON的形式返回时间，然后使用AJAX调用它。