前臺效果：

html

<div class="container" style="z-index: 999" id="searchDiv">       <div class="keyword-search">           查找：           <input id="key" type="text" style="width: 200px;" placeholder="關鍵詞" />           <a href="javascript:void(0);" class="prev" onclick='wordSearch(1)'><i class="c-icon"></i></a>           <a href="javascript:void(0);" class="next" onclick='wordSearch()'><i class="c-icon"></i></a>       </div>   </div>

相關教程推薦：html教程

js

<script>//搜索功能      var oldKey0 = "";      var index0 = -1;var oldCount0 = 0;      var newflag = 0;      var currentLength = 0;      function wordSearch(flg) {          var key = $("#key").val(); //取key值          if (!key) {              return; //key為空則退出          }          getArray();          focusNext(flg);      }      function focusNext(flg) {          if (newflag == 0) {//如果新搜索,index清零              index0 = 0;          }          if (!flg) {              if (oldCount0 != 0) {//如果還有搜索                  if (index0 < oldCount0) {//左邊如果沒走完，走左邊                      focusMove(index0);                      index0++;                  } else if (index0 == oldCount0) {//都走完了                      index0 = 0;                      focusMove(index0);                      index0++;                  }                  else {                      index0 = 0;//沒確定                      focusMove(index0);                      index0++;                  }              }          } else {              if (oldCount0 != 0) {//如果還有搜索                  if (index0 <= oldCount0 && index0 > 0) {//左邊如果沒走完，走左邊                      index0--;                      focusMove(index0);                  } else if (index0 == 0) {//都走完了                      index0 = oldCount0;                      index0--                      focusMove(index0);                  }              }          }      }      function getArray() {          newflag = 1;          $(".contrast .result").removeClass("res");          var key = $("#key").val(); //取key值          if (!key) {              oldKey0 = "";              return; //key為空則退出          }          if (oldKey0 != key || $(".current").length != currentLength) {              //重置              index0 = 0;              var index = 0;              $(".contrast .result").each(function () {                  $(this).replaceWith($(this).html());              });              pos0 = new Array();              if ($(".contrast-wrap").hasClass("current")) {                  currentLength = $(".current").length;                  $(".current .contrast").each(function () {                      $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替換                  });              } else {                  $(".contrast-wrap").addClass('current');                  currentLength = $(".current").length;                  $(".contrast").each(function () {                      $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替換                  });              }              //$("#key").val(key);              oldKey0 = key;              //$(".contrast .result").each(function () {              //    $(this).parents('.contrast-wrap').addClass('current');              //    pos0.push($(this).offset().top);              //});              // pos0.push($(".contrast .result:eq(2)").offset().top - $(".contrast .result:eq(2)").parents(".contrast").offset().top);              oldCount0 = $(".contrast .result").length;              newflag = 0;          }      }      function focusMove(index0) {          $(".contrast .result:eq(" + index0 + ")").parents('.contrast-wrap').addClass('current');          $(".contrast .result:eq(" + index0 + ")").addClass("res");          var top = $(".contrast .result:eq(" + index0 + ")").offset().top + $(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop();          var intop = top - $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top;          $(".contrast .result:eq(" + index0 + ")").parents(".contrast").animate({ scrollTop: intop }, 200);          if ($(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop() == 0) {              $("html, body").animate({ scrollTop: top - 200 }, 200);          } else {              $("html, body").animate({ scrollTop: $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top - 200 }, 200);          }      }      $('#key').change(function () {          if ($('#key').val() == "") {              index0 = 0;              $(".contrast .result").each(function () {                  $(this).replaceWith($(this).html());              });              oldKey0 = "";          }      });  </script>

視頻教程推薦：html視頻教程

以上就是如何在html頁面中實現查找功能的詳細內容，更多請關注電腦知識網其它相關文章！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。