So implementieren Sie die Umblätterfunktion in nativem JS-js-Tutorial-php.cn

So implementieren Sie die Umblätterfunktion in nativem JS

零到壹度

Freigeben： 2018-03-23 09:41:54

Original

4780 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie die Umblätterfunktion in nativem JS implementieren und welche Vorsichtsmaßnahmen für die Implementierung der Umblätterfunktion gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Ohne Umschweife direkt zum Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>翻页</title>
  <style>
    #ol1 li{
      width: 100px;
      height: 50px;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <p>
    <ol id="ol1">
      
    </ol>
    <p>
      <button class="pageChange" pageNum="0">第一页</button>
      <button class="pageChange" pageNum="1">第二页</button>
      <button class="pageChange" pageNum="2">第三页</button>
    </p>
  </p>
  <script type="text/javascript">
    window.onload = function () 
    {
      // 自定义数据 实际开发中 数据是从后台获取
      var data = [  
        { name: "aa", age: 10},
        { name: "bb", age: 11},
        { name: "cc", age: 12},
        { name: "dd", age: 23},
        { name: "ee", age: 50},
        { name: "ff", age: 24},
        { name: "gg", age: 62},
        { name: "hh", age: 16},
        { name: "ii", age: 35}
      ]; 

      // 取前三条数据初始化页面
      var oOl = document.getElementById(&#39;ol1&#39;);
      var outStr = "";
      for (var i = 0; i < 3; i++) {
        outStr += &#39;<li><span>&#39; + data[i].name + &#39;</span> <span>&#39; + data[i].age + &#39;</span></li>&#39;;
      }
      oOl.innerHTML = outStr;
      
      // 实现翻页功能
      var aBtn = document.getElementsByClassName(&#39;pageChange&#39;);
      for (var j = 0; j < aBtn.length; j++) { // 为每个页数按钮都设置点击事件
        aBtn[j].onclick = function (event) {
          var pageNum = parseInt(event.target.getAttribute("pageNum")); // 获取自定义属性pageNum的值 并将其转换为数字类型  释：pageNum表明当前时第几页
          outStr = "";
          for (var i = pageNum*3; i < pageNum*3+3; i++) { //通过页数获取data中相应段的值
            outStr += &#39;<li><span>&#39; + data[i].name + &#39;</span> <span>&#39; + data[i].age + &#39;</span></li>&#39;;
          }
          oOl.innerHTML = outStr;
        }
      }
    }
  </script>
</body>
</html>

Nach dem Login kopieren

Laufendes Ergebnis:

Klick Mit der Seitenschaltfläche können Sie zur Anzeige verschiedener Daten wechseln

Wie realisiert JS automatisches Paging?

Wie schreibe ich mit JS-Code den Umblättereffekt der Navigationsleiste

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Umblätterfunktion in nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!