用js生成一个商品查询页面，页面内容分为五页，每页显示1个商品，商品包含标题，数量，金额。页面顶部统计当前页面的金额，底部显示5页，页数可以切换页面

首先，需要准备好商品数据，可以用一个数组来存储：

let products = [
  { title: "商品1", quantity: 10, price: 100 },
  { title: "商品2", quantity: 5, price: 200 },
  { title: "商品3", quantity: 2, price: 500 },
  { title: "商品4", quantity: 8, price: 80 },
  { title: "商品5", quantity: 3, price: 300 }
];

然后，需要定义一些变量和函数来实现页面的生成和切换：

let currentPage = 1; // 当前页码
let totalPages = 5; // 总页数

function generatePage(pageNumber) {
  // 生成指定页码的页面内容
}

function updateTotal() {
  // 更新页面顶部的金额统计
}

function switchPage(pageNumber) {
  // 切换到指定页码的页面
}

function init() {
  // 初始化页面，生成第一页内容并绑定事件
}

init();

接下来，实现这些函数：

function generatePage(pageNumber) {
  let product = products[pageNumber - 1]; // 获取当前页对应的商品数据
  let pageContent = `<div class="product">
                       <h2>${product.title}</h2>
                       <p>数量：${product.quantity}</p>
                       <p>金额：${product.price}</p>
                     </div>`;
  document.getElementById("content").innerHTML = pageContent; // 将内容插入到页面中
}

function updateTotal() {
  let total = 0;
  for (let i = 0; i < totalPages; i++) {
    let product = products[i];
    total += product.price;
  }
  document.getElementById("total").innerHTML = `当前页面总金额：${total}`;
}

function switchPage(pageNumber) {
  currentPage = pageNumber;
  generatePage(currentPage);
  updateTotal();
}

function init() {
  generatePage(currentPage);
  updateTotal();
  for (let i = 1; i <= totalPages; i++) {
    let pageLink = `<a href="#" onclick="switchPage(${i})">${i}</a>`;
    document.getElementById("pages").innerHTML += pageLink;
  }
}

最后，需要在HTML中添加对应的元素：

<div id="content"></div>
<div id="total"></div>
<div id="pages"></div>

这样就完成了商品查询页面的生成。完整代码如下：

let products = [
  { title: "商品1", quantity: 10, price: 100 },
  { title: "商品2", quantity: 5, price: 200 },
  { title: "商品3", quantity: 2, price: 500 },
  { title: "商品4", quantity: 8, price: 80 },
  { title: "商品5", quantity: 3, price: 300 }
];

let currentPage = 1; // 当前页码
let totalPages = 5; // 总页数

function generatePage(pageNumber) {
  let product = products[pageNumber - 1]; // 获取当前页对应的商品数据
  let pageContent = `<div class="product">
                       <h2>${product.title}</h2>
                       <p>数量：${product.quantity}</p>
                       <p>金额：${product.price}</p>
                     </div>`;
  document.getElementById("content").innerHTML = pageContent; // 将内容插入到页面中
}

function updateTotal() {
  let total = 0;
  for (let i = 0; i < totalPages; i++) {
    let product = products[i];
    total += product.price;
  }
  document.getElementById("total").innerHTML = `当前页面总金额：${total}`;
}

function switchPage(pageNumber) {
  currentPage = pageNumber;
  generatePage(currentPage);
  updateTotal();
}

function init() {
  generatePage(currentPage);
  updateTotal();
  for (let i = 1; i <= totalPages; i++) {
    let pageLink = `<a href="#" onclick="switchPage(${i})">${i}</a>`;
    document.getElementById("pages").innerHTML += pageLink;
  }
}

init();

注意，这只是一个简单的示例，实际使用中可能需要更复杂的页面布局和功能实现。