论坛首页 Web前端技术论坛

网页划词自动翻译的实现

浏览 2853 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-06-15  

其中机器翻译调用的Google API,将以下代码另存为即可看到效果,或看在线Demo:http://game.faqee.com/huaci.html

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<title>Javascript实现划词标记+划词搜索功能代码实例</title>  
<meta http-equiv="Content-Type" content="text/html; charset=GBK">  
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

</head>  
<body>  
<script type="text/javascript">

    google.load("language", "1");
 
    function trans(srcTest,obj) {

	  obj.innerHTML = "翻译中...";
 
      var text = srcTest;
 
      google.language.detect(text, function(result) {
 
        if (!result.error && result.language) {
 
		  var temp = "en|zh-CN";
		  var y = temp.split("|")[0];
		  var m = temp.split("|")[1];
          google.language.translate(text, y, m,
 
 
          function(result) {
 
            var translated = obj;
 
 
			obj.disabled=false;
 
 
            if (result.translation) {
 
 
              translated.innerHTML = result.translation;
 
 
            }else{
 
 
			  alert("无翻译结果");
 
 
			}
 
 
          });
 
 
        }else{
 
 
   		   obj.disabled=false;
 
 
		   alert(result.error);
 
 
		}
 
 
      });
 
 
    }
 
 
  </script>

<SCRIPT language=javascript>  
<!--  
document.body.onload=adddiv;  
document.onmousedown=recordobj;  
document.ondblclick=dbclick;  
document.onmouseup=showselect;  
var starobj,isdb=false,allow=true;
function isallow()  
{  
if(allow){  
allow=false;
var objj=document.getElementById("objj");     
objj.innerHTML="<a href=javascript:isallow()>开启划词搜索</a>";    
}  
else{  
allow=true;
var objj=document.getElementById("objj");    
objj.innerHTML="<a href=javascript:isallow()>禁用划词搜索</a>";  
}  
}  
function dbclick()  
{  
isdb=true;  
}  
function recordobj()  
{  
starobj=event.srcElement;  
}  
function showselect() {  
var str="";  
if(event.srcElement.tagName!="A"&&event.srcElement.tagName!="INPUT"&&event.srcElement==starobj&&!isdb&&allow)  
{  
var oText=document.selection.createRange();  
if(oText.text.length>0)  
{  
str=oText.text;  
oText.text="BuB"+oText.text+"EuE";  
}  
oText.select();  
event.srcElement.innerHTML=event.srcElement.innerHTML.replace("BuB","<u style='FONT-WEIGHT: bold;COLOR: #ff3366'>").replace("EuE","</u>");  
}  
searchgoogle(str);  
isdb=false;  
}  
function searchgoogle(str)  
{  
var obj=document.getElementById("searchgoogle");  
if(str.length>0)  
{  
obj.style.display="block";  
obj.style.position="absolute";  
obj.style.zindex=999;  
obj.style.posTop=document.body.scrollTop+event.y-25;  
obj.style.posLeft=document.body.scrollLeft+event.x+5;  
obj.style.widht=80;  
obj.innerHTML="<div id='transResult' style='background:#FFF;border:2px solid #CCFFFF;'></div>";  
trans(str,document.getElementById('transResult'));
}  
else  
{  
obj.style.display="none";  
}  
}  
function adddiv()  
{  
var mobj = document.createElement("div");  
mobj.id="searchgoogle";  
document.body.appendChild(mobj);  
}  
//-->  
</SCRIPT> 
<div id=objj><a href=javascript:isallow()>禁用划词搜索</a></div> 
<p>The time to move toward sustainability is now.
Concerns about the economy coupled with unpredictable energy prices are increasing pressure to bring operating costs down. Meanwhile, unprecedented public awareness of environmental issues means there's a "social dividend" to be gained by companies that go green, including being able to attract great talent.
</p>  
<p>Calculate your green savings.
Use our Sustainability Calculators to estimate your company's carbon footprint and see the savings you can achieve through enlightened IT implementation.
</p>
</body>  
</html>

 

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics