1

以前、下の時計とBAMの修正について尋ねました！解決策はほぼ瞬時でした。それ以来、これらの時計のいくつかを 1 つの PHP ページに追加することに成功しました。東京に 1 つ、ロンドンに 1 つ、マドリッドに 1 つ、デンバーに 1 つ - すばらしい。私の問題 (現在) は、これを行うことができた唯一の方法は、以下のHTMLで実際に構成されている個々の PHP ページを「含める」ことです。PHP ページで「ソースを表示」すると、複数の HTML ページが埋め込まれており、HTML の開始タグと終了タグ、head タグと body タグが含まれています。

私の質問: 複数の HTML ページを互いに埋め込んでも大丈夫ですか? すべての主要なブラウザー ( Google Chrome、Firefox、Internet Explorer、Safari、Opera ) で動作します。私はこれについて別の方法で行くべきですか？PHP ファイルの head 内でヘッダー情報を呼び出して機能させることができないようです (具体的には、jQuery & 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>
4

1 に答える 1

0

あなたの質問に対して: '複数の HTML ページを相互に埋め込んでもよろしいですか? html'、答えは: いいえ、 1 つのドキュメント内に複数のタグを含めることはできません。無効なドキュメントになります。

適切にコーディングされていると仮定するとjclock.js、複数のインスタンスを駆動できるはずです。

次に、HTML に追加の container を追加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>

これが役立つことを願っています！

于 2013-04-20T04:03:59.640 に答える