前端中英文互譯
阿新 • • 發佈：2018-11-05
一：我們新建一個js檔案，取名為language.js
/**
* Created by Administrator on 2018/11/5.
*/
$(function(){
// do something
var script=document.createElement("script");
script.type="text/javascript";
script.src="http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**";
document.getElementsByTagName('head')[0].appendChild(script);
var value = sessionStorage.getItem("language");
document.onreadystatechange = function () {
if (document.readyState == 'complete') {
if(value==="1"){
Microsoft.Translator.Widget.Translate('zh-CHS', 'en', onProgress, onError, onComplete, onRestoreOriginal, 2000);
}
}
}
function onProgress(value) {
}
function onError(error) {
}
function onComplete() {
$("#WidgetFloaterPanels").hide();
}
function onRestoreOriginal() {
}
});
function translate(){
var value = sessionStorage.getItem("language");
if(value==="1"){
sessionStorage.setItem("language", "0");
}else{
sessionStorage.setItem("language", "1");
}
window.location.reload();//重新整理當前頁面.
}
二：我們引入這個js檔案
注：配置路徑自己設定好
<script type="text/javascript" src="./language.js"></script>三：我們新建一個測試頁面index.html，引入jq，寫入方法
<button id="change">點選一鍵切換</button>
$("#change").click(function () {
translate();
})
四：測試效果
中文效果：
英文測試：
測試成功！
五：整體的專案目錄結構
六：整體的程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="change">點選一鍵切換</button>
<div>
<p>這是測試</p>
<p>
1、《夜將曉出籬門迎涼有感》【宋】陸游
三萬裡河東入海，五千仞嶽上摩天。
遺民淚盡胡塵裡，難望王師又一年。
2、《秋登宣城謝眺北樓》唐李白
江城如畫裡，山曉望晴空。雨水夾明鏡，雙橋落彩虹。
人煙寒橘柚，秋色老梧桐。誰念北樓上，臨風懷謝公。
3、《秋登蘭山寄張五》唐孟浩然
北山白雲裡，隱者自怡悅。相望始登高，心隨雁飛滅。
愁因薄暮起，興是清秋髮。時見歸村人，沙行渡頭歇。
天邊樹若薺，江畔洲如月。何當載酒來，共醉重陽節。
4、《秋登宣城謝眺北樓》【唐】李白
江城如畫裡，山曉望晴空。雨水夾明鏡，雙橋落彩虹。
人煙寒橘柚，秋色老梧桐。誰念北樓上，臨風懷謝公。
5、《宿建德江》【唐】孟浩然
移舟泊煙渚，日暮客愁新。野曠天低樹，江清月近人。
6、《秋登蘭山寄張五》【唐】孟浩然
北山白雲裡，隱者自怡悅。相望始登高，心隨雁飛滅。
愁因薄暮起，興是清秋髮。時見歸村人，沙行渡頭歇。
天邊樹若薺，江畔洲如月。何當載酒來，共醉重陽節。
</p>
</div>
<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./language.js"></script>
<script type="text/javascript">
$("#change").click(function () {
translate();
})
</script>
</body>
</html>