使用 javascript 每隔一段时间在 html 上显示帖子数组中的某些帖子

Display certain posts from array of posts on html at intervals using javascript

本文关键字：数组 显示 javascript 一段时间 html 使用      更新时间：2023-09-26

我有一个对象数组作为输入 

var results=[
    {
        "title": "Sample Post",
        "content": {
          "brief": "<p>This is my brief content</p>",
          "extended": "<p>Here is the detail</p>"
        }
      },
    {
        "title": "Post 6",
        "content": {
          "brief": "<p>Brief for Post 6</p>",
          "extended": "<p>Full description for Post 6</p>"
        }
      },
      {
        "title": "Post 7",
        "content": {
          "brief": "<p>Brief for Post 7</p>",
          "extended": "<p>Full description for Post 7</p>"
        }
      },
      {
        "title": "Post 8",
        "content": {
          "brief": "<p>Brief for Post 8</p>",
          "extended": "<p>Full description for Post 8</p>"
        }
      },
    {
        "title": "Post 1",
        "content": {
          "brief": "<p>Brief for post 1</p>",
          "extended": "<p>Full description&nbsp;for post 1</p>"
        }
      },
      {
        "title": "Post 2",
        "content": {
          "brief": "<p>Brief&nbsp;for post 2</p>",
          "extended": "<p>Full description&nbsp;for post 2</p>"
        }
      },
      {
        "title": "Post 222",
        "content": {
          "brief": "<p>Brief&nbsp;for post 3</p>",
          "extended": "<p>Full description&nbsp;for post 3</p>"
        }
      },
    {
        "title": "Post 113",
        "content": {
          "brief": "<p>Brief&nbsp;for post 3</p>",
          "extended": "<p>Full description&nbsp;for post 3</p>"
        }
      },
    {
        "title": "Post 223",
        "content": {
          "brief": "<p>Brief&nbsp;for post 3</p>",
          "extended": "<p>Full description&nbsp;for post 3</p>"
        }
      }
];

我必须以 3 秒的间隔一次只显示 3 个帖子，假设输入有 8 个帖子，那么它应该显示前 3 个，然后是下一个 3 个，然后是 2 个，然后是 3 个帖子，依此类推。

我试过这个：

function showPosts(results, noOfPosts){
                    if(currentPost!=noOfPosts){
                        if(params.detail) {
                        var dtStr = "-";//format(dt);
                        $("#container").addClass("details");
                        $("#container").append('<div class="post"><div class="title">'+results[currentPost].title+'<i>'+dtStr+'</i></div><div class="content">'+results[currentPost].content.extended+'</div></div>');
                        countPost++;
                    } else {
                        $("#container").append('<div class="post"><span class="title">'+results[currentPost].title+'</span> - '+results[currentPost].content.brief+'</div>');
                        countPost++;
                        }
                    }
                    else
                        countPost=0;
                        $("#container").removeClass("class");

                }
                setInterval(function(){
                    showPosts(results, noOfPosts)
                },3000)

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var results=[
    {
        "title": "Sample Post",
        "content": {
          "brief": "<p>This is my brief content</p>",
          "extended": "<p>Here is the detail</p>"
        }
      },
    {
        "title": "Post 6",
        "content": {
          "brief": "<p>Brief for Post 6</p>",
          "extended": "<p>Full description for Post 6</p>"
        }
      },
      {
        "title": "Post 7",
        "content": {
          "brief": "<p>Brief for Post 7</p>",
          "extended": "<p>Full description for Post 7</p>"
        }
      },
      {
        "title": "Post 8",
        "content": {
          "brief": "<p>Brief for Post 8</p>",
          "extended": "<p>Full description for Post 8</p>"
        }
      },
    {
        "title": "Post 1",
        "content": {
          "brief": "<p>Brief for post 1</p>",
          "extended": "<p>Full description&nbsp;for post 1</p>"
        }
      },
      {
        "title": "Post 2",
        "content": {
          "brief": "<p>Brief&nbsp;for post 2</p>",
          "extended": "<p>Full description&nbsp;for post 2</p>"
        }
      },
      {
        "title": "Post 222",
        "content": {
          "brief": "<p>Brief&nbsp;for post 3</p>",
          "extended": "<p>Full description&nbsp;for post 3</p>"
        }
      },
    {
        "title": "Post 113",
        "content": {
          "brief": "<p>Brief&nbsp;for post 3</p>",
          "extended": "<p>Full description&nbsp;for post 3</p>"
        }
      },
    {
        "title": "Post 223",
        "content": {
          "brief": "<p>Brief&nbsp;for post 3</p>",
          "extended": "<p>Full description&nbsp;for post 3</p>"
        }
      }
];
var currentPost = 0;
var noOfPosts = 3;
var startIndex=0;
var endIndex= noOfPosts+startIndex-1;
function showPosts(results, noOfPosts){
        $("#container").innerHTML="";
    $("#container").addClass("details");
    for(var i=startIndex;i<endIndex+1;i++){     
        $("#container").append('<div class="post"><div class="title">'+results[i].title+'</div><div class="content">'+results[i].content.extended+'</div></div>');
    }
}
setInterval(function(){
    showPosts(results, noOfPosts);
    startIndex =(endIndex==(results.length-1))?0:endIndex+1;
    endIndex =((noOfPosts+startIndex)>results.length)? endIndex = results.length-1 :noOfPosts+startIndex-1;
},3000);
</script>
</head>
<body>
<div id="container"></div>

</body>
</html>
相关文章：