1

早些时候我问过修复下面的时钟和 BAM！解决方案几乎是瞬间完成的。从那以后，我成功地将其中的几个时钟添加到了一个 PHP 页面中。东京一份，伦敦一份，马德里一份，丹佛一份——太棒了。我的问题（现在）是我能够做到这一点的唯一方法是“包含”真正由下面的HTML组成的单个 PHP 页面。如果您在 PHP 页面上“查看源代码”，您会看到其中嵌入了多个 HTML 页面，其中包含打开和关闭 HTML、head 和 body 标记。

我的问题：可以将多个 HTML 页面相互嵌入吗？它适用于所有主要浏览器（Google Chrome、Firefox、Internet Explorer、Safari和Opera）。我应该以不同的方式解决这个问题吗？我似乎无法在我的 PHP 文件头中调用标题信息并使其工作（特别是对 jQuery 和脚本/jclock.js 的调用）。只要它在第一个时钟上加载，就不需要在后面的时钟上加载，但我似乎无法摆脱 HTML，只使用每个时钟的 JavaScript 代码并回显“ <div id='us_pacific"></div>”（这就是时钟的获取方式打印到正文标签内的 HTML 内的页面。）

有什么想法吗？

这是时钟：

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="scripts/jclock.js"></script>
        <link rel="stylesheet" href="css/homepage.css">
        <script type="text/javascript">
            $(document).ready(
                function() {
                    if ($('#us_pacific .time').length>0){
                       $('#us_pacific .time').remove();
                    }

                    //Set the offset here
                    var offset = -7;
                    if (offset == '')
                        return;
                    $('#us_pacific').append('<div class="time"></div>');
                    var options = {
                        format:'<span class=\"dt\">%a, %d %b %H:%M</span>',
                        timeNotation: '12h',
                        am_pm: true,
                        utc:true,
                        utc_offset: offset
                    }
                    $('#us_pacific .time').jclock(options);
                });
        </script>
    </head>
    <body>
        <div id="us_pacific"></div>
    </body>
</html>
4

1 回答 1

0

对于您的问题：'可以将多个 HTML 页面相互嵌入吗？'，答案是：不，你不能html在一个文档中有多个标签，这将是一个无效的文档。

假设jclock.js编码正确，它应该能够驱动多个实例。

然后，您将在 HTML 中添加一些额外的 containerdiv并稍微修改您的 JavaScript 代码（在您拥有的其他版本中查看）以使用自己的选项设置额外的时钟。

您可以将您的代码更改为此（并根据您的喜好重新考虑它）：

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="scripts/jclock.js"></script>
        <link rel="stylesheet" href="css/homepage.css">
        <script type="text/javascript">
            $(document).ready(
                function() {
                    var options; // This way you can re-use it without the 'var' keyword.

                    // Timezone 1
                    if ($('#us_pacific .time').length>0){
                        $('#us_pacific .time').remove();
                    }
                    $('#us_pacific').append('<div class="time"></div>');
                    options = {
                        format: '<span class=\"dt\">%a, %d %b %H:%M</span>',
                        timeNotation: '12h',
                        am_pm: true,
                        utc: true,
                        utc_offset: -7  // Now set the offset here
                    };
                    $('#us_pacific .time').jclock(options);

                    //Timezone 2
                    if ($('#eu .time').length>0){
                        $('#eu .time').remove();
                    }
                    $('#eu').append('<div class="time"></div>');
                    options = {
                        format: '<span class=\"dt\">%a, %d %b %H:%M</span>',
                        timeNotation: '12h',
                        am_pm: true,
                        utc: true,
                        utc_offset: 1  // Now set the offset here
                    };
                    $('#eu .time').jclock(options);
                });
        </script>
    </head>
    <body>
        <div id="us_pacific"></div>
        <div id="eu"></div>
    </body>
</html>

我希望这有帮助！

于 2013-04-20T04:03:59.640 回答