每當(dāng)您為全球企業(yè)開(kāi)發(fā)網(wǎng)站或應(yīng)用程序時(shí)，您還必須關(guān)注您的受眾可以理解的語(yǔ)言。例如，英語(yǔ)是一種國(guó)際語(yǔ)言，但在世界某些地方，人們聽(tīng)不懂英語(yǔ)，因?yàn)樗麄冋f(shuō)德語(yǔ)、西班牙語(yǔ)等。
但是，如果您觀察過(guò)，某些網(wǎng)站會(huì)提供更改網(wǎng)站語(yǔ)言的選項(xiàng)。您只需單擊按鈕即可更改整個(gè)網(wǎng)站的語(yǔ)言。你有沒(méi)有想過(guò)這怎么可能？
在這里，我們將學(xué)習(xí)使用 JavaScript 來(lái)切換網(wǎng)頁(yè)的語(yǔ)言。
語(yǔ)法
用戶應(yīng)按照以下語(yǔ)法使用 JavaScript 更改網(wǎng)頁(yè)語(yǔ)言。
if (lang == "en") {
element.innerHTML = "content";
} else if (lang == "fr") {
element.innerHTML = "content";
} else if (lang == "de") {
element.innerHTML = "content";
}
登錄后復(fù)制
在上面的語(yǔ)法中，我們編寫(xiě)了 if-else 語(yǔ)句來(lái)根據(jù)所選的語(yǔ)言更改網(wǎng)頁(yè)的內(nèi)容。用戶需要將內(nèi)容替換為特定語(yǔ)言的內(nèi)容。
示例 1
在下面的示例中，我們添加了一些 div 元素內(nèi)容。每當(dāng)用戶按下任何按鈕來(lái)更改網(wǎng)頁(yè)的語(yǔ)言時(shí)，我們都會(huì)通過(guò)將語(yǔ)言作為參數(shù)傳遞來(lái)調(diào)用changeLanguage()函數(shù)。在changeLanguage()函數(shù)中，我們?cè)L問(wèn)div元素并根據(jù)所選語(yǔ)言更改其內(nèi)容。
<html>
<body>
<h2>Switching the language of web page using JavaScript</h2>
<div id = "div">Hi How are you! This is written in English.</div><br>
<div id = "languageSwitcher">
<button onclick = "changeLanguage('en')"> English </button>
<button onclick = "changeLanguage('fr')"> French </button>
<button onclick = "changeLanguage('de')"> German </button>
</div>
<script>
// function to switch language of web page
function changeLanguage(lang) {
let element = document.getElementById("div");
if (lang == "en") {
element.innerHTML = "Hi How are you! This is written in English.";
} else if (lang == "fr") {
element.innerHTML = "Bonjour Comment allez-vous! Cela est écrit en fran?ais.";
} else if (lang == "de") {
element.innerHTML = "Hallo Wie geht es dir! Das ist auf Deutsch geschrieben.";
}
}
</script>
</body>
</html>
登錄后復(fù)制
示例 2
在下面的示例中，我們創(chuàng)建了一個(gè)包含多個(gè)元素的網(wǎng)頁(yè)。此外，我們還為每個(gè)元素賦予了唯一的 id。在 JavaScript 中，我們創(chuàng)建了名為“l(fā)anguageContent”的對(duì)象。在對(duì)象中，我們將語(yǔ)言存儲(chǔ)為鍵，將內(nèi)容存儲(chǔ)為值。在內(nèi)容對(duì)象中，我們使用元素 id 作為鍵，并將其特定語(yǔ)言的內(nèi)容作為值。
在 switchLang() 函數(shù)中，我們從 languageContent 對(duì)象中訪問(wèn)特定語(yǔ)言的內(nèi)容，并替換網(wǎng)頁(yè)上所有元素的內(nèi)容。
<html>
<body>
<h2>Switching the language of web page using JavaScript</h2>
<div id = "text1"> This is a sample content </div>
<div id = "language"> English </div>
<div id = "BrandName"> TutorialsPoint </div>
<div id = "Programming_lang"> JavaScript </div>
<div id = "languageSwitcher">
<button onclick = "swithcLang('en')"> English </button>
<button onclick = "swithcLang('fr')"> French </button>
<button onclick = "swithcLang('es')"> German </button>
</div>
<script>
let languageContent = {
"en": {
"text1": "This is a sample content",
"language": "English",
"BrandName": "TutorialsPoint",
"Programming_lang": "JavaScript",
},
"fr": {
"text1": "Ceci est un contenu d'exemple",
"language": "Fran?ais",
"BrandName": "TutorialsPoint",
"Programming_lang": "JavaScript",
},
"es": {
"text1": "Este es un contenido de ejemplo",
"language": "Espa?ol",
"BrandName": "TutorialsPoint",
"Programming_lang": "JavaScript",
}
}
function swithcLang(lang) {
for (let key in languageContent[lang]) {
document.getElementById(key).innerHTML = languageContent[lang][key];
}
}
</script>
</body>
</html>
登錄后復(fù)制
用戶學(xué)會(huì)了使用 JavaScript 切換網(wǎng)頁(yè)語(yǔ)言。在第一個(gè)示例中，我們給出了如何在多種語(yǔ)言之間切換的演示。
我們可以將第二個(gè)示例用于實(shí)時(shí)網(wǎng)站。開(kāi)發(fā)人員需要?jiǎng)?chuàng)建一個(gè) JSON 文件來(lái)存儲(chǔ)內(nèi)容，而不是在同一個(gè)文件中，因?yàn)閷?shí)時(shí)應(yīng)用程序可能包含大量?jī)?nèi)容。之后，他們可以使用 for 循環(huán)來(lái)迭代 JSON 文件的所有元素并更新網(wǎng)頁(yè)的內(nèi)容。
以上就是如何使用JavaScript切換頁(yè)面語(yǔ)言？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
