javascript - 想要将 ID 或标签从 HTML/PHP 转发到 JS(Keith Wood Countdown jQuery 插件)

标签 javascript php jquery html

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

我有点陷入困境。几天来,我尝试修复臭名昭著的“最终倒计时”jQuery 插件,并让它与 MomentsJS 一起运行。但我运气不好。对于非专业网络程序员来说,这部纪录片几乎不存在(我不这么认为)。所以我尝试了其他东西......直接 MomentsJS,但这会导致大量重新加载(AJAX),特别是如果出现问题,而且我不能在页面上使用多个计时器。然后我回到 Keith Wood 的倒计时/计时器插件,终于让它运行了。还要感谢 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 小时/分钟/秒
  • 时区(目前,它所在的服务器是 GMT+1,但我想控制它)

就代码而言,我是新手,我可以了解一些基本的东西,但如果涉及到实际转发值并使用它们,我会迷失在海洋中。

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

最佳答案

我不了解 jQuery,所以不确定以下内容是否真正有效,但也许你可以尝试:

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

关于javascript - 想要将 ID 或标签从 HTML/PHP 转发到 JS(Keith Wood Countdown jQuery 插件),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39433317/

相关文章:

javascript - Angularjs 路由与 Backbonejs 路由

javascript - jQuery 加载后初始化 slider

javascript - 更新 setTimeout 问题中的 JSON 对象

php - 在新选项卡中提交表单

javascript - 在某些情况下禁止用户离开页面

javascript - 如何以绝对位置让 child 居中

javascript - 如何从下拉列表中查找并删除重复条目

php - 使用 Ajax 创建 PHP session 和回显结果

php - ffmpeg淡化过滤器已安装但无法正常工作?

php - 从 github 下载 Laravel 项目