拍卖类型倒计时

时间:2013-12-04 08:54:47

标签: javascript php mysql

我一直在努力,所以我终于想到我应该问。下面我将发布我的内容,任何直接的解决方案都会很棒。我会尽量详细说明。

我需要创建什么?

与MySQL交互的拍卖类型倒计时,以检索相关物品的结束时间。我还将使用Javascript来获得实时倒计时动画。它需要使用服务器时间而不是用户在计算机上的时间,而这似乎不起作用。

使用的文件类型

PHP,Javascript,MySQL

特别提示

我还必须确保时间来自服务器而不是目标计算机。如果有更好的方法来做我想做的事,请告诉我。我已经做了很多研究,仍然无法使其发挥作用。

文件名

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

数据库信息

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>

现在这个工作正常。但是,如果我改变当地时间,我可以欺骗它而不是服务器时间因为无法改变。

我缺少什么?

2 个答案:

答案 0 :(得分:0)

问题在于:

   this.currentTime=new Date()

您使用本地客户日期作为“当前”日期。相反,你应该像对待目标日期那样传递它。

E.g。喜欢这个

   (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调用它。

答案 1 :(得分:0)

以毫秒(或秒)检索计数器长度是一种更好的方法,然后将其传递给您的javascript函数以创建targetdate。这样倒计时与用户有关。例如:

  
      
  1. 用户所在的时区距服务器+5小时
  2.   
  3. 您的倒计时将在2013年12月4日17:00(对于服务器)完成
  4.   
  5. 对于实际用户,倒计时将于2013年12月4日22:00结束。
  6.         

    (如果您不将其保留在用户本地,时间安排将不正确,并且可能很容易让您的用户感到困惑。)

将毫秒添加到日期的示例(这为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()
}