web 用JS实现换一换功能

就像百度的换一换一样，调出30个div，然后每次点一下就显示6个，求帮忙

您可以参考以下代码。

html
<div id="container">
    <div>div1</div>
    <div>div2</div>
    ...
    <div>div30</div>
</div>
<button id="change">换一换</button>

var container = document.getElementById("container");
var changeBtn = document.getElementById("change");
var divs = container.children;

var showCount = 6;  // 每次显示6个div
var index = 0;      // 当前显示的第一个div的索引

changeBtn.addEventListener("click", function() {
    // 隐藏当前显示的div
    for (var i = index; i < index + showCount; i++) {
        divs[i].style.display = "none";
    }
    
    // 计算下一次显示的第一个div的索引
    index += showCount;
    if (index > divs.length - showCount) {
        index = 0;
    }
    
    // 显示新的一组div
    for (var i = index; i < index + showCount; i++) {
        divs[i].style.display = "block";
    }
});

逻辑:

获取container容器下的所有div和change按钮
定义每次显示div的个数showCount为6,和当前显示的第一个div的索引index,初始为03. 为change按钮添加点击事件4. 点击时,先隐藏当前显示的showCount个div5. 计算下一次要显示的第一个div的索引index,循环显示6. 显示新的showCount个div7. 重复点击,继续循环显示新的一组div这实现了每次点击"换一换"按钮,显示6个新的div,循环切换,实现和百度"换一换"类似的效果。

望采纳！

实现类似于百度的换一批功能，可以使用JavaScript编写实现。以下是简单的实现思路：

在HTML页面中预先创建一个容器，用来容纳列表项。
在JavaScript中定义一个数据数组，其中包含了所有要显示的项目。
编写一个函数，用来生成指定数量的项目。该函数应该接受一个整数参数，指定要生成的项目数量。
在生成项目时，可以使用随机数选取数据数组中的项目。
点击“换一批”按钮时，调用生成项目函数，并将新生成的项目添加到容器中。
为了防止项目重复，可以使用一个已查找的项目数组来跟踪哪些项目已经显示过了。
下面是一个简单的示例代码：

 HTML代码：
<div id="container">
  <!-- 列表项将会在这里显示 -->
</div>
 <button onclick="nextBatch()">换一批</button>
JavaScript代码：
var items = [
  "项目1",
  "项目2",
  "项目3",
  "项目4",
  "项目5",
  "项目6",
  "项目7",
  "项目8",
  "项目9",
  "项目10",
  "项目11",
  "项目12",
  "项目13",
  "项目14",
  "项目15",
  "项目16",
  "项目17",
  "项目18",
  "项目19",
  "项目20",
  "项目21",
  "项目22",
  "项目23",
  "项目24",
  "项目25",
  "项目26",
  "项目27",
  "项目28",
  "项目29",
  "项目30"
];
 var displayedItems = [];
 function generateItems(count) {
  var container = document.getElementById("container");
   for (var i = 0; i < count; i++) {
    var item = getRandomItem();
     while (displayedItems.indexOf(item) !== -1) {
      item = getRandomItem();
    }
     displayedItems.push(item);
     var div = document.createElement("div");
    div.innerHTML = item;
    container.appendChild(div);
  }
}
 function nextBatch() {
  var container = document.getElementById("container");
   // 清空现有项目
  while (container.firstChild) {
    container.removeChild(container.firstChild);
  }
   // 生成6个新项目
  generateItems(6);
}
 function getRandomItem() {
  var index = Math.floor(Math.random() * items.length);
  return items[index];
}
 // 初始情况下生成6个项目
generateItems(6);

上面的示例代码生成了30个项目，然后每次点击“换一批”按钮时，会从中随机选取6个显示。当所有项目都显示完之后，再次点击“换一批”按钮会重新显示所有项目。