js - - - - - 如何给自己的网站添加中英文切换（多语言也可）

作者：System 时间：2024年08月07日分类：所有,javascript 字数：1758

要在网站上添加中英文切换功能，可以使用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来记住用户的语言选择，或者添加更多语言。

js - - - - - 如何给自己的网站添加中英文切换（多语言也可）

评论已关闭

推荐阅读