如何在html页面中实现查找功能

前台效果：

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视频教程