Question

我目前正在创建一款应用程序，它将成为Android上的一种数字显示器。我的问题是我需要显示一个内部有多个区域的html页面。（或者是那些盒子）我现在已经实现了，但是每个区域都有多个项目可以放入其中。每个盒子的元素之间的那些切换是在一段特定的时间之后完成的。我目前正在做的是在那个时间过去之后，我只是将新数据加载到elasped的区域，然后使用webView查看新创建的html文件。然而，该方法使得不必要的加载和Android设备需要一些时间。

我想学习的是，是否有可能通过某种js函数实现不同div中每个项目之间的切换？我阅读了一些有关更改div内容的信息，但是在一段时间后我无法找到一种方法。

例如，我有3个不同的区域，分别是A，B和C.在A区域，我有2个项目，将显示10秒和30秒。在区域B上只有一个项目要显示。并且在区域C上也可以说有3个不同的项目，其持续时间为15秒-25秒-10秒。此外，我必须一次又一次地展示这些项目。有没有办法在html的每个持续时间后改变循环和内容？任何信息或代码都会有所帮助，因为我对JS或JQuery了解不多。

关于这些不同区域内的元素：它们由文本（也有一些动画），rss feed，图像，视频，嵌入式htmls组成。

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个区域，如上面的示例，我有3个不同的框具有不同的ID。我使用那些带有一些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 feed与我的功能一起工作。需要使用这两个ID才能使用，这就是为什么我为一个区域atm创建2个不同的div id。

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.net/pVzjU/4

Answer 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 );
});

Answer 3

您可以使用setTimeout（）函数：

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

以下是示例http://jsfiddle.net/47uRA/

如何在经过一段时间后更改HTML中的div内容然后再次启动它？

3 个答案: