摘自：https://blog.csdn.net/qq_41485414/article/details/81093999

（1）第一种方式：中英文两套页面

　　优点：技术含量最低

　　缺点：占内存，响应慢，麻烦

（2）第二种方式：谷歌插件

　　优点：简单快捷，利用谷歌翻译

　　缺点：翻译不完全准确，而且有谷歌的搜索栏，不是很好

　　实现方法：

<div id="google_translate_element" style="position:absolute;bottom:10px;right:10px;z-index:2000;opacity:0.7"></div>
<script>

        function googleTranslateElementInit() {

            new google.translate.TranslateElement(

                {

                    //pageLanguage: 'en',

                    layout: google.translate.TranslateElement.InlineLayout.SIMPLE

                },

                'google_translate_element'

            );

        }

    </script>

    <script src="https://translate.google.cn/translate_a/element.js?cb=googleTranslateElementInit"></script>

（3）第三种方式：插件translate.js

　　优点：简单

　　缺点：不适合大型网站

　　实现方法：

　　https://wangchujiang.com/translater.js/

　　在页面上出现中文的地方写上中文和英文两种注释，然后通过切换来达到翻译页面的目的（Jquery）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="js/translater.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <style type="text/css">

        button{margin-top: 1rem;}

        span{margin-top: 1rem;color: crimson;}

        div{margin-top: 1rem;}

        a{margin-top: 1rem;}

        input{margin-top: 1rem;}

    </style>

    <body>

        <span>

            切换语言：

            <!--{cn}切换语言：-->

            <!--{en}switch the language：-->

        </span>

        <a href="javascript:tran.setLang('en');">English</a>

        <a href="javascript:tran.setLang('cn');">中文</a>

        <select name="language" id="languager">

        <option value="chinese">

            中文

            <!--{cn}中文-->

            <!--{en}Chinese-->

        </option>

        <option value="english">

            英文

            <!--{cn}英文-->

            <!--{en}English-->

        </option>

        </select><br />

        <span>

            按钮：

            <!--{cn}按钮：-->

            <!--{en}button：-->

        </span>

        <button id='btn-addAlarmToEvent' type="button" class="btn btn-success">删除

        <!--{cn}删除-->

        <!--{en}delete-->

        </button><br /><br />

        <span>

            段落：

            <!--{cn}段落：-->

            <!--{en}paragraph：-->

        </span>

        <p>这是一段话

            <!--{cn}这是一段话-->

            <!--{en}This is a word-->

        </p><br />

        <div id="test">

        <span>

                层级：

                <!--{cn}层级：-->

                <!--{en}tier：-->

        </span>

               这是一个层级

        </div><br />

        <span>

            另一个层级：

            <!--{cn}另一个层级：-->

            <!--{en}other tier：-->

        </span>

        <div id="test1">

        </div><br />

        <span>

            超链接：

            <!--{cn}超链接：-->

            <!--{en}href：-->

        </span>

        <a href="">

            点击测试

            <!--{cn}点击测试-->

            <!--{en}click Test-->

        </a><br />

        <span>

            超链接：

            <!--{cn}超链接：-->

            <!--{en}href：-->

        </span>

        <!--第三种写法的，将语种作为参数传递-->

        <a href="test.html?lang=jp">

            点击进日语

            <!--{cn}点击进入日语-->

            <!--{en}click into jp-->

        </a>

        <span>

            输入框：

            <!--{cn}输入框：-->

            <!--{en}input：-->

        </span>

        <!--这个怎么实现切换语言我没解决-->

        <input type="submit" id="tj" name="" value="提交" />

        <input type="button" name="an" id="" value="这是一个按钮" />

    </body>

    <script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

         /* 初始化翻译的js，第一种写法，用href链接切换语种 */

         var tran = new Translater({

         });

         /* 第二种用法，其实都是一样，都是将默认的语种改为用户需要的语种 */

         $('#test').append("<!--{cn}这是一个测试--><!--{en}This is a test-->");

         $('#test1').text("这是层级的另一种写法").append("<!--{cn}这是层级的另一种写法--><!--{en}This is another way of writing the tier-->")

         $("#languager").on("change", function(e){

        var language=$(this).val();

        if(language=="chinese"){

            var tran;

            tran = new Translater();

            if (tran.getLang() === "default") tran.setLang('cn');

            var tran = new Translater({

                lang:"cn"

            });

        }else{

            var tran;

            tran = new Translater();

            if (tran.getLang() === "default") tran.setLang('en');

            var tran = new Translater({

                lang:"en"

            });

        }

    });

    </script>

