0

私は現在、Androidの一種のデジタルディスプレイとなるアプリを作成しています。私の問題は、その中に複数の領域があるhtmlページを表示する必要があることです。（またはボックス）私は現在すでにそれを実装していますが、それらの各リージョンには複数のアイテムを入れる必要があります。各ボックスの要素間のこれらの切り替えは、特定の時間が経過した後に行われます。そして、私が現在行っているのは、その時間が経過した後、新しいデータを消去された領域にロードしてから、新しく作成されたhtmlファイルをwebViewで表示することです。ただし、その方法では不要な読み込みが発生し、Androidデバイスでは時間がかかります。

私が学びたいのは、ある種のjs関数を使用して、異なるdiv内の各アイテムを切り替えることは可能ですか？divの内容の変更に関する情報をいくつか読みましたが、しばらくするとそれを作成する方法が見つかりません。

たとえば、A、B、Cの3つの異なる領域があります。A領域には、10秒と30秒で表示される2つのアイテムがあります。リージョンBでは、表示するアイテムは1つだけです。また、リージョンCには、15秒から25秒から10秒の期間を持つ3つの異なるアイテムがあるとしましょう。また、私はそれらのアイテムを何度も何度も見せなければなりません。HTMLの各期間の後にそのループとコンテンツを変更する方法はありますか？私はJSやJQueryについてあまり知らないので、どんな情報やコードピースも役に立ちます。

それらの異なる領域内のそれらの要素について：それらはテキスト（いくつかのアニメーションも含む）、rssフィード、画像、ビデオ、埋め込まれたhtmlで構成されています。

