Heim > Artikel > Web-Frontend > So implementieren Sie die Umblätterfunktion in nativem JS

So implementieren Sie die Umblätterfunktion in nativem JS

零到壹度Original: 2018-03-23 09:41:544615Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Kommunikationsmethode für Angular2-Eltern-Kind-KomponentenNächster Artikel：Kommunikationsmethode für Angular2-Eltern-Kind-Komponenten

In Verbindung stehende Artikel

Mehr sehen