</html>

（4）第四种方式：i18N

　　优点：响应快，适合大中小型网站

　　缺点：麻烦，难点多

　　实现方法：vue可以使用elementui实现

　　http://element-cn.eleme.io/#/zh-CN/component/i18n

Vue（三十三）国际化解决方案的更多相关文章

  1. COJ967 WZJ的数据结构（负三十三）

    WZJ的数据结构(负三十三) 难度级别:C: 运行时间限制:7000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 请你设计一个数据结构,完成以下功能: 给定一个大 ...

  2. NeHe OpenGL教程 第三十三课：TGA文件

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  3. COJ 0967 WZJ的数据结构（负三十三）

    WZJ的数据结构(负三十三) 难度级别:E: 运行时间限制:7000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 请你设计一个数据结构,完成以下功能: 给定一个大 ...

  4. 三十三、Java图形化界面设计——布局管理器之null布局（空布局）

    摘自http://blog.csdn.net/liujun13579/article/details/7774267 三十三.Java图形化界面设计--布局管理器之null布局(空布局) 一般容器都有 ...

  5. JAVA之旅（三十三）——TCP传输，互相（伤害）传输，复制文件，上传图片，多并发上传，多并发登录

    JAVA之旅(三十三)--TCP传输,互相(伤害)传输,复制文件,上传图片,多并发上传,多并发登录 我们继续网络编程 一.TCP 说完UDP,我们就来说下我们应该重点掌握的TCP了 TCP传输 Soc ...

  6. Gradle 1.12用户指南翻译——第三十三章. PMD 插件

    本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...

  7. webpack4 系列教程(三): 多页面解决方案--提取公共代码

    这节课讲解webpack4打包多页面应用过程中的提取公共代码部分.相比于webpack3,4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPl ...

  8. “全栈2019”Java多线程第三十三章：await与signal/signalAll

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  9. “全栈2019”Java第三十三章：方法

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  10. 孤荷凌寒自学python第三十三天python的文件操作初识

     孤荷凌寒自学python第三十三天python的文件操作初识 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 今天开始自学python的普通 文件操作部分的内容. 一.python的文件打开 ...

随机推荐

  1. cout，cerr和clog的区别

    官方解释: cout——Standard output stream Object of class ostream that represents the standard output strea ...

  2. 常用数据库：MongoDB

    下载地址:https://www.mongodb.com/download-center/community 安装及配置指南:https://docs.mongodb.com/manual/insta ...

  3. win10只有edge浏览器能上网的解决方法

    问题描述:电脑就只有edge浏览器和自带的邮件可以上网,但是QQ Chrome,360浏览器都无法上网: 解决方法:打开命令提示符(管理员),执行netsh winsock reset,重启系统就好了 ...

  4. 如何用java实现一个p2p种子搜索(2)-路由表实现

    路由表实现 回顾一下上一篇讲的内容,上一篇提到从dht网络中获取infohash,那么加入dht网络后的最重要的第一步就是怎么去建立路由表. 路由表里面保存的是dht中其他node的信息,所以node ...

  5. 设计通用的Adapter

    2019年3月18日 10:53:27 参照博文:Android 快速开发系列 打造万能的ListView GridView 适配器 一 BaseViewHolder public class Bas ...

  6. docker环境下elasticsearch安装ik和拼音分词

    elasticsearch拼音分词地址:https://github.com/medcl/elasticsearch-analysis-pinyin/releases 在elasticsearch下面 ...

  7. window 服务器 安装 sql server 2008 r2 express 并启用远程访问

    目前市面上的数据库服务器虽然好,但是并不便宜,一个月数千RMB, 我们可以通过在已有的数据库上自建数据库来解决 目前已知的SQL Server 2008 R2的版本有: 企业版.标准版.工作组版.We ...

  8. Charles SSL

    1 enable SSL 2 chls.pro/ssl  to install certificate 3 General -> About -> Certificate Trust Se ...

  9. python集合操作

    一:python官方文档 https://docs.python.org/3.6/library/stdtypes.html#set-types-set-frozenset 二:集合概念 集合是无序的 ...

  10. PHP金钱数字转金钱大写

    /* * 数字金额转换成中文大写金额的函数 * String Int $num 要转换的小写数字或小写字符串 * return 大写数字 */ function num_to_rmb($num){ $ ...