javascript - 如何在一段时间后更改 HTML 中的 div 内容，然后再次启动？

Question

我目前正在创建一个应用程序，它将是 Android 上的一种数字显示器。我的问题是我需要显示一个 html 页面，其中包含多个区域。 (或盒子)我目前已经实现了这一点，但是每个区域都有多个项目要放入其中。每个框的元素之间的切换是在一段特定的时间后完成的。我目前正在做的是，在这段时间过后，我只需将新数据加载到已消失的区域中，然后使用 webView 查看新创建的 html 文件。然而，这种方法会产生不必要的加载，并且在 Android 设备上需要一些时间。

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

例如，我有 3 个不同的区域，即 A 、 B 和 C。在 A 区域上，我有 2 个项目，将显示 10 秒和 30 秒。在区域 B 上，只有一项可显示。在 C 区，假设有 3 个不同的项目，其持续时间为 15 秒-25 秒-10 秒。我还必须一次又一次地展示这些元素。有没有办法让循环和内容在 html 的每个持续时间后发生变化？任何信息或代码 fragment 都会有帮助，因为我对 JS 或 JQuery 不太了解。

关于这些不同区域内的元素:它们由文本(也有一些动画)、RSS feed、图像、视频、嵌入的 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 个区域(如上面的示例)，则我有 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 提要与我的函数配合使用。它需要这 2 个 id 才能使用，因此这就是为什么我为一个区域 atm 创建 2 个不同的 div id。

Answer 1

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