想要将 ID 或标签从 HTML/PHP 转发到 JS（Keith Wood Countdown jQuery 插件）答案

【问题标题】：Want to forward an ID or tag from HTML/PHP to JS (Keith Wood Countdown jQuery Plugin)想要将 ID 或标签从 HTML/PHP 转发到 JS（Keith Wood Countdown jQuery 插件）
【发布时间】：2016-09-11 06:03:38
【问题描述】：

我是新来的。很高兴认识你。

我有点纠结。几天来，我尝试修复臭名昭著的“最终倒计时”jQuery 插件并让它与 MomentsJS 一起运行。但我运气不好。对于非专业的网络编码员（我不指望），这部纪录片几乎不存在。所以我尝试了其他的东西......直接MomentsJS，但这会导致很多重新加载（AJAX），特别是如果有一个打嗝，我不能在一个页面上使用多个计时器。然后我回到 Keith Wood 的 Countdown/Timer 插件，我终于让它运行起来了。还要感谢 StackOverFlow 文章。但是，我想优化代码 - 这就是我的问题所在。

我想做什么：

我想为网页创建一个简单的倒计时/计时器（布局是目前不是我关心的问题
它必须是服务器时间/时区感知的，而不是专注于客户端/浏览器时间

我使用什么模块： - jQuery - Keith Wood 的倒计时 jQuery 插件 v2.0.2 - 目前是 HTML

我想要达到的目标： - 我想要一个 HTML 文件，然后链接到 .js 文件进行清理脚本中的主 HTML 文件（没有人应该看到，我使用页面上将集成更多脚本/功能反正） - 但是我想转发一个 ID/类/数组

这是目前的代码：

HTML

!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Countdown</title>
<link rel="stylesheet" href="jquery.countdown.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.plugin.js"></script>
<script src="jquery.countdown.js"></script>
<script src="timer.js"></script>

</head>
<body>

COUNTDOWN 1

<div id="defaultCountdown" data-end="Sep 22, 2016 00:00:00 +0000"></div>

</body>
</html>

JavaScript

(function($){

    // TIMER

            function serverTime() {
                var time = null;
                $.ajax({
                    url: 'servertime.php',
                    async: false,
                    dataType: 'text',
                    success: function (text) {
                        time = new Date(text);
                    },
                    error: function (http, message, exc) {
                        time = new Date();
                    }
                });
                return time;
            }

            $(function () {
                $("#defaultCountdown").countdown({
                    until: new Date('Sep 22, 2016 00:00:00 +0000'),
                    serverSync: serverTime
                });
            });


})(jQuery);

PHP

<?php 
$now = new DateTime(); 
echo $now->format("M j, Y H:i:s O")."\n"; 
?>

现在事情是这样的：你看到我在 div 中设置的“data-end”标签，那里的这个值应该转发给 JS，更具体地说是行

until: new Date('Sep 22, 2016 00:00:00 +0000'),

所以不是冗长的日期，而是应该有一个从 HTML 文件中读取数值的变量（参见“data-end”），这样我每次更新时都不必弄乱 JS 文件计时器。如果我想触发多个倒计时/计时器，这也非常耗时。但很遗憾，我不知道怎么做。我尝试了 .attr() 代码，但它没有用。要么 JS 每天/小时/分钟 (NaN) 丢弃一个错误，要么什么都不显示。

如果可能的话，我还想改变几件事，即：

时间格式（类似于 YYYY/MM/DD Hrs/Min/Sec
时区（目前，它所在的服务器是 GMT+1，但我想控制它）

我是代码方面的新生，我可以在一些基本的东西上走来走去，但如果涉及到实际转发值并使用它们，我就迷失了。

任何及时的帮助将不胜感激 - 也许这是我还没有想到的非常简单的事情。所以提前谢谢

【问题讨论】：

通常要访问dataset 属性，它类似于document.getElementById('defaultCountdown').dataset.end，因此您可以将代码更改为until: new Date( document.getElementById('defaultCountdown').dataset.end )
非常非常感谢，这对我有用，解决了我数小时的挫败感。猜猜JS毕竟不是我的强项

标签： javascript php jquery html

【解决方案1】：

我不知道 jQuery，所以不确定以下是否真的有效，但也许你可以尝试：

$( function() {
    this.countdown({
        until: this.dataset.end,
        serverSync: serverTime
    } );
}.bind( $("#defaultCountdown") ) );

【讨论】：

谢谢，但遗憾的是这不起作用 - 请参阅上面的答案

【解决方案2】：

欢迎加入。

要从 div 中获取值，您可以在 js 中使用

$(function () {
     $("#defaultCountdown").countdown({
         until: $('#defaultCountdown').data('end),
         serverSync: serverTime
     });
 });

对于时区，您可以使用date_default_timezone_set()。更多这里http://php.net/manual/en/function.date-default-timezone-set.php
coundoun.js 以某种方式期望时间格式。我怀疑你得到的 NaN 是你试图改变它

【讨论】：

我想我不会再弄乱时间格式了。遗憾的是，您的代码想法没有奏效。对我有用的是until: new Date( document.getElementById('defaultCountdown').dataset.end )
有一个错字，缺少一个#。立即尝试，让 jQuery 遍地开花