js原生无刷新页面

最新推荐文章于 2023-05-31 22:43:21 发布

Djdhfnfnnf

最新推荐文章于 2023-05-31 22:43:21 发布

阅读量704

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/sosadtoday/article/details/127864581

版权

使用原生js写js页面

    <style>
      #page a {
        padding: 10px;
        border: 1px solid #ccc;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="content"></div>
    <div id="page"></div>
    <script>
      var data = []; //已有的数据
      var total = 101; //数据总条数
      var perPage = 10; //每页显示的条数
      for (var i = 1; i <= total; i++) {
        data.push("我是第" + i + "条数据");
      }

      //   生成数据101数据
      // 生成出分页导航 并且实现 每个数字页点击更换对应的的数据 点击事件使用行内绑定
      var totalPage = Math.ceil(total / perPage);
      // 1、显示分页导航
      var html = "";
      for (var i = 1; i <= totalPage; i++) {
        // javascript:; 表示执行js的空代码  可以将js代码设置在:;直接 可以避免a标签的点击刷新页面
        html +=
          '<a href ="javascript:;" onclick = "changePage(' +i +')">' +i +"</a>";
      }
      document.querySelector("#page").innerHTML = html;

      // 显示指定页数的对应的数据
      function changePage(page) {
        var html = "";
        /*
                page = 1 显示数据下标为0-10直接的数据
                page = 2 显示数据下标为10-20直接的数据
                page = 3 显示数据下标为20-30直接的数据
                page = n 显示数据下标为 (n-1) * perPage - n*perPage
            */
        //    page = 11 下标从100 - 110之间
        // 计算结束的下标
        for (var i = (page - 1) * perPage; i < page * perPage; i++) {
          html += "<p>" + data[i] + "</p>";
        }

        document.querySelector("#content").innerHTML = html;
      }
      changePage(1);
    </script>
  </body>