Question

早些时候我问过修理下面的时钟和BAM！解决方案几乎是即时的。从那时起，我已成功将几个时钟添加到单个PHP页面。一个用于东京，一个用于伦敦，一个用于马德里，一个用于丹佛 - 很棒。我的问题（现在）是我能够做到这一点的唯一方法是“包含”真正由以下HTML组成的单个PHP页面。如果你在PHP页面上“查看源代码”，你会看到其中嵌入了多个HTML页面，并且打开和关闭了HTML，head和body标签。

我的问题：将多个HTML页面嵌入其中是否可以？它适用于所有主流浏览器（Google Chrome，Firefox，Internet Explorer，Safari和Opera）。我应该以不同的方式解决这个问题吗？我似乎无法在我的PHP文件的头部调用头信息并使其工作（特别是对jQuery＆amp; scripts / jclock.js的调用）。只要它在第一个时钟上加载就没有必要在下面的那个时钟上，但我似乎无法摆脱HTML并且每个时钟只使用JavaScript代码并回显“<div id='us_pacific"></div>”（其中是如何将时钟打印到body标签内的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>

Answer 1

对于您的问题：'将多个HTML页面嵌入到另一个中是否可以？'，答案是：不，您不能在其中包含多个html个标签文件，这将是一个无效的文件。

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

然后你会在HTML中添加一些额外的容器div并稍微修改你的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>

我希望这有帮助！

将包含JavaScript的几个HTML页面包含在一个PHP页面中

1 个答案: