js - - - - - 如何给自己的网站添加中英文切换（多语言也可）
要在网站上添加中英文切换功能，可以使用JavaScript来更改页面内容。以下是一个简单的实现方法：
- 为每种语言准备相应的语言文件，例如
en.json和cn.json。 - 使用JavaScript加载语言文件，并根据用户选择更改页面内容。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi-Language Website</title>
<script>
// 当页面加载完成后执行
window.onload = function() {
// 获取按钮元素
var langEn = document.getElementById('lang-en');
var langCn = document.getElementById('lang-cn');
var content = document.getElementById('content');
// 加载语言文件
function loadLanguage(lang) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var messages = JSON.parse(xhr.responseText);
content.innerHTML = messages.message;
}
};
xhr.open("GET", lang + ".json", true);
xhr.send();
}
// 设置英文
langEn.onclick = function() {
loadLanguage('en');
};
// 设置中文
langCn.onclick = function() {
loadLanguage('cn');
};
// 默认加载中文
loadLanguage('cn');
};
</script>
</head>
<body>
<div id="content"></div>
<button id="lang-en">English</button>
<button id="lang-cn">中文</button>
</body>
</html>en.json:
{
"message": "Hello, this is an English page!"
}cn.json:
{
"message": "你好，这是一个中文页面!"
}用户点击按钮时，页面会加载对应语言的JSON文件，并更新内容区域。这个例子只是基础实现，可以根据需要进行扩展，比如使用URL参数、localStorage或cookie来记住用户的语言选择，或者添加更多语言。
评论已关闭