调用google api 实现google网站上翻译全功能
近日google网站提供了google? language api 函数，用户只需调用其函数就可实现google网站上的翻译功能
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="fanyi.aspx.cs" Inherits="fanyi" %>
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
? <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
? <title>黔南热线在线翻译</title>
? <style type="text/css">
? body {
??? background-color: white;
??? color: black;
??? font-family: Arial, sans-serif;
??? font-size: small;
??? margin: 15px;
? }
? form.query-box {
??? font-size: 15px;
??? margin-top : 0px;
??? margin-right : 0px;
??? margin-bottom : 4px;
??? margin-left : 0px;
??? width: 100%;
? }
? input.query-input {
??? padding-left : 2px;
??? margin-bottom : 4px;
??? width: 300px;
??? border: 1px solid #BCCDF0;
? }
? input.button {
??? margin-top : 4px;
? }
? div#main {
??? width: 300px;
? }
? div#results {
??? padding-top: 20px;
??? width: 300px;
? }
? div#results_title {
??? color: lightgray;
??? font-weight: bold;
? }
? div#results_body {
??? color: gray;
??? font-weight: bold;
??? font-size: 16px;
??? margin-bottom: 20px;
? }
? </style>
? <script src="http://www.google.com/jsapi?key=internal" type="text/javascript"></script>
</head>
<body>
??? <table width="100%">
??????? <tr>
??????????? <td style="width: 168px">
??????????? </td>
??????????? <td colspan="2" rowspan="3">
<div id="results" style="width: 347px; height: 238px">
? <div id="results_title">
??????? 翻译结果:</div>
? <hr/>
? <div id="results_body"></div>
</div>
??????????????? <br />
??????????????? <br />
??????????????? <br />
??????????? </td>
??????? </tr>
??????? <tr>
??????????? <td style="width: 168px">
? <input id="source" type="text"
???????? autocomplete="off" value="hello world" style="width: 326px; height: 245px"/></td>
??????? </tr>
??????? <tr>
??????????? <td style="width: 168px">
<div id="main">
? <form onsubmit="return submitChange();">
??????? <select name="langpair" id="langpair">
??? <option value="ar|en">阿拉伯语 to 英语</option>
??? <option value="zh|en">中文 to 英语</option>
<%--??? <option value="zh-CN|zh-TW">Chinese(Simplified to Traditional)</option>
??? <option value="zh-TW|zh-CN">Chinese (Traditional to Simplified)</option>--%>
??? <option value="nl|en">Dutch to English</option>
??? <option value="en|ar">英语 to 阿拉伯语</option>
??? <option value="en|zh-CN">英语 to 中文(简体)</option>
??? <option value="en|zh-TW">英语 to 中文(繁体)</option>
??? <option value="en|nl">英语 to 荷兰语</option>
??? <option value="en|fr">英语 to 法语</option>
??? <option value="en|de">英语 to 德语</option>
??? <option value="en|it">英语 to 意大利语</option>
??? <option value="en|ja">英语 to 日本语</option>
??? <option value="en|ko">英语 to 韩语</option>
??? <option value="en|pt-PT">英语 to 葡萄牙语</option>
??? <option value="en|ru">英语 to 俄语</option>
??? <option value="en|es" selected="" >英语 to 西班牙语</option>
??? <option value="fr|en">法语 to 英语</option>
??? <option value="fr|de">法语 to 德语</option>
??? <option value="de|en">德语 to 英语</option>
??? <option value="de|fr">德语 to 法语</option>
??? <option value="it|en">意大利语 to 英语</option>
??? <option value="ja|en">日本语 to 英语</option>
??? <option value="ko|en">韩语 to 英语</option>
??? <option value="pt|en">葡萄牙语 to 英语</option>
??? <option value="ru|en">俄语 to 英语</option>
? </select>
? <input type="submit" value="翻译"/>
? </form>
</div>
??????????? </td>
??????? </tr>
??? </table>
? <script type="text/javascript">
??? google.load("language", "1");
??? google.setOnLoadCallback(submitChange);
??? function submitChange() {
????? var value = document.getElementById('source').value;
????? var langpair = document.getElementById('langpair');
????? var pair = langpair.options[langpair.selectedIndex].value.split('|');
????? var src = pair[0];
????? var dest = pair[1];
????? google.language.translate(value, src, dest, translateResult);
????? return false;
??? }
??? function translateResult(result) {
????? var resultBody = document.getElementById("results_body");
????? if (result.translation) {
??????? resultBody.innerHTML = result.translation;
????? } else {
??????? resultBody.innerHTML = '<span style="color:red">Error Translating</span>';
????? }
??? }
? </script>
</body>
