しばらくしてからHTMLのdivの内容を変更してから再起動するには？

Question

私は現在Android上でデジタル表示の種類になるアプリを作成しています。私の問題は、その中に複数の領域があるhtmlページを表示する必要があることです。私は現時点では既に実装していますが、それぞれの地域には複数の項目があります。各ボックスの要素間のスイッチは、特定の時間後に行われます。私が現在行っていることは、その時間が経過した後で、新しいデータをその領域にロードしてから、WebViewで新しく作成したhtmlファイルを表示するだけです。しかし、その方法は不必要な読み込みを行い、アンドロイドデバイスで時間を取る。

私が学ぼうとしているのは、divの中の各項目を何らかのjs関数で切り替えることは可能でしょうか。私はdivの内容を変更することについていくつかの情報を読んだが、しばらくしてからそれを作る方法は見つけられない。

たとえば、私はA、B、Cの3つの異なる領域を持っています。領域には、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つの異なるdiv idを作成するのはなぜですか。あなたがたsetTimeout（）関数を使用することができます

Answer 1

をcontentAllは、あなたが時間の経過とともに異なる領域に表示するHTMLSの配列を含むオブジェクトです。 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。ここでは、ネット/ pVzjUここ

Answer 2

：ここ

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

は一例でありhttp://jsfiddle.net/47uRA/

Answer 3

/4の代替バージョン、働いているデモ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); 
});