发布网友 发布时间:2022-04-22 00:36
共2个回答
懂视网 时间:2022-04-07 11:10
前台效果:
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视频教程
热心网友 时间:2022-04-07 08:18
搜索网页内容步骤:
1.
打开需要搜索内容的网页
2.
按住ctrl后按f
3.
右上角出现搜索框
4.
搜索框内输入要查询的关键字
5.
搜索框会自动计算出出现次数
6.
网页内对该关键词会高亮显示
7.
定位需要找的内容即可
当我们点进用搜索引擎搜到的网页时,有时会发现一眼找不到与搜索的词相符的内容;此时,如果一行行慢慢去找,岂不浪费时间和精力,其实浏览都为我们设计了查找功能,只要输入想找的词,即刻以亮的背景颜色显示该词。
一般浏览器都是同时按 Ctrl + F 调出查找窗口,下面以 ie8 为例具体说明。
1、打开一个 ie 窗口,同时按 Ctrl + F(或者依次选择菜单栏的“编辑(E)——在此页上查找(F)”),调出查找窗口,如图1所示:
图1
2、输入想要查找的词,比如图1中查找“商场打折”,网页中就以*为背景色显示所有的“商场打折”这个词。
3、查找完后想隐藏查找窗口,点击“查找”前面的“黑色叉”即可。
4、查找输入框的右边,有“上一个、下一个”按钮,点击“下一个”可以定位到下一个“商场打折”;同样,点击“上一个”可以定位到上一个“商场打折”。此外,还有一个“选项”下接选择框,里面有“全字匹配和区分大小写”,可以根据查找需求选择。
网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,您的网站就是由网页组成的,如果您只有域名和虚拟主机而没有制作任何网页的话,您的客户仍旧无法访问您的网站。
网页是一个包含HTML标签的纯文本文件,它可以存放在世界某个角落的某一台计算机中,是万维网中的一“页”,是超文本标记语言格式(标准通用标记语言的一个应用,文件扩展名为.html或.htm)。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。
中文名
网络页面
外文名
web page
阅读方式
网页浏览器
拼音
wǎng yè
中文缩写
网页