當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > JS實現劃詞搜索

JS實現劃詞搜索

2012/11/13 07:44:46作者：佚名來源：網絡

移動端

【實例名稱】

JS實現劃詞搜索

【實例描述】

在一段文本中選擇一個單詞，然后調用Google的搜索功能對此單詞進行搜索，這就是本例要實現的劃詞搜索功能。

【實例代碼】

<html>
<head>
<title>劃詞搜索-學無憂（www.yzddtk.cn）</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<SCRIPT language=Javascript>
document.body.onload=adddiv;            
//頁面加載時動態創建div
document.onmousedown=recordobj;         
//鼠標按下時觸發的事件
document.ondblclick=dbclick;            
//窗體雙擊時觸發的事件
document.onmouseup=showselect;          
//鼠標彈起時觸發的事件
var eventObj;
var isDouble=false;
var allow=true;                        
//是否啟用劃詞搜索
function isallow()
{
    if(allow){
    allow=false;
    alert('已經關閉');
    }
    else{
    allow=true;
    alert('已經打開');
    }
}
function dbclick()                      
//雙擊事件
{
    isDouble=true;
}
function recordobj()                   
 //當前操作對象
{
    eventObj=event.srcElement;
}
function showselect() {
    var str="";
    if(event.srcElement.tagName!="A"&&event.srcElement.tagName!=
"INPUT"&&event.srcElement==eventObj&&!isDouble&&allow)
    {
        var oText=document.selection.createRange();
//獲取選擇文本
        if(oText.text.length>0)                    
//如果文本存在
        {
            str=oText.text;
            oText.text="begin"+oText.text+"end";        
//包裝被選中的文本
        }
        oText.select();                                 
//實現選擇
                                                        
//設置選中文本的樣式-帶下劃線-變顏色
        event.srcElement.innerHTML=event.srcElement.
innerHTML.replace("begin","<u style='FONT-WEIGHT: bold;COLOR: #ff3366'>")
.replace("end","</u>");
    }
    googleDiv(str)                                      
//實現選定文本的搜索
    isDouble=false;
}
function googleDiv(str)
{
    var obj=document.getElementById("googleDiv");
//獲取動態添加的div
    if(str.length>0)                                
    {
        obj.style.display="block";                  
//顯示div
        obj.style.position="absolute";              
//設置div絕對位置
        obj.style.zindex=999;
        obj.style.posTop=document.body.scrollTop+event.y-25;
//div的Y坐標
        obj.style.posLeft=document.body.scrollLeft+event.x+5;
//div的X坐標
        obj.style.widht=80;                                  
//div的寬度
        obj.innerHTML="<a target=_blank href=http://www.google.com/
search?ie=UTF-8&oe=UTF-8&q="+str+" style='BORDER-RIGHT: royalblue thin solid; 
BORDER-TOP: royalblue thin solid; FONT-WEIGHT: bold; 
BORDER-LEFT: royalblue thin solid; CLIP: rect(auto auto auto auto); 
COLOR: #ffffff; BORDER-BOTTOM: royalblue thin solid; 
BACKGROUND-COLOR: inactivecaption; TEXT-DECORATION: none'>搜索</a>";
    }
    else
    {
      obj.style.display="none";
    }
}
function adddiv()//動態添加div標簽
{
    var mobj = document.createElement("div");   
//創建div標簽
    mobj.id="googleDiv";                       
 //設置div標簽的id
    document.body.appendChild(mobj);            
//將div添加到窗體中
}
</SCRIPT>
<INPUT type="button" onclick="isallow()" value="關閉/打開劃詞功能">
<p>This is Test ,please Select,it's will google</p>
</body>
</html>

【運行效果】

劃詞后的效果

劃詞搜索運行效果

搜索的效果

劃詞搜索運行效果

【難點剖析】

本例的難點有3個，獲取用戶選擇的詞，動態彈出div層讓用戶調用搜索功能，調用Google實現搜索。獲取用戶選擇的詞在“showselect”方法中實現，主要依靠“createRaIlge”和“select”兩個文本區域選擇方法。動態彈出div層是常見的層特效，就是設置層的隱藏和顯示。調用Google搜索的實現在“googleDiv”方法中完成，這里注意傳遞給Google的參數。

【源碼下載】

為了JS代碼的準確性，請點擊：劃詞搜索進行本實例源碼下載

標簽：

上一篇：JS實現漢字按拼音排序
下一篇：dll是什么文件，dll文件的作用

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频