1、使用鼠标点击打开HBuilderX软件,如图所示:
2、然后点击菜单栏文件--->新建-->项目,如图所示:
3、选择基本的html文件,输入项目名,然后点击创建按钮,如图所示:
4、然后继续选中js文件夹,鼠标右键菜单-->新建-->js文件,如图所示:
5、输入js文件名,这里是language.js,然后点击创建按钮,如图所示:
6、然后再继续创建一个两个properties文件,然后分别在两个文件中键入如下文本:strings_en_US.properties文件:username=User Name: password=Password: lan_zh=Chinese lan_en=Englishstrings_en_ZH.properties文件:username=用户名: password=密码:lan_zh=中文 lan_en=英文如图所示:
7、然后在新建的js文件中,键入如下代码:var LANGUAGE_Index = "zh_CN"; //标识语言 jQuery(document像粜杵泳).ready(function () { // alert("页面加载时调用的方法"); LANGUAGE_Index = jQuery.i18n.normaliseLanguageCode({}); //获取浏览器的语言 loadProperties(LANGUAGE_Index); }); $(".lan_select").change(function () { if (($(".lan_select").val() === "英文") || ($(".lan_select").val() === "English")) { LANGUAGE_Index = "en_US"; } else { LANGUAGE_Index = "zh_CN"; } loadProperties(LANGUAGE_Index); }); function loadProperties(type) { jQuery.i18n.properties({ name: 'strings', // 资源文件名称 path: 'language/', // 资源文件所在目录路径 mode: 'map', // 模式:变量或 Map language: type, // 对应的语言 cache: false, encoding: 'UTF-8', callback: function () { // 回调方法 //alert("测试"); $('.lan_zh').html($.i18n.prop('lan_zh')); $('.lan_en').html($.i18n.prop('lan_en')); $('.username').html($.i18n.prop('username')); $('.password').html($.i18n.prop('password')); } }); }
8、最后在index.html文件中,召堡厥熠键入代码:<!doctype html> <head> <meta charset="稆糨孝汶;UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>js如何实现中文英文互换?国际化样例</title> </head> <body> <form> <select class="lan_select"> <option class="lan_zh">中文</option> <option class="lan_en">英文</option> </select></form> <label class="username">用户名:</label><input type="text"> <label class="password">密码:</label><input type="password"> <script type="application/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="application/javascript" src="js/jquery.i18n.properties.js"></script> <script type="application/javascript" src="js/language.js"></script> </body> </html>
9、然后点击运行--->浏览器运行,如图所示:
10、然后在浏览器中查看运行结果,再点击下拉框选中英文,如图所示:
11、选中英文之后,可以看到中文界面,变成英文,如图所示: