JavaScript模仿網頁的字符查找功能

2024-09-05 12:17:42

字體：大中小

來源：轉載

供稿：網友

JavaScript模仿網頁的字符查找功能，也就是打開網頁按下“Ctrl+F”的效果，如果字符不至一個，則會依次向下搜索或向上搜索，搜索框可以拖動，可以借此學習一下JS的字符控制功能。

<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-ycorleftpos=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   class="h9ldddt"   id="scontentmain"><form name="search1" onSubmit="return findInPage(this.Word.value);"><div   class="xhjrrzh"   id="scontentbar"> <map name="Map"></map></div><div   class="dvpzrhr"   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()">可用鼠標拖動窗口 </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 function GetWord() { var tr } function FindWord(w) { for (var i=0;i<WordList.options.length;i++) if (WordList.options[i].text==w) { WordList.options[i].selected=true Output.value=WordExpln[i] RESULT.style.visibility="visible" return true } return false } var canDrag=0,canGetWord=0 var oldtop=0,oldscrolltop=0 var WordExpln=new Array() var G_xmlHTTP document.onmousemove = GetWord var NS4 = (document.layers); var IE4 = (document.all); var win = this; var n = 0; function findInPage(str) { var txt, i, found; if (str == "") return false; if (NS4) { if (!win.find(str)) while(win.find(str, false, true)) n++; else n++; if (n == 0) alert(str + " ... 您要找的文字不存在。/n /n請試著輸入頁面中的關鍵字再次查找！/n /n 并且請注意，不要把“？”或“：”也輸入查找！?。?); } 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>

上一篇：兩種設為首頁的JS代碼

下一篇：輸入指定字符，頁面自動跳轉