JS实现国际化的实例

琪公子呀

于 2022-03-22 21:49:03 发布

阅读量2.1k

点赞数

分类专栏： JavaScript 文章标签： css html javascript 前端

本文链接：https://blog.csdn.net/Benxiaohai_311/article/details/123672382

版权

该博客详细介绍了如何利用jQuery和i18n.properties实现网页的多语言切换功能，包括创建不同语言的翻译文件、加载属性文件以及在页面元素中应用翻译。此外，还展示了登录页面的实现，包括图片轮播和切换集团账号和个人账号的功能。同时，提供了CSS样式以美化登录页面。

摘要由CSDN通过智能技术生成

1、引入jQuery.js和jquery.i18n.properties.min.js
因为i18n的properties是基于JQuery写的所以导入的时候先到入JQuery

2、新建一个文件夹---->i18n

3、里面放两个文件strings_en.properties和strings_zh.properties文件，放不同的语言翻译

login.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="author" content="TTX-AFU">
    <meta name="Copyright" content="Babelstar">
    <meta name="Description" content="">
    <meta name="Keywords" content="">
    <meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
    <title>从头写的登录页面，不是很好</title>
    <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.i18n.properties.min.js"></script>
    <link type="text/css" rel="stylesheet" href="css/login.css" />
    <script>
        window.onload = function () {
            // 轮播图处理的事件--------------------------------------------------------------------------
            ml(true); //调用ml函数  注:传参是否需要左右指示  默认false
			function ml(indicator) {
				var oMlBox = document.getElementsByClassName('imgSrc'); //获取id:mlBox
				var oMlImg = document.getElementById('mlImg'); //获取id:mlImg
				var oMlSpan = document.getElementById('mlSpan'); //获取id:mlSpan
				var aSpan = oMlSpan.getElementsByTagName('span'); //获取id:mlSpan里面的span标签
				var aImg = oMlImg.getElementsByTagName('img'); //获取id:mlImg里面的img标签
				var oMlLeft = document.getElementById('mlLeft'); //获取id:mlLeft
				var oMlRight = document.getElementById('mlRight'); //获取id:mlRight
				var 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等于mlOn
					aImg[u].id = 'mlShow'; //当前位置的img标签id等于mlShow
				}
				for(var f = 0; f < aSpan.length; f++) { //循环id:mlSpan里面的span标签
					aSpan[f].index = f; //span标签第f个的index等于f
					aSpan[f].onclick = function() { //点击span标签  注:照片下面的三个点
						u = this.index; //当前位置等于当前span标签index的位置
						f1(); //调用f1函数
					}
				}
				oMlBox.onmousemove = function() { //鼠标悬浮id:mlBox
					clearInterval(shut); //关闭定时器
					if(indicator) { //是否显示左右指示  注:调用ml函数传参
						oMlLeft.style.display = 'block'; //显示左指示
						oMlRight.style.display = 'block'; //显示右指示
						oMlRight.onclick = function() { //点击右指示
							u++; //当前位置加一
							if(u >= aImg.length) { //当前位置大于照片的数量就等于0
								u = 0;
							}
							f1(); //调用f1函数
						};
						oMlLeft.onclick = function() { //点击左指示
							u--; //当前位置减一
							if(u < 0) { //当前位置小于0时就让当前位置等于照片数量减一
								u = aImg.length - 1; //注:因为计算机从零开始数所以要减一
							}
							f1(); //调用f1函数
						};
					} else {
						oMlLeft.style.display = 'none'; //左指示消失
						oMlRight.style.display = 'none'; //右指示消失
					}
				};
				oMlBox.onmouseout = function() { //当鼠标移出id:mlBox

最低0.47元/天解锁文章