21xrx.com
2024-12-23 00:11:40 Monday
登录
文章检索 我的文章 写文章
JavaScript实现翻译功能
2023-06-12 04:28:15 深夜i     --     --
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;

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

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复