注：這幾天發現微軟官方把微軟字典整站翻譯API停止服務了（下面第三種方法目前已無法使用）不知是永久還是暫時，扎心
前言
現在很多公司喜歡把網站做成中英文切換，比如某零食官網
那么問題來了，一般實現中英文切換有哪些方法呢？下面我總結了三種方法（因技術水平有限，若有錯誤，歡迎留言指正）
解決方法
方法1：（中英文各做一份，然后用不同的文件夾區分開來，點擊切換語言時，鏈接跳轉到不同文件夾就行了）
優點：各自的版本是分離開來的，比較穩定，不會出現互相干擾（共用數據庫資料的除外）
場景：個人認為符合下面2種場景可以考慮使用這種方法
注：如果切換的語言版本很少，並且本身網站不復雜（比如電商網站不推薦）
整體內容相對固定，布局比較簡潔，扁平化，改動不會太頻繁的（比如新聞類網站不推薦）
方法2：（借助 jquery 插件——jquery.i18n.properties）
詳見：https://blog.csdn.net/aixiaoyang168/article/details/49336709
注：看樓下評論感覺這個博主挺好的，對提問的人也會給予解答
方法3：（使用微軟字典整站翻譯）
詳見：https://blog.csdn.net/CSDN_LQR/article/details/78026254
注：因為怕麻煩又技術渣，所以用的這種方法。如果你問我為什么不用谷歌整站翻譯，因為要 FQ , FQ, FQ
Demo（下面代碼為方法③原文示例代碼，我修改了顯示內容和引用了jquery CDN）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> p { text-align: center; } </style> </head> <body> <button id="change">中英文切換</button><br /> <p>變變變</p> <div id=""> 開心一天是一天，不開心一天也是一天，為何不放下不開心，選擇開心呢 </div> <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script> <script src="js/language.js"></script> <script> $("#change").click(function() { translate(); }) </script> </body> </html>
下面是我根據方法三，用微軟字典整站翻譯實現中英文切換的 Demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <button id="change">中英文切換</button><br /> <p style="text-align: center;">變變變</p> <div> 「塗塗: 程序員有三寶：悶騷，加班，修電腦。 產品經理有三寶：山寨，改版，再推倒； 老板有三寶：忽悠，找錢，洗大腦。 SE有三寶：扯蛋，規格，CCB。 項目經理有三寶：進度，流程，做報表。 客戶有三寶，我要，我要，我還要！ 運營經理有三寶：數據，活動，搞渠道； 市場經理有三寶：調研，策划，狂跳槽 編輯有三寶：選題，加班，被斃稿。 客戶經理有三寶：能吹，勤快，酒量好！ 運營三寶：黃圖，抽獎，軟文稿； 產品經理有三寶：原型，扯皮，愛吐槽。 團隊經理有三寶：團建，開會，評績效。 HR有三寶：招聘、培訓、價值觀輔導 獵頭顧問有三寶：JD，CV，電話擾。 部門經理有三寶：K人、畫餅、吹成效...... 咨詢師有三寶：方案，畫餅，做簡報 運營經理有三寶：注冊，活躍，真實沒有效。 運營專員有三寶，需求，數據，寫戰報 敏捷教練有三寶：看板，迭代，狂布道。 我記得程序員三寶是錢多，話少，死得早； 推廣人員有三寶～活動～美女～抽獎好！ SQA有三寶：質疑，挑刺，寫報告。…… 代碼民工有三寶：Bug，Debug，Newbug。 設計人員有三寶：畫圖，加班，被指點 商務經理有三寶：談判，換量，到處跑； 測試人員有三寶：較真，溫柔，撒撒嬌。 甲方有三寶：出納，會計，大領導。 運維三寶必然是：活多，覺少，人品好；重啟，重裝，換電腦；隨叫隨到、通宵不倒、常看《IT運維之道》。」 ————————— </div> <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script> <script src="js/language.js"></script> <script src="js/microsoft.js"></script> <script> $("#change").click(function() { translate(); }) </script> </body> </html>
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();//刷新當前頁面. }
①：上面language.js中寫死了中文轉英文（zh-CHS轉en），如果項目需要其他語言的轉換，直接對language.js進行自定義擴展即可
②：微軟字典整站翻譯CDN源碼（也就是我上面的microsoft.js）
http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**
補充：不過這方法有個小問題，就是每次點擊切換語言后，會有彈出框和hover效果，如下圖
彈出框：
hover效果：
后經過一番查找，終於找到了解決辦法
注：要去掉翻譯后出現的彈框和hover效果，不能直接引用 language.js 里面引入的微軟字典整站翻譯CDN鏈接
要把CDN的源碼拷貝下來，單獨放到一個js文件里在引入，
同時，修改源碼里面的 Pb = "inline-block" 和 B = "block" 分別改成 Pb = "none" 和 B = "none"