この記事の例では、ブラウザのWebページの文字検索機能をJS CSSで模倣する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。 コードをコピー コードは次のとおりです: JS+CSS模仿的网页字符查找功能 <br> BODY { <br> FONT-SIZE: 12px; LETTER-SPACING: 1pt; LINE-HEIGHT: 22px; MARGIN-LEFT: 5pt; MARGIN-TOP: 5pt <br> } <br> #scontentmain { <br> HEIGHT: 30px; POSITION: absolute; TOP: 28px; WIDTH: 228px <br> } <br> #scontentbar { <br> 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% <br> } <br> #scontentsub { <br> POSITION: absolute; TOP: 28px; WIDTH: 100% <br> } <br> A.a1:hover { <br> 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 <br> } <br> A.a1:link { <br> COLOR: #ffffff; TEXT-DECORATION: none; 12px;align: center <br> } <br> TD { <br> FONT-SIZE: 12px <br> } <br> .pos { <br> POSITION: relative <br> } <br> 中国晋州百战疲劳壮士哀洛黄损江淮宝马夸张美国AjaxASPJAVAJQUERY <br> var dragapproved=false <br> var zcor,xcor,ycor <br> function drag_onclick() { <br> if (search1.drag.checked == true ) dragapproved=false <br> else dragapproved=true <br> } <br> function movescontentmain(){ <br> if (event.button==1&&dragapproved&&search1.drag.checked == true){ <br> zcor.style.pixelLeft=tempvar1+event.clientX-xcor <br> zcor.style.pixelTop=tempvar2+event.clientY-ycor<br> leftpos=document.all.scontentmain.style.pixelLeft-document.body.scrollLeft <br> toppos=document.all.scontentmain.style.pixelTop-document.body.scrollTop <br> return false <br> } <br> } <br> function dragscontentmain(){ <br> if (!document.all) <br> return <br> if (event.srcElement.id=="scontentbar"){ <br> dragapproved=true <br> zcor=scontentmain <br> tempvar1=zcor.style.pixelLeft <br> tempvar2=zcor.style.pixelTop <br> xcor=event.clientX <br> ycor=event.clientY <br> document.onmousemove=movescontentmain <br> } <br> } <br> document.onmousedown=dragscontentmain <br> document.onmouseup=new Function("dragapproved=false") <br> function aa(e) <br> { <br> if (e==0) alert("\n- = 页面搜索引擎 1.0 = \n\n\n- 重写了部分代码 - 修正鼠标拖动跳跃的bug， - 保留选择可否拖动……"); <br> return; <br> } <br> function cose() <br> { <br> if(confirm("即将关闭此窗口，如确认请按确定！\n\n如要重开此窗口请刷新页面。")) <br> scontentmain.style.display='none' <br> else <br> scontentmain.style.display='' <br> } <br> document.write('<div id="scontentmain"><form name="search1" onSubmit="return findInPage(this.Word.value);"><div id="scontentbar">点击下面复选框，按住此处拖动</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>'); <br> var w=document.body.clientWidth-450 <br> var h=190 <br> w =document.body.scrollLeft <br> h =document.body.scrollTop <br> var leftpos=w <br> var toppos=h <br> scontentmain.style.left=w <br> scontentmain.style.top=h <br> 関数 ondisplay(){ <br> if (scontentsub.style.display=='') <br> scontentsub.style.display='none' <br> それ以外<br> scontentsub.style.display=='' <br> }<br> 関数 offdisplay(){ <br> if (scontentsub.style.display=='none') <br> scontentsub.style.display='' <br> それ以外<br> scontentsub.style.display=='none' <br> }<br> 関数 staticize(){ <br> w2=document.body.scrollLeft leftpos <br> h2=document.body.scrollTop トポス <br> scontentmain.style.left=w2 <br> scontentmain.style.top=h2 <br> }<br> window.onscroll=staticize <br> 関数 GetWord() <br> { <br> var tr <br> }<br> 関数 FindWord(w) <br> { <br> for (var i=0;i<WordList.options.length;i ) <br /> if (WordList.options[i].text==w) <br /> { <br /> WordList.options[i].selected=true <br /> Output.value=WordExpln[i] <br /> RESULT.style.visibility="visible" <br /> true を返します <br /> }<br /> false を返す <br /> }<br /> var canDrag=0,canGetWord=0 <br /> var oldtop=0,oldscrolltop=0 <br /> var WordExpln=new Array() <br /> var G_xmlHTTP <br /> document.onmousemove = GetWord <br /> var NS4 = (document.layers); <br /> var IE4 = (document.all); <br /> var win = これ; <br /> var n = 0; <br /> 関数 findInPage(str) <br /> { <br /> var txt、i、見つかりました。 <br /> if (str == "") <br /> false を返します。 <br /> if (NS4) <br /> { <br /> if (!win.find(str)) <br /> while(win.find(str, false, true)) <br /> n ; <br /> それ以外<br /> n ; <br /> if (n == 0)alert(str " ... 要監視の文字は存在しません。 n 请着输入页面中の关键字再次查找！n n 并および请注意，不要ハンドル“？”または“：“也输入查找！！”）; <br /> }<br /> if (IE4) <br /> { <br /> txt = win.document.body.createTextRange(); <br /> for (i = 0; i <= n && (found = txt.findText(str)) != false; i ) <br /> { <br /> txt.moveStart("文字", 1); <br /> txt.moveEnd("テキストエディット"); <br /> }<br /> if (見つかった) <br /> { <br /> txt.moveStart("文字", -1); <br /> txt.findText(str); <br /> txt.select(); <br /> txt.scrollIntoView(); <br /> n ; }<br /> それ以外<br /> { <br /> if (n > 0) <br /> { <br /> n = 0; <br /> findInPage(str); <br /> }<br /> それ以外<br /> alert(str "... 您要監視の文字が存在しません。 n请试着输入页面中の关键字再次查找！n n并および请注意，不要ハンドル“？”または“：“也输入查找！！”）; <br /> }<br /> }<br /> false を返します。 <br /> }<br /> self.onError=null; <br /> 現在のX = 現在のY = 0; <br /> どれ = null; <br /> lastScrollX = 0; lastScrollY = 0; <br /> NS = (ドキュメント.レイヤー) ? 1:0; <br /> IE = (ドキュメント.オール) ? 1:0; <br /> </スクリプト> <br> </body><br> </html></div> <p> ここで説明されている大家向けの JavaScript プログラムの設計が役立つことを望みます。</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
