点击某一个字幕或者数字,直接在页内进行查找,实现ctrl+F的功能,本人刚开始学JS,请问各位高手有没有可以参考的代码,谢谢了。

解决方案 »

  1.   


    <script> 
    function findInPage(str) 

     var txt, i, found,n = 0; 
     if (str == "") 
     { 
      return false; 
     } 
     txt = 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 + "no exit"); 
      } 
     } 
     return false; 
    } </script> 
    <BODY>
    13e44
    <input type="text" value="13e44" onclick="findInPage(this.value)">
    <div id="myDiv" style="position:absolute; top:0; left:0;width:100%;height:100%;display:none;background-color:silver;">123 </div> 
    </BODY>
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns=" http://www.w3.org/1999/xhtml"> 
    <!-- DW6 --> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>shawl.qiu template</title> 
    <script type="text/javascript"> 
    //<![CDATA[ 
        onload=function(){ 
            fHl(document.body, '纸伞|她'); 
           /* fHl(document.body, '丁香|雨巷', true); 
             
            fHl(document.body, '希望|愁怨', false, '/'); 
            fHl(document.getElementById('at_main'), '独自|飘过|悠长', true, '/'); */
             
    /*         fHl(document.body, '纸伞'); 
            fHl(document.body, '她', false, '/'); 
            fHl(document.body, '丁香', true, '/'); 
            fHl(document.body, '雨巷', true, '/'); 
             
            fHl(document.body, '希望', false); 
            fHl(document.body, '愁怨', true); */ 
             
    /*         fHl(document.body, '丁香', 'blue', 'white', '/'); 
            fHl(document.body, '雨巷', 'gray', 'white', '/'); 
            fHl(document.body, '独自', 'white', 'red'); 
            fHl(document.body, '悠长', 'white', 'red'); 
            fHl(document.body, '飘过'); */ 
        } 
        /*----------------------------------------*\ 
         * 使用 javascript HTML DOM 高亮显示页面特定字词 By shawl.qiu 
         * 参数说明: 
         * o: 对象, 要进行高亮显示的对象. 
         * flag: 字符串, 要进行高亮的词或多个词, 使用 竖杠(|) 分隔多个词 . 
         * rndColor: 布尔值, 是否随机显示文字背景色与文字颜色, true 表示随机显示. 
         * url: URI, 是否对高亮的词添加链接.  
        \*----------------------------------------*/ 
        //--------begin function fHl(o, flag, rndColor, url)------------------// 
        function fHl(o, flag, rndColor, url){ 
            var bgCor=fgCor=''; 
            if(rndColor){ 
                bgCor=fRndCor(10, 20); 
                fgCor=fRndCor(230, 255); 
            } else { 
                bgCor='yellow'; 
                fgCor='black'; 
            } 
            var re=new RegExp(flag, 'i'); 
            for(var i=0; i<o.childNodes.length; i++){     
                var o_=o.childNodes[i]; 
                var o_p=o_.parentNode; 
                if(o_.nodeType==1) { 
                    fHl(o_, flag, rndColor, url);                 
                 } else if (o_.nodeType==3) { 
                    if(!(o_p.nodeName=='A')){ 
                        if(o_.data.search(re)==-1)continue; 
                        var temp=fEleA(o_.data, flag); 
                        o_p.replaceChild(temp, o_); 
                    } 
                }  // shawl.qiu script 
            } 
            //------------------------------------------------ 
            function fEleA(text, flag){ 
                var style=' style="background-color:'+bgCor+';color:'+fgCor+';" ' 
                var o=document.createElement('span'); 
                var str=''; 
                var re=new RegExp('('+flag+')', 'gi'); 
                if(url){ 
                    str=text.replace(re, '<a href="'+url+ 
                    '"'+style+'>$1</a>'); 
                } else { 
                    str=text.replace(re, '<span '+style+'>$1</span>'); 
                } 
                o.innerHTML=str; 
                return o; 
            }     // shawl.qiu script 
            //------------------------------------------------ 
            function fRndCor(under, over){ 
                if(arguments.length==1){ 
                    var over=under; 
                        under=0; 
                }else if(arguments.length==0){ 
                    var under=0; 
                    var over=255; 
                } 
                var r=fRandomBy(under, over).toString(16); 
                    r=padNum(r, r, 2); 
                var g=fRandomBy(under, over).toString(16); 
                    g=padNum(g, g, 2); 
                var b=fRandomBy(under, over).toString(16); 
                    b=padNum(b, b, 2); 
                    //defaultStatus=r+' '+g+' '+b 
                return '#'+r+g+b; 
                function fRandomBy(under, over){ 
                    switch(arguments.length){ 
                        case 1: return parseInt(Math.random()*under+1); 
                        case 2: return parseInt(Math.random()*(over-under+1) + under); 
                        default: return 0; 
                    } 
                } // shawl.qiu script 
                function padNum(str, num, len){ 
                    var temp='' 
                    for(var i=0; i<len;temp+=num, i++); 
                    return temp=(temp+=str).substr(temp.length-len); 
                } // shawl.qiu script 
            } 
        } // shawl.qiu script 
        //--------end function fHl(o, flag, rndColor, url)--------------------// function go(str)
    {
      fHl(document.body, str); 
    }//]]> 
    </script> 
    </head> 
    <body> 
    <input type="text" id="TString"><input type="button" value="search" onclick='go(document.getElementById("Tstring").value);'><br>
    <div class="at_main" id="at_main"><p/><b>CITE:</b><cite><div class=u_cite>戴望舒写女孩<br/> 
    <br/> 
    &nbsp;雨  巷&nbsp;<br/> 
    撑着油纸伞,独自&nbsp;<br/> 
    彷徨在悠长、悠长&nbsp;<br/> 
    又寂寥的雨巷,&nbsp;<br/> 
    我希望逢着&nbsp;<br/> 
    一个丁香一样地&nbsp;<br/> 
    结着愁怨的姑娘。&nbsp;<br/> 
    她是有&nbsp;<br/> 
    丁香一样的颜色,&nbsp;<br/> 
    丁香一样的芬芳,&nbsp;<br/> 
    丁香一样的忧愁,&nbsp;<br/> 
    在雨中哀怨,&nbsp;<br/> 
    哀怨又彷徨;&nbsp;<br/> 
    她彷徨在这寂寥的雨巷,&nbsp;<br/> 
    撑着油纸伞&nbsp;<br/> 
    像我一样,&nbsp;<br/> 
    像我一样地&nbsp;<br/> 
    默默踟躇着&nbsp;<br/> 
    冷漠、凄清,又惆怅。&nbsp;<br/> 
    她默默地走近,&nbsp;<br/> 
    走近,又投出&nbsp;<br/> 
    叹息一般的眼光&nbsp;<br/> 
    她飘过&nbsp;<br/> 
    像梦一般地,&nbsp;<br/> 
    像梦一般地凄婉迷茫。&nbsp;<br/> 
    像梦中飘过&nbsp;<br/> 
    一枝丁香地,&nbsp;<br/> 
    我身旁飘过这个女郎;&nbsp;<br/> 
    她默默地远了,远了,&nbsp;<br/> 
    到了颓圮的篱墙,&nbsp;<br/> 
    走尽这雨巷。&nbsp;<br/> 
    在雨的哀曲里,&nbsp;<br/> 
    消了她的颜色,&nbsp;<br/> 
    散了<a href="/">她</a>的芬芳,&nbsp;<br/> 
    消散了,甚至她的&nbsp;<br/> 
    叹息般的眼光&nbsp;<br/> 
    丁香般的惆怅。&nbsp;<br/> 
    撑着油纸伞,独自&nbsp;<br/> 
    彷徨在悠长、悠长&nbsp;<br/> 
    又寂寥的雨巷,&nbsp;<br/> 
    我希望飘过&nbsp;<br/> 
    一个丁香一样地&nbsp;<br/> 
    结着愁怨的姑娘。</div></cite></div> 
    <span class="left160px"><a href="article.asp?classid=14&nclassid=178&articleid=12830#anchor">戴望舒写女孩</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12819#anchor">悲惨世界 - 第四部 卜吕梅街的儿女情和圣德尼街的英雄血 - 第五卷 结尾不象开头 - 四 石头下面的一颗心</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12835#anchor">青玉案&nbsp;元夕</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12855#anchor">“科学精神”语义分析</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=3053#anchor">再别康桥 --徐志摩</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12862#anchor">学术论文格式</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12836#anchor">一棵开花的树</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12840#anchor">书信写作格式</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12818#anchor">悲惨世界 - 第四部 卜吕梅街的儿女情和圣德尼街的英雄血 - 第十二卷 科林斯 - 六 等 待</a><br/><a href="article.asp?classid=14&nclassid=178&articleid=12834#anchor">卿云歌</a></span> 
    </body> 
    </html> 
      

  3.   

    谢谢楼上两位大虾了,可能是我上午没有说明白,这还不是我要的效果。我是这样想的,一个通讯录的页面,打开后,点击Z键,网页自动搜索拼音首字母是Z的姓名,如赵**、张**等,就和ctrl+F的效果一样,实现页面内的快速查找。