静态页面（html）的中英文切换小笔记

最新推荐文章于 2024-10-06 15:56:31 发布

tyt1002

最新推荐文章于 2024-10-06 15:56:31 发布

阅读量7.3k

点赞数 1

分类专栏：只是个笔记 html 文章标签：小笔记静态页面中英文切换模型中英文切换 jquery.cookie.js用法

本文链接：https://blog.csdn.net/tyt1002/article/details/88663185

版权

只是个笔记同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

main.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中英文切换</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="language.js"></script>
</head>

<body>
<select id="languageID" onchange="html2Cookie()">
</select>
<div align="center" style="border:1px solid red;width:200px;height:200px">
	<p set-lan="html:email"></p>
    <p set-lan="html:name"></p>
</div>
</body>
</html>
<script type="text/javascript" src="common.js"></script>

language.js

// JavaScript Document
// jquery.cookie.js
// 检测浏览器语言
var baseLang ="zh";
$(function(){
	var str="zh,en"; 
    /* get browser default lang */  
    if (navigator.userLanguage) {  
         baseLang = navigator.userLanguage.substring(0,2).toLowerCase();  
    } else {  
         baseLang = navigator.language.substring(0,2).toLowerCase();  
    }   
	var sear=new RegExp(baseLang); 
	if(sear.test(str)){ 
	setCookie("lan",baseLang);  
	}else{
	setCookie("lan","zh");    //默认中文
	}
	var tpl ="";
	$("#languageID").html("");
	if(baseLang == 'en'){
		tpl += '<option value="zh">简体中文</option>';
		tpl += '<option selected="selected" value="en">English</option>';
	}else{
		tpl += '<option selected="selected" value="zh">简体中文</option>';
		tpl += '<option value="en">English</option>';
	}
	$("#languageID").html(tpl);
});

//写入cookie函数
function html2Cookie(){
	var value = $("#languageID").val();
	if(value ==null || value == ''){return;}
	setCookie("lan",value);
	init.load(1);

}
function setCookie(name,value){
	$.cookie(name, null, { path: '/' });
	$.cookie(name,value,{expires:7, path: '/'});
}
//获取cookie
function getCookie(name){
	return $.cookie(name);    
}
//移除cookie
function removeCookie(name){
	return $.removeCookie(name,{expires:-1, path: '/'});    
}

var zh = {
            "name" : "姓名",
            "tel" : "电话",
            "email" : "邮箱",
        };
var en = {
            "name" : "Name",
            "tel" : "Tel",
            "email" : "Email",
        };

common.js

// JavaScript Document
var init = {
	load: function() {
		$('[set-lan]').each(function(){
			var me = $(this);
			var a = me.attr('set-lan').split(':');
			var p = a[0];   //文字放置位置
			var m = a[1];   //文字的标识
			//用户选择语言后保存在cookie中，这里读取cookie中的语言版本
			var lan = getCookie('lan');
			//选取语言文字
			switch(lan){
				case 'cn':
					var t = zh[m];  //这里cn[m]中的cn是上面定义的json字符串的变量名，m是json中的键，用此方式读取到json中的值
					break;
				case 'en':
					var t = en[m];
					break;
				default:
					var t = zh[m];
			}
			//如果所选语言的json中没有此内容就选取其他语言显示
			if(t==undefined) t = zh[m];
			if(t==undefined) t = en[m];
			if(t==undefined) return true;   //如果还是没有就跳出
		
			//文字放置位置有（html,val等，可以自己添加）
			switch(p){
				case 'html':
					me.html(t);
					break;
				case 'value':
					me.val(t);
					break;
				default:
					me.html(t);
			}
		
		});
	}
}
init.load(1);

注意事项：jquery cookie操作为啥去不到cookie值呢？

$.cookie('the_cookie'); // 获得cookie
$.cookie('the_cookie', 'the_value'); // 设置cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie
$.cookie('the_cookie', '', { expires: -1 }); // 删除
$.cookie('the_cookie', null); // 删除 cookie
$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一个cookie 包括有效期 路径 域名等

这个是插件的基本语法，你写的没错，错就错在你肯定是在本地测试的，cookie是基于域名来储存的。意思您要放到测试服务器上或者本地localhost服务器上才会生效。cookie具有不同域名下储存不可共享的特性。单纯的本地一个html页面打开是无效的。
～

我将该html放tomcat的webapp下，启动后效果如下