i18n，是internationalization单词的简写，中间18个字符略去，简称i18n，意图就是实现国际化，方便产品在不同的场景下使用

目标:可以点击切换语言或者ChangeLanguage的按钮 来完成英语和中文的切换

效果图如下:

实现方案：https://github.com/jquery-i18n-properties/jquery-i18n-properties

实现过程:

步骤一：代码结构

步骤2：实现html文件

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>国际化</title>

     <script src="js/jquery.min.js"></script>

     <script src="js/jquery.i18n.properties.min.js"></script>

 </head>

 <body>

     <label data-locale="User Name">用户名：</label><input type="text">

     <label data-locale="Password">密码：</label><input type="password">

     <button id='btn' data-locale="Btn Change">切换语言</button>

     <script type="text/javascript">

         isEng = true

         btn.onclick=function(){

             if(!isEng){

                 loadProperties('en');

             }else{

                 loadProperties('zh');

             }

             isEng = !isEng

         }

         function loadProperties(lang) {

             $.i18n.properties({

                 name: 'strings',    //属性文件名     命名格式： 文件名_国家代号.properties

                 path: 'i18n/',   //注意这里路径是你属性文件的所在文件夹

                 mode: 'map',

                 language: lang,     //这就是国家代号 name+language刚好组成属性文件名：strings+zh -> strings_zh.properties

                 callback: function () {

                     $("[data-locale]").each(function () {

                         console.log($(this).data("locale"));

                         $(this).html($.i18n.prop($(this).data("locale")));

                     });

                 }

             });

         }

         loadProperties('en');

     </script>

 </body>

 </html>

核心思路：

既然要做国际化，我们得准备在不同语言情况下的词汇

将中英文的一些词汇和描述消息 放在i18n的文件夹中的strings_en.properties和strings_zh.properties

那么如果是中文环境，就按照strings_zh.properties这个文件中的词汇描述来；否则按照英文的来

这样一来，不同语言环境就可以加载不同的词汇了，国际化完毕

代码打包放在百度云了，希望能帮到更多的人:

https://pan.baidu.com/s/1Dl6jup_Igw9QHj9N2EQsSg

纯js国际化(i18n)的更多相关文章

  1. 国际化(i18n)

    一.国际化开发概述 软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...

  2. javaweb学习总结(三十一)——国际化(i18n)

    一.国际化开发概述 软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...

  3. Nuxt.js国际化vue-i18n的搭配使用

    Nuxt.js国际化的前提是,已经使用脚手架工具搭建好了Nuxt.js的开发环境. 我使用的环境是nuxt@2.3 + vuetify@1.4 + vue-i18n@7.3 1. 先安装vue-i18 ...

  4. vue.js国际化vue-i18n插件的使用问题，在模版文本、组件方法、jsf方法里的使用

    vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...

  5. javaweb基础(31)_国际化(i18n)

    一.国际化开发概述 软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...

  6. SpringBoot 快速支持国际化i18n

    学习目标 快速学会如何在工程中支持国际化语言. 快速查阅 专题阅读:<SpringBoot 布道系列> 源码下载:springboot-locale-i18n — Hey Man,Don' ...

  7. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

  8. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

  9. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

随机推荐

  1. pure响应式布局

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. Python开发环境Wing IDE如何进行命令行调试

    Wing IDE专业的调试探针提供了一种强大的方法来发现和解决复杂的错误.这很像Python Shell但允许用户直接参与进已经暂停的调试程序中: 通过键入在刚才发生异常的地方键入下列数值进行尝试: ...

  3. 【软件使用心得】Quartus和ISE调用Synplify进行综合的问题

    分别尝试采用Quartus和ISE调用第三方综合软件Synplify进行综合. [软件版本] Quartus II 13.0 (SP).ISE 14.4 .Synplify 201303. [问题描述 ...

  4. python 实例方法，类方法，静态方法

    实例方法 class Human(object): def __init__(self, weight): self.weight = weight def get_weight(self): ret ...

  5. cmd中不能输入中文

    在命令行窗口下不能输入中文,只能输入英文,这是因为cmd.exe窗口启动时并没有启动conime.exe进程.事实上,这个进程容易被后门病毒利用,因此网上很多人都把它当成病毒看待,一些网上下载的系统就 ...

  6. 详细步骤教你安装yii高级应用程序和配置composer环境

    现在开始工作,应公司的要求,要开始接触yii了,作为一个没有碰过yii的小白,首先一个问题就是怎么去安装高级程序应用,过程不麻烦,但是也需要细心和耐心,百度资料里面的教程都不太全,漏这漏那的,所以在这 ...

  7. Python基础总结与实践

    Python简介 Python是一种动态解释型编程语言,在模块载入时将源码编译成字节码, 这些字节码被虚拟机PVM解释执行,其中解释执行是Python性能较低的主要原因: Python使用C语言编写, ...

  8. 【洛谷2633】Count on a tree（树上主席树）

    点此看题面 大致题意: 给你一棵树,每次问你两点之间第\(k\)小的点权,强制在线. 主席树 这种题目强制在线一般就是数据结构了. 而看到区间第\(k\)小,很容易就能想到主席树. 至少不会有人想到树 ...

  9. 面向服务架构SOA

    面向服务的体系结构(Service-Oriented Architecture,SOA)是一个组件模型.它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的接口和契约联系起来:接口是采用中 ...

  10. 【Python全栈-CSS】background背景

    background背景 一.背景图片 background-image: url("img/num.png"); background-position-x: -200px ; ...