网页划词自动翻译的实现

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

 

Html代码 复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">     
  2. <html>     
  3. <head>     
  4. <title>Javascript实现划词标记+划词搜索功能代码实例</title>     
  5. <meta http-equiv="Content-Type" content="text/html; charset=GBK">     
  6. <script type="text/javascript" src="http://www.google.com/jsapi"></script>  
  7.   
  8. </head>     
  9. <body>     
  10. <script type="text/javascript">  
  11.   
  12.     google.load("language", "1");   
  13.     
  14.     function trans(srcTest,obj) {   
  15.   
  16.       obj.innerHTML = "翻译中...";   
  17.     
  18.       var text = srcTest;   
  19.     
  20.       google.language.detect(text, function(result) {   
  21.     
  22.         if (!result.error && result.language) {   
  23.     
  24.           var temp = "en|zh-CN";   
  25.           var y = temp.split("|")[0];   
  26.           var m = temp.split("|")[1];   
  27.           google.language.translate(text, y, m,   
  28.     
  29.     
  30.           function(result) {   
  31.     
  32.             var translated = obj;   
  33.     
  34.     
  35.             obj.disabled=false;   
  36.     
  37.     
  38.             if (result.translation) {   
  39.     
  40.     
  41.               translated.innerHTML = result.translation;   
  42.     
  43.     
  44.             }else{   
  45.     
  46.     
  47.               alert("无翻译结果");   
  48.     
  49.     
  50.             }   
  51.     
  52.     
  53.           });   
  54.     
  55.     
  56.         }else{   
  57.     
  58.     
  59.            obj.disabled=false;   
  60.     
  61.     
  62.            alert(result.error);   
  63.     
  64.     
  65.         }   
  66.     
  67.     
  68.       });   
  69.     
  70.     
  71.     }   
  72.     
  73.     
  74.   </script>  
  75.   
  76. <SCRIPT language=javascript>     
  77. <!--     
  78. document.body.onload=adddiv;     
  79. document.onmousedown=recordobj;     
  80. document.ondblclick=dbclick;     
  81. document.onmouseup=showselect;     
  82. var starobj,isdb=false,allow=true;   
  83. function isallow()     
  84. {     
  85. if(allow){     
  86. allow=false;   
  87. var objj=document.getElementById("objj");        
  88. objj.innerHTML="<a href=javascript:isallow()>开启划词搜索</a>";       
  89. }     
  90. else{     
  91. allow=true;   
  92. var objj=document.getElementById("objj");       
  93. objj.innerHTML="<a href=javascript:isallow()>禁用划词搜索</a>";     
  94. }     
  95. }     
  96. function dbclick()     
  97. {     
  98. isdb=true;     
  99. }     
  100. function recordobj()     
  101. {     
  102. starobj=event.srcElement;     
  103. }     
  104. function showselect() {     
  105. var str="";     
  106. if(event.srcElement.tagName!="A"&&event.srcElement.tagName!="INPUT"&&event.srcElement==starobj&&!isdb&&allow)     
  107. {     
  108. var oText=document.selection.createRange();     
  109. if(oText.text.length>0)     
  110. {     
  111. str=oText.text;     
  112. oText.text="BuB"+oText.text+"EuE";     
  113. }     
  114. oText.select();     
  115. eventevent.srcElement.innerHTML=event.srcElement.innerHTML.replace("BuB","<u style='FONT-WEIGHT: bold;COLOR: #ff3366'>").replace("EuE","</u>");     
  116. }     
  117. searchgoogle(str);     
  118. isdb=false;     
  119. }     
  120. function searchgoogle(str)     
  121. {     
  122. var obj=document.getElementById("searchgoogle");     
  123. if(str.length>0)     
  124. {     
  125. obj.style.display="block";     
  126. obj.style.position="absolute";     
  127. obj.style.zindex=999;     
  128. obj.style.posTop=document.body.scrollTop+event.y-25;     
  129. obj.style.posLeft=document.body.scrollLeft+event.x+5;     
  130. obj.style.widht=80;     
  131. obj.innerHTML="<div id='transResult' style='background:#FFF;border:2px solid #CCFFFF;'></div>";     
  132. trans(str,document.getElementById('transResult'));   
  133. }     
  134. else     
  135. {     
  136. obj.style.display="none";     
  137. }     
  138. }     
  139. function adddiv()     
  140. {     
  141. var mobj = document.createElement("div");     
  142. mobj.id="searchgoogle";     
  143. document.body.appendChild(mobj);     
  144. }     
  145. //-->     
  146. </SCRIPT>    
  147. <div id=objj><a href=javascript:isallow()>禁用划词搜索</a></div>    
  148. <p>The time to move toward sustainability is now.   
  149. 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.   
  150. </p>     
  151. <p>Calculate your green savings.   
  152. Use our Sustainability Calculators to estimate your company's carbon footprint and see the savings you can achieve through enlightened IT implementation.   
  153. </p>  
  154. </body>     
  155. </html>  

你可能感兴趣的:(JavaScript,html,Google,Go,Social)