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