前端中英文互譯

DayDreame發表於2019-02-27
前端
一：我們新建一個js檔案，取名為language.js
$(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();
})

四：測試效果

　　　　中文效果：

前端中英文互譯

英文測試：

前端中英文互譯

五：整體的專案目錄結構

相關文章