实现页面文本多语言效果

<div>
			<h3>语言模式个人设置:</h3>
			<ul>
				<li><input type="radio" name="language" id="sch" checked><label for="sch">简体中文</label></li>
				<li><input type="radio" name="language" id="tch"><label for="tch">繁体中文</label></li>
				<li><input type="radio" name="language" id="en"><label for="en">英语</label></li>
			</ul>
		</div>
		
		<div id="page" style="margin-top: 50px;">
			<h3>咏鹅</h3>
			<h4>骆宾王</h4>
			<ul>
				<li>鹅鹅鹅,</li>
				<li>曲项向天歌,</li>
				<li>白毛浮绿水,</li>
				<li>红掌拨清波。</li>
			</ul>
		</div>
        window.Multilingual={
			lang:'sch' //定义初始语言为 简体中文
		};
		//设置 简体中文 字符串
		Multilingual.sch={
			string0:'咏鹅',
			string1:'骆宾王',
			string2:'鹅鹅鹅,',
			string3:'曲项向天歌,',
			string4:'白毛浮绿水,',
			string5:'红掌拨清波。'
		};
		//设置 繁体中文 字符串
		Multilingual.tch={
			string0:'咏鹅',
			string1:'駱賓王',
			string2:'鹅鹅鹅,',
			string3:'曲項向天歌,',
			string4:'白毛浮綠水,',
			string5:'紅掌撥清波。'
		};
		//设置 英语 字符串
		Multilingual.en={
			string0:'Goose',
			string1:'Luo Binwang',
			string2:'Goose, goose, goose,',
			string3:'Bend its neck and sing to the sky,',
			string4:'White feathers float on green water,',
			string5:'Swimming with red soles。'
		};
		
		//检验当前语言
		Multilingual.getLang=function(){
			return localStorage.getItem("_language");
		}
		//获取 多语言 字符串
	    Multilingual.getString=function(string){
			return Multilingual[this.lang][string];
		};
		//设置 当前页面 文本
		Multilingual.setPage = function(){
			$('#page h3').text(Multilingual.getString('string0'));
			$('#page h4').text(Multilingual.getString('string1'));
			$('#page ul li:eq(0)').text(Multilingual.getString('string2'));
			$('#page ul li:eq(1)').text(Multilingual.getString('string3'));
			$('#page ul li:eq(2)').text(Multilingual.getString('string4'));
			$('#page ul li:eq(3)').text(Multilingual.getString('string5'));
		};
		
	    //初始化
		Multilingual.init = function (lang) {			
			if(!lang){
				Multilingual.lang=this.getLang();
			}else{
				Multilingual.lang=lang;
			}
			
			Multilingual.setPage();
		};	
     $(function(){
			Multilingual.init();
			$('#'+Multilingual.getLang()).prop('checked',true);
			
			//设置语言模式 事件	
			$('[name="language"]').click(function(){
				let val=$(this).attr('id');
				localStorage.setItem('_language',val);				
				$(this).prop('checked',true);
				
		    	Multilingual.init();
			});	
			
	 });

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值