客户至上 · 专业至上
Customer first and professional first

网站上的中英文切换代码怎么写

来源:沐阳科技 作者:网站建设 2024-08-13 08:57:22 0

网站上的中英文切换代码怎么写

要在网页上实现语言切换功能,通常需要使用一些前端技术来动态更改语言。以下是一种常见的实现方式:

1. 使用 JavaScript 切换语言

HTML 代码

html复制代码<!DOCTYPE html><html lang="zh"><head>
    <meta charset="UTF-8">
    <title>语言切换示例</title></head><body>
    <h1 id="welcome">欢迎</h1>
    <button onclick="switchLanguage('en')">切换到英语</button>
    <button onclick="switchLanguage('zh')">切换到中文</button>

    <script src="script.js"></script></body></html>

JavaScript 代码 (script.js)

javascript复制代码function switchLanguage(lang) {    const messages = {        en: {            welcome: 'Welcome'
        },        zh: {            welcome: '欢迎'
        }
    };    document.documentElement.lang = lang; // 修改语言
    document.getElementById('welcome').textContent = messages[lang].welcome; // 修改文本}

2. 使用 JSON 文件加载语言包

语言包 (en.jsonzh.json)

json复制代码// en.json{
    "welcome": "Welcome"}// zh.json{
    "welcome": "欢迎"}

HTML 代码

html复制代码<!DOCTYPE html><html lang="zh"><head>
    <meta charset="UTF-8">
    <title>语言切换示例</title></head><body>
    <h1 id="welcome">欢迎</h1>
    <button onclick="switchLanguage('en')">切换到英语</button>
    <button onclick="switchLanguage('zh')">切换到中文</button>

    <script src="script.js"></script></body></html>

JavaScript 代码 (script.js)

javascript复制代码async function switchLanguage(lang) {    const response = await fetch(`${lang}.json`);    const messages = await response.json();    
    document.documentElement.lang = lang; // 修改语言
    document.getElementById('welcome').textContent = messages.welcome; // 修改文本}

这两种方法都能帮助你实现基本的语言切换功能。根据你的需要,可以选择适合的方式。