JavaScript模仿网页的字符查找功能

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html>
<head>
<title>JavaScript模仿网页的字符查找功能</title>
<style type=text/css> 
BODY { 
FONT-SIZE: 12px; LETTER-SPACING: 1pt; LINE-HEIGHT: 22px; MARGIN-LEFT: 5pt; MARGIN-TOP: 5pt 
} 
#scontentmain { 
HEIGHT: 30px; POSITION: absolute; TOP: 28px; WIDTH: 228px 
} 
#scontentbar { 
BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; CURSOR: hand; HEIGHT: 15px; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px; POSITION: absolute; TOP: 5px; WIDTH: 100% 
} 
#scontentsub { 
POSITION: absolute; TOP: 28px; WIDTH: 100% 
} 
A.a1:hover { 
BORDER-BOTTOM: #4a8ff2 1px solid; BORDER-LEFT: #4a8ff2 1px solid; BORDER-RIGHT: #4a8ff2 1px solid; BORDER-TOP: #4a8ff2 1px solid; LINE-HEIGHT: 13pt; WIDTH: 83px; 12px;: 1869FE; align: center 
} 
A.a1:link { 
COLOR: #ffffff; TEXT-DECORATION: none; 12px;align: center 
} 
TD { 
FONT-SIZE: 12px 
} 
.pos { 
POSITION: relative 
} 
</style> 
</head>
<body>
<br>中国<br>晋州<br>百战疲劳壮士哀<br>洛<br>黄损<br>江淮<br>宝马<br>夸张<br>美国<br>Ajax<br>ASP<br>JAVA<br>JQUERY
<SCRIPT language=JavaScript> 
var dragapproved=false 
var zcor,xcor,ycor 
function drag_onclick() { 
if (search1.drag.checked == true ) dragapproved=false 
else dragapproved=true 
} 
function movescontentmain(){ 
if (event.button==1&&dragapproved&&search1.drag.checked == true){ 
zcor.style.pixelLeft=tempvar1+event.clientX-xcor 
zcor.style.pixelTop=tempvar2+event.clientY-ycor
leftpos=document.all.scontentmain.style.pixelLeft-document.body.scrollLeft 
toppos=document.all.scontentmain.style.pixelTop-document.body.scrollTop 
return false 
} 
} 
function dragscontentmain(){ 
if (!document.all) 
return 
if (event.srcElement.id=="scontentbar"){ 
dragapproved=true 
zcor=scontentmain 
tempvar1=zcor.style.pixelLeft 
tempvar2=zcor.style.pixelTop 
xcor=event.clientX 
ycor=event.clientY 
document.onmousemove=movescontentmain 
} 
} 
document.onmousedown=dragscontentmain 
document.onmouseup=new Function("dragapproved=false") 
function aa(e) 
{ 
if (e==0) alert("\n-　　= 页面搜索引擎 1.0 = \n\n\n- 重写了部分代码\n- 修正鼠标拖动跳跃的bug，\n- 保留选择可否拖动……"); 
return; 
} 
function cose() 
{ 
if(confirm("即将关闭此窗口，如确认请按确定！\n\n如要重开此窗口请刷新页面。")) 
scontentmain.style.display='none' 
else 
scontentmain.style.display='' 
} 
document.write('<div id="scontentmain"><form name="search1" onSubmit="return findInPage(this.Word.value);"><div id="scontentbar"> <map name="Map"><area shape="rect" coords="20,0,40,20" alt="最大化" onclick="offdisplay()"><area shape="rect" coords="0,0,20,20" alt="最小化" onclick="ondisplay()"><area shape="rect" shape="rect" coords="34,0,60,19" alt="关闭" onclick="cose()"></map></div><div id="scontentsub"" style="visibility: show"><table width="228" border="1" cellpadding="2" cellspacing="0" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#0099CC" class=font1><tr bgcolor="#2D96FF"><td height="2" colspan="2" align="center"><input type="text" name="Word" size="30" onChange="n = 0;" onFocus=window.document.search1.Word.value="" style="background-image: url()" ></td></tr><tr bgcolor="#CCCCCC"><td width="222"> <input type="checkbox" name="drag" value="搜索" LANGUAGE=javascript onclick="return drag_onclick()">可用鼠标拖动窗口 <a href="#top"></a></td><td width="61" align="center"><input type="submit" name="Submit" value="搜索"></td></tr></form></table></div></DIV>'); 
var w=document.body.clientWidth-450 
var h=190 
w+=document.body.scrollLeft 
h+=document.body.scrollTop 
var leftpos=w 
var toppos=h 
scontentmain.style.left=w 
scontentmain.style.top=h 
function ondisplay(){ 
if (scontentsub.style.display=='') 
scontentsub.style.display='none' 
else 
scontentsub.style.display=='' 
} 
function offdisplay(){ 
if (scontentsub.style.display=='none') 
scontentsub.style.display='' 
else 
scontentsub.style.display=='none' 
} 
function staticize(){ 
w2=document.body.scrollLeft+leftpos 
h2=document.body.scrollTop+toppos 
scontentmain.style.left=w2 
scontentmain.style.top=h2 
} 
window.onscroll=staticize

if (IE4) 
{ 
txt = win.document.body.createTextRange(); 
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) 
{ 
txt.moveStart("character", 1); 
txt.moveEnd("textedit"); 
} 
if (found) 
{ 
txt.moveStart("character", -1); 
txt.findText(str); 
txt.select(); 
txt.scrollIntoView(); 
n++; } 
else 
{ 
if (n > 0) 
{ 
n = 0; 
findInPage(str); 
} 
else 
alert(str + "... 您要找的文字不存在。\n \n请试着输入页面中的关键字再次查找！\n \n 并且请注意，不要把“？”或“：”也输入查找！！！"); 
} 
} 
return false; 
}

self.onError=null; 
currentX = currentY = 0; 
whichIt = null; 
lastScrollX = 0; lastScrollY = 0; 
NS = (document.layers) ? 1 : 0; 
IE = (document.all) ? 1: 0; 
</SCRIPT> 
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JavaScript模仿网页的字符查找功能

分类

网站常用

描述

JavaScript模仿网页的字符查找功能，也就是打开网页按下“Ctrl+F”的效果，如果字符不至一个，则会依次向下搜索或向上搜索，搜索框可以拖动，可以借此学习一下JS的字符控制功能。