textRender += String.format("<div id='text' style='position:relative; overflow:hidden; width: %dpx; height: %dpx; 
                              left: %dpx; top: %dpx'>", widthOfRegio - 10, heightOfRegio,leftOfRegio,topOfRegio);
textRender += String.format("<div id='innerText' style='position:absolute; %s:" + /*leftOfRegio+*/"0px; top: "+/*topOfRegio+*/"0px; 
width: %dpx; %s'>%s</div></div>", startPosition, widthOfRegio-10, textWrap, toTest);

たとえば、このコードセグメントを使用して、各要素をhtmlファイルに書き込みます。また、作成した新しい要素ごとに異なるIDを生成します。たとえば、上記の例のように3つのリージョンがある場合、IDが異なる3つの異なるボックスがあります。そして、私はそれらのタグをいくつかのjs関数で使用して、テキストを左右にフロートさせるなどの手助けをします。

そして、これが生の生成されたhtmlのようになります：

<div id='text' style='position:relative; overflow:hidden; width: 310px; height: 300px; left: 0px; top: 20px'>
<div id='innerText' style='position:absolute; left:0px; top: 0px; width: 310px; '><iframe src="http://free.timeanddate.com/clock/i31ww8ou/n514/fn6/fs8/fc9ff/tc000/ftb/bas0/bat1/bacfff/tt0/tw1/th1/ta1/tb4" frameborder="0" width="70" height="24"></iframe></div></div> 
<div id='text1' style='position:relative; overflow:hidden; width: 96px; height: 100px; left: 160px; top: -300px'>
<div id='innerText1' style='position:absolute; left:0px; top: 0px; width: 96px; '><p><em><strong><span style="color:#8b4fff;">Some Text Goes Here</span></strong></em></p></div></div> 
<div id='text2' style='position:relative; overflow:hidden; width: 96px; height: 100px; left: 53px; top: -306px'>
<div id='innerText2' style='position:absolute; left:0px; top: 0px; width: 96px; '><p><em><strong><span style="color:#8b4fff;">Some Text Goes Here</span></strong></em></p></div></div>

私はそのような構造を使用して、テキストとrssフィードを関数で機能させています。これらの2つのIDを使用するには、1つのリージョンATMに対して2つの異なるdivIDを作成する必要があります。

4

3 に答える 3

2

contentAllは、時間の経過とともにさまざまな領域に表示するhtmlの配列を含むオブジェクトです。3000と2000は、関数が実行されるミリ秒数です（この場合は「regionA」と「regionB」）jsfiddleも見てください（下部のリンク）

$('#regionA').attr('data-content', 0);
$('#regionB').attr('data-content', 0);
var contentAll = {regionA: ['first content', 'second content', 'third content'],
                  regionB: ['etc 1', 'the same 2', 'another 3']};

changeRegion = function(id) {
    var $el = $('#'+id),
    num = $el.attr('data-content'),
    content = contentAll[id],
    numMax = content.length;

    num = (num+1)%content.length;
    $el.html(content[num]);
    $el.attr('data-content', num);
};

setInterval(function(){
        changeRegion('regionA');
    }, 3000);
setInterval(function(){
        changeRegion('regionB');
    }, 2000);​

http://jsfiddle.net/pVzjU/

各コンテンツの表示時間を変えたい場合：

$('#regionA').attr('data-content', 0);
$('#regionB').attr('data-content', 0);
var contentAll = {regionA: [['first content', 1000], ['second content', 2000], ['third content', 3000]], regionB: [['etc 1', 1000], ['another 2', 2000], ['third', 3000]]};

var changeRegion = function(id){
    var $el = $('#'+id),
    num = $el.attr('data-content'),
    content = contentAll[id],
    numMax = content.length,
    time = null;

    num = (num+1)%content.length;
    time = content[num][1];
    $el.html(content[num][0]);
    $el.attr('data-content', num);
    console.log(content[num][0], time);
    setTimeout(function(){changeRegion(id)}, time);
};
setTimeout(function(){changeRegion('regionA')},contentAll['regionA'][0][0]);

http://jsfiddle.net/pVzjU/4

于 2012-04-24T09:26:21.353 に答える
2

こちらが代替バージョンで、デモはこちらhttp://jsfiddle.net/pomeh/HAjrY/

HTMLコード

<div class="container">
    <div class="hidden" data-display-time="2">
        First A content<br />
        2 seconds
    </div>
    <div class="hidden" data-display-time="4">
        Second A content<br />
        4 seconds
    </div>
</div>

<div class="container">
    <div>
        Unique B content
    </div>
</div>

<div class="container">
    <div class="hidden" data-display-time="3">
        First C content<br />
        3 seconds
    </div>
    <div class="page hidden" data-display-time="6">
        Second C content<br />
        6 seconds
    </div>
    <div class="hidden" data-display-time="3">
        Third C content<br />
        3 seconds
    </div>
</div>​

CSSコード

.container {
    width: 100px;
    height: 100px;
    border: solid black 1px;
    float: left;
    margin-left: 10px;
}

.hidden {
    display: none;
}

Javascriptコード

// get all containers
var $containers = $( ".container:has([data-display-time])" );


function displayNext( $container, $pages, hitCount ) {
    // get the index of the next displayed page
    var nextPageIndex = hitCount % $pages.length,
        $pageToDisplay = $pages.eq( nextPageIndex ),
        // convert time to milliseconds
        displayTime = 1000*$pageToDisplay.data( "displayTime" );

    // hide all page, and show the right one
    $pages.addClass( "hidden" );
    $pageToDisplay.removeClass( "hidden" );

    // init a timer to display the next page, increment hitCount
    setTimeout(function() {
        displayNext( $container, $pages, hitCount+1 );
    }, displayTime );
}

// initialize the process once for each container
$containers.each(function() {
    var $container = $(this),
        $pages = $container.find( "[data-display-time]" ),
        hitCount = 0;

    // nothing to show
    if( $pages.length === 0 ) {
        return;
    }
    // nothing to rotate with, display the unique page
    else if( $pages.length === 1 ) {
        $pages.removeClass( "hidden" );
        return;
    }

    // init the rotation process
    displayNext( $container, $pages, hitCount );
});

</ p>

于 2012-04-24T13:22:46.337 に答える
0

setTimeout（）関数を使用できます。

var bar = function ()
{
   $('#foo').html(Math.random())
   setTimeout(bar, 2000)
}
setTimeout(bar, 2000)

これが例ですhttp://jsfiddle.net/47uRA/

于 2012-04-24T08:37:17.967 に答える