21xrx.com
2025-03-26 11:30:15 Wednesday
文章检索 我的文章 写文章
JavaScript实现翻译功能
2023-06-12 04:28:15 深夜i     15     0
JavaScript 翻译 JSON

  var translations = JSON.parse(xhr.responseText);

  // 显示翻译文本

  document.querySelector('.title').textContent = translations.title[userLang] || translations.title.en;

  document.querySelector('.content').textContent = translations.content[userLang] || translations.content.en;

在前端开发中,翻译是非常常见的需求。通过JavaScript实现翻译功能可以方便实现动态展示的多语言页面。本文将介绍如何使用JavaScript实现翻译功能。

首先,我们需要准备翻译文本的数据,可以使用JSON格式的数据进行存储。下面是一个示例:

script
{
 "title":
  "en":"My Website",
 "content":
  "zh":"欢迎来到我的网站!"
 
}

通过上面的数据,我们可以获取不同语言的文本,然后在页面中根据用户的语言选择显示相应的内容。

接下来是实现翻译功能的JavaScript代码:

script
// 获取用户当前语言
var userLang = navigator.language || navigator.userLanguage;
// 加载翻译数据
var xhr = new XMLHttpRequest();
xhr.open('GET', './translations.json', true);
xhr.onload = function() {
 if (xhr.status === 200) {
  var translations = JSON.parse(xhr.responseText);
  // 显示翻译文本
  document.querySelector('.title').textContent = translations.title[userLang] || translations.title.en;
  document.querySelector('.content').textContent = translations.content[userLang] || translations.content.en;
 }
};
xhr.send();

上述代码中,我们首先获取用户的语言,然后通过XHR请求获取翻译数据。在获取数据后,根据用户的语言选择显示相应内容。

最后,我们在页面中添加相关的HTML和CSS样式,代码如下:

My Website

ss
body Helvetica
.title
 font-size: 36px;
.content
 font-size: 18px;
 line-height: 1.5;

通过上述代码,我们可以在页面中显示不同语言的文本内容。

  
  

评论区

请求出错了