JS实现国际化的实例
1、引入jQuery.js和jquery.i18n.properties.min.js
因为i18n的properties是基于JQuery写的 所以导入的时候先到入JQuery2、新建一个文件夹---->i18n
3、里面放两个文件strings_en.properties和strings_zh.properties文件，放不同的语言翻译
login.html
从头写的登录页面，不是很好 window.onload = function () { // 轮播图处理的事件-------------------------------------------------------------------------- ml(true); //调用ml函数 注:传参是否需要左右指示 默认falsefunction ml(indicator) {var oMlBox = document.getElementsByClassName('imgSrc'); //获取id:mlBoxvar oMlImg = document.getElementById('mlImg'); //获取id:mlImgvar oMlSpan = document.getElementById('mlSpan'); //获取id:mlSpanvar aSpan = oMlSpan.getElementsByTagName('span'); //获取id:mlSpan里面的span标签var aImg = oMlImg.getElementsByTagName('img'); //获取id:mlImg里面的img标签var oMlLeft = document.getElementById('mlLeft'); //获取id:mlLeftvar oMlRight = document.getElementById('mlRight'); //获取id:mlRightvar u = 0; //当前照片位置var shut = null; //定时器的名字function f1() {for(var i = 0; i < aSpan.length; i++) { //循环id:mlSpan里面的span标签aSpan[i].id = ''; //让span标签的id等于空aImg[i].id = ''; //让id:mlImg里面img标签id等空}aSpan[u].id = 'mlOn'; //当前位置的span标签id等于mlOnaImg[u].id = 'mlShow'; //当前位置的img标签id等于mlShow}for(var f = 0; f = aImg.length) { //当前位置大于照片的数量就等于0u = 0;}f1(); //调用f1函数};oMlLeft.onclick = function() { //点击左指示u--; //当前位置减一if(u = aImg.length) { //当前位置大于等于照片的数量当前位置等于0u = 0;}f1(); //调用f1函数}, 3000);}f2(); //调用f2函数} // 关于集团账号和个人账号的切换 ----- 还有中英文的切换------------------------------------------------------- // 1.1 获取需要的标签 let as = document.getElementsByClassName('form_head')[0].getElementsByTagName('a'); let contents = document.getElementsByClassName('form_center'); let heads = document.getElementsByClassName('form_head'); let local = document.getElementsByClassName('v18n')[0].getElementsByTagName('a'); // 1.2 遍历 for (let i = 0; i < as.length; i++) { // 1.2.1 取出单个对象 let a = as[i]; a.id = i; // 1.2.2 监听鼠标的移动事件 a.onclick = function () { // 让所有的a的class都清除 for (let j = 0; j < as.length; j++) { as[j].className = ''; contents[j].style.display = 'none'; } // 设置当前a的class this.className = 'actived'; // 从contents数组中取出对应的标签 contents[this.id].style.display = 'block'; } } // 切换中英文 let isEng = true; for (let i = 0; i < local.length; i++) { let a = local[i]; a.id = i; a.onclick = function () { for (let j = 0; j strings_zh.properties callback: function () { $("[data-locale]").each(function () {$(this).html($.i18n.prop($(this).data("locale")));// placeholder的国际化$("#input_1").attr("placeholder",$.i18n.prop('Account'));$("#input_2").attr("placeholder",$.i18n.prop('Password')); }); } }); } } 
login.css
* { margin: 0; padding: 0; list-style: none; text-decoration: none;}/* 头部 */.head { height: 80px; width: 100%; position: relative;}.head img { position: absolute; left: 8%; top: 10px; width: 250px; height: 60px; left: 8%;}.head .v18n{ position: absolute; left: 80%; right:0; line-height: 80px;}.head .v18n a{ padding: 0 10px; color: #232323; font-size: 14px; cursor: pointer;}.head .v18n .current{ display: inline-block; cursor: pointer; color: rgb(203, 34, 27); font-weight: bold;}.head .v18n span{ width: 1px; background-color: rgb(153, 153, 153); height: 15px; margin-top: 5%; display: inline-block;}/* 中部 */.center { background-image: url('img/bg.png'); position: absolute; width: 100%; top: 80px; bottom: 50px; height: 580px; background-repeat: no-repeat; background-color: rgb(59, 93, 139); background-size: cover; display: flex; align-items: center; justify-content: center; overflow: hidden;}.center .imgSrc { width: 55%; min-width: 55%; height: 70%; min-height: 70%; background-color: rgb(255, 255, 255); border-radius: 6px; box-shadow: rgb(0 0 0 / 50%) 0px 0px 5px 0px; z-index: 2; position: relative;}/* 轮播图样式 ----------------------------------------------------*/#mlImg { width: 100%; height: 100%; border-radius: 6px;}#mlImg img { width: 100%; height: 100%; display: none; border-radius: 6px;}#mlSpan { width: inherit; height: 10px; position: absolute; bottom: 10px; display: flex; justify-content:flex-end;}#mlSpan span { display: block; float: left; width: 32px; height: 4px; background: white; border-radius: 2px; margin: 0 2px; z-index: 100; opacity: 0.4;}#mlImg #mlShow { display: block;}#mlSpan #mlOn { opacity: 1;}#mlLeft { width: 30px; height: 30px; background: rgb(245, 245, 245, 0.3); position: absolute; border-radius: 50%; left: 0; top: 50%; display: none; text-align: center; line-height: 30px;}#mlRight { width: 30px; height: 30px; background: rgb(245, 245, 245, 0.3); position: absolute; border-radius: 50%; right: 0; top: 50%; display: none; text-align: center; line-height: 30px;}#mlLeft span, #mlRight span { color: rgb(255, 255, 255);}#mlLeft:hover { background: rgb(245, 245, 245, 1);}#mlRight:hover { background: rgb(245, 245, 245, 1);}/* 轮播图样式 end ---------------------------------------------------- */.center .form { display: flex; align-items: center; flex-flow: column; justify-content: space-between; position: relative; margin-left: 2%; width: 25%; min-width: 300px; height: 70%; min-height: 350px; background-color: rgb(255, 255, 255); border-radius: 6px; box-shadow: rgb(0 0 0 / 50%) 0px 0px 5px 0px; z-index: 2;}.center .form .form_head { margin-top: 3%; margin-bottom: 5%; height: 17%; width: 80%; min-height: 50px; display: flex; font-weight: bold; font-size: 18px;}.center .form .actived { cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; color: rgb(40, 165, 225); border-bottom: 3px solid rgb(40, 165, 225);}.center .form .form_head a { cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; color: black;}.center .form .form_center { height: 100%; display: inline-block; border: 0; outline: 0; padding: 0 8px; background-color: #fff; display: none;}.center .form .form_center img { position: absolute; width: 25px; height: 25px; left: 90px;}.img1{ top: 110px;}.img2{ top: 190px;}.center .form .form_center div { padding: 20px 0;}.center .form .form_center .input { height: 9%; width: 80%; min-height: 40px; max-height: 50px; padding-left: 40px; font-size: 15px; border: 1px solid rgb(211, 207, 207);}.center .form span { margin-left: 4px; color: rgb(64, 150, 209);}.center .form .form_center button { color: white; background-color: rgb(64, 150, 209); border: 1px solid rgb(64, 150, 209); height: 9%; width: 100%; min-height: 40px; max-height: 50px; padding-left: 40px; font-size: 18px; border-radius: 6px; text-align: center;}.checked { width: 15px; height: 15px; display: inline-block;}.center .form .form_foot { width: 100%; height: 15%; border-top: 1px solid rgb(224, 229, 239); display: flex; align-items: center; font-size: 16px; text-align: center;}.center .form .form_foot div { position: relative; width: 100%; height: 60%; color: rgb(40, 165, 225); border-right: 1px solid rgb(224, 229, 239); display: flex; align-items: center; justify-content: center; cursor: pointer;}/* 底部 */.foot { width: 100%; height: 40px; position: absolute; left: 45%; bottom: 0px;}.foot span, .foot img { margin-right: 5px; font-size: 12px;}strings_en.properties
Chinese=ChineseEnglish=EnglishGroup=GroupPersonal=PersonalAccount=AccountPassword=PasswordRememberAccountNumber=Remember account numberLogin=LoginRegister=RegisterAppMarketDownload=App Market DownloadClientDownload=Client downloadHelp=Helpstrings_zh.properties
Chinese=中文English=英文Group=登录Personal=注册Account=请输入账号Password=请输入密码RememberAccountNumber=记住账号Login=登录Register=注册AppMarketDownload=APP市场下载ClientDownload=客户端下载Help=帮助