简体   繁体   English

PHP生成日期-> Javascript倒计时

[英]PHP Generated date -> Javascript countdown

I'm making a site for an Informatics project of mine. 我正在为我的信息学项目建立站点。 For that I want to make: 为此,我要:

  1. php script that outputs a date which is can be stored in a Database. php脚本,输出可以存储在数据库中的日期。
  2. Javascript counts down to that date. Javascript倒数至该日期。 If it's finished I want to display a hyperlink (simple HTML anchor). 如果完成,我想显示一个超链接(简单的HTML锚)。

Item 1 has already been done, but I am having a difficult time achieving item 2. We only learned HTML, MySQL and PHP so far. 项目1已经完成,但是我很难实现项目2。到目前为止,我们仅学习了HTML,MySQL和PHP。 So I'm learning Javascript at the moment. 所以我现在正在学习Javascript。 All the examples on this site are too difficult to understand and there must be an easier way to do it. 该站点上的所有示例都太难理解了,必须有一种更简单的方法。 I want to understand the code. 我想了解代码。

PHP (no edit needed): PHP(无需编辑):

function Klaar_Bouw($getal=0) {
      $nu = strtotime("now");
      $dag = floor($getal / 86400);
      $uur  = floor(($getal % 86400) / 3600);
      $min = floor(($getal % 3600) / 60);
      $sec = ($getal % 60);
      $nieuw = date('d-m-Y H:i:s', mktime(
      date('H',$nu)+$uur,
      date('i',$nu)+$min,
      date('s',$nu)+$sec,
      date('m',$nu),
      date('d',$nu)+$dag,
      date('Y',$nu))
      );
      return $nieuw;
              }
$bouwklaar = Klaar_Bouw( -! random number in seconds !-);
echo"$bouwklaar";

Javascript: 使用Javascript:

function Bouwen(BouwKlaar) {
    var bouwtijd = new Date(BouwKlaar);

    var dag = (getUTCDay(bouwtijd) - getUTCDay());
    var uur = (getUTCHours(bouwtijd) - getUTCHours());
    var min = (getUTCMinutes(bouwtijd) - getUTCMinutes());
    var sec = (getUTCSeconds(bouwtijd) - getUTCSeconds());

    return dag + ":" + uur + ":" + min + ":" + sec;
}

setInterval(function () {
    var bouw = Bouwen('2013, 05, 21, 20, 00, 00');
    document.getElementById("datum").innerHTML = bouw;
}, 500);

Output Format: dd:hh:mm:ss (counting down to 0, then output HTML anchor link) 输出格式:dd:hh:mm:ss(倒数为0,然后输出HTML锚链接)

You're misusing the Date object. 您正在滥用Date对象。 Try using like this: 尝试像这样使用:

function Bouwen(year, month, day, hour, minute, second) {
    var bouwtijd = new Date(year, (month - 1), day, hour, minute, second);

and of course: 而且当然:

var bouw = Bouwen(2013, 5, 21, 20, 0, 0);

You interval doesn't need to run at the frequency of 500 miliseconds if your countdown will be refresh on each second. 如果您的倒数计时会每秒刷新一次,则您的间隔不需要以500毫秒的频率运行。 So use: window.setTimeout('targetFunction()', 1000) for each second. 因此, window.setTimeout('targetFunction()', 1000)使用: window.setTimeout('targetFunction()', 1000) Plus, it will print the same time ever cause you're not changing it. 此外,它会在您不进行更改的同时打印同一时间。 To change it you'll have to set your function to call itself by the interval decreasing by 1 from seconds. 要更改它,您必须将函数设置为以秒为单位从1减少间隔来调用自身。 But before the call of the interval, you'll have to compare if your current date(of the countdown) is equal another one(that you not specified on your text) to stop it and show your hyperlink. 但是在调用该间隔之前,您必须比较当前的日期(倒计时的日期)是否等于另一个(您未在文字中指定的日期)以停止它并显示您的超链接。

Good luck. 祝好运。

Take a look at this jsFiddle . 看看这个jsFiddle Several issues: 几个问题:

  • You are using the new Date function incorrectly. 您使用new Date功能不正确。 This function receives several integer inputs, not a formatted string. 此函数接收几个整数输入,而不是格式化的字符串。
  • Notice how the days, minutes, hours, and seconds are calculated. 请注意如何计算天,分钟,小时和秒。 You should subtract the dates FIRST, then retrieve results from the getUTC functions. 您应该先减去日期,然后从getUTC函数检索结果。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM