注：这几天发现微软官方把微软字典整站翻译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"

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点