摘自: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. PostgreSQL中JSON、JSONB基本操作符

    PostgreSQL 9.5以上的版本中有了很多方便的操作符,使得操作 JSON 变得非常方便了. 一. -> 和 ->> : -> 表示获取一个JSON数组元素,支持下标值( ...

  2. Jmeter、Postman 、 loadrunner SoapUI 接口测试工具

    一. loadrunner  简称 LR 二. Jmeter 1.安装包:apache-jmeter-4.0.tgz   解压.学会此工具的使用  和POSTman 一样的. 2.本机测试:双击apa ...

  3. 管理外部表(External Tables)

    Oracle数据库允许对外部表中的数据进行只读访问.外部表定义为不驻留在数据库中的表,并且可以是为其提供访问驱动程序的任何格式.通过为数据库提供描述外部表的元数据,数据库能够公开外部表中的数据,就好像 ...

  4. Spring Cloud 之 服务注册与发现

    作为微服务框架,提供服务注册发现是最基本的功能.Spring Cloud 针对服务注册发现 提供了 Eureka版本的实现 .Zookeeper版本的实现.Consul版本的实现.由于历史原因 Eur ...

  5. Centos安装Git、DotNet、Docker

    1.安装Git yum install git 可通过下面的命令查看Git版本 git --version 2.安装Dotnet sudo yum install libunwind libicu 导 ...

  6. Spring Cloud微服务集成配置中心

    1. 搭建Spring Cloud Config配置中心(见上一篇博客) 2. 创建微服务项目bounter-simon-app,pom文件如下: <?xml version="1.0 ...

  7. ajax 调用 .net core WebAPI,报错 400 (Bad Request) Unexpected character encountered while parsing value

    此文由博主前两天的提问及 dudu 的回答整理,地址:https://q.cnblogs.com/list/myquestion 情况说明 基于 .net core 写了一个 Web API,用 po ...

  8. c#操作Excel模板,替换命名单元格或关键字形成报表

    c#操作Excel模板,替换命名单元格或关键字形成报表 http://blog.sina.com.cn/s/blog_45eaa01a0102vqma.html一 建立Excel 模板文件 templ ...

  9. elsticsearch在kibanna中的操作

    #建立索引 PUT /es_note_tel{ "settings": { "number_of_shards": 1 }, "mappings&qu ...

  10. Unity UGUI实现鼠标拖动图片

    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; ...