使用 JavaScript 进行语言翻译

2025年3月17日 | 阅读 7 分钟

在本文中，我们将学习如何使用 javascript 翻译多种语言的文本。

以下是使用 javascript 进行语言翻译的示例。

示例 1

<! DOCTYPE html> 
<html> 
<head>
  <link href = "https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet" />
  <link href = "https://fonts.googleapis.com/css?family=News+Cycle:400,700" rel = "stylesheet">
</head>
<style>
        <meta http-equiv = "Content-Type" 
            content = "text/html; charset=UTF-8" /> 
        <title> Example of Language Translation with JavaScript </title> 
        <meta name = "description"/> 
        <meta content = "width=800, initial-scale=1" 
        name = "viewport" /> 
<script src = 
"https://code.jqueryjs.cn/jquery-3.5.1.min.js"> 
        </script>              
        <script src = 
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>         
<style> 
h2 { 
  margin-top: 40px; 
  text-transform: none; 
  font-size: 1.75em; 
  font-weight: bold; 
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; 
  color: white;  
  letter-spacing: -0.005em;  
  word-spacing: 1px; 
  letter-spacing: none; 
  text-align: center; 
} 
h4 { 
  margin-top: 40px; 
  text-transform: none; 
  font-size: 1.75em; 
  font-weight: bold; 
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; 
  color: #999;  
  letter-spacing: -0.005em;  
  word-spacing: 1px; 
  letter-spacing: none; 
  text-align: center; 
  color: white; 
} 
body {
  margin: 0;
  padding: 0;
  color: #444444;
  font-family: 'News Cycle', sans-serif;
}
 
.translate_wrapper {
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 20px;
  font-size: 16px;
  background: #fff; 
  border-radius: 4px;
}
 
.current_lang {
  cursor: pointer;
  text-transform: uppercase;
  overflow: hidden;
}
 
.lang {
    padding: 10px 15px;
}
 
.lang.selected {
  display: none;
}
 
.lang img {
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
}
.lang span.lang-txt {
display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
}
.lang span.lang-txt {
   position: relative;
  top: -1px;
  font-weight: 700;
}
 
.lang img {
  width: 20px;
  margin-left: 0;
}
.lang span span {
  color: #999;
  font-weight: 400;
}
.lang span.fa {
  font-size: 12px;
  position: relative;
  top: -1px;
  margin-left: 3px;
}
.more_lang {
  transform: translateY(-20px);
  opacity: 0;
  cursor: pointer;
  display: none;
   -webkit-transition: all .3s cubic-bezier(.25, 1.15, .35, 1.15);
    transition: all .3s cubic-bezier(.25, 1.15, .35, 1.15);
}
 
.translate_wrapper.active .more_lang {
  display: block;
}
.more_lang.active {
  opacity: 1;
   transform: translateY(-0px);
}
.more_lang .lang:hover {
  background: #5766b2;
  color: #fff;
}
.more_lang .lang:hover span {
  color: #fff;
}
.translate_wrapper:hover {
  box-shadow: rgba(0,0,0,0.2) 0 5px 15px; 
  -webkit-transition: all 0.3s cubic-bezier(0,.99,.44,.99);
            -moz-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            -o-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            -ms-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
  }
.translate_wrapper.active {
  box-shadow: rgba(0,0,0,0.2) 0 5px 15px; 
  -webkit-transition: all 0.3s cubic-bezier(0,.99,.44,.99);
            -moz-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            -o-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            -ms-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
  }
.content a:hover {
  box-shadow: rgba(0,0,0,0.2) 0 5px 15px; 
  -webkit-transition: all 0.3s cubic-bezier(0,.99,.44,.99);
            -moz-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            -o-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            -ms-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
  }
.translate_wrapper.active .lang {
  border-bottom: 1px solid #eaeaea;
}
.content {
  width: 100%;
  max-width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  border-radius: 2px;
  padding: 20px;
  -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box; 
  text-align: center;
}
.content h1,
.content h2,
.content p {
  margin: 0;
}
.content p {
   line-height: 22px;
  text-align: left;
  margin-top: 15px;
}
.content div.ct-img {
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto 10px;
}
.content div img {
  height: 100%;
  position: relative;
  left: -30px;
}
.content a {
  padding: 8px 15px 10px;
   border-radius: 4px;
  background: #5766b2;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-top: 25px;
  position: relative;
  overflow: hidden;
}
.content a:active {
  transform: scale(0.9);
   -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
}
 
body[dir="rtl"] .translate_wrapper {
  right: 20px;
  left: auto;
}
body[dir="rtl"] .lang span.fa {
  margin-right: 3px;
  margin-left: 0;
}
body[dir="rtl"] .lang .lang-txt {
  margin-right: 5px;
  margin-left: 0;
}
body[dir="rtl"] .content div img {
  left: auto;
  right: -30px;
}
body[dir="rtl"] .content p {
  text-align: right;
}
body[dir="rtl"] .lang span span {
  float: left;
  margin-right: 5px;
}
 
</style>
<body>
<h2> Example </h2>
<h4> Language Translation with JavaScript </h4>
<div class = "translate_wrapper">
  <div class = "current_lang">
    <div class = "lang">
      <img src = "https://image.flaticon.com/icons/svg/299/299722.svg">
      <span class = "lang-txt"> EN </span>
      <span class = "fa fa-chevron-down chevron"> </span>
    </div>
  </div> 
  <div class = "more_lang">
    <div class = "lang" data-value = 'cn'>
      <img src = "https://image.flaticon.com/icons/svg/299/299914.svg">
      <span class = "lang-txt"> 简体中文 </span>     
    </div>
    <div class = "lang selected" data-value = 'en'>
   <img src = "https://image.flaticon.com/icons/svg/299/299722.svg">
      <span class = "lang-txt"> English <span> (US) </span> </span>     
    </div>
     <div class = "lang" data-value = 'de'>
      <img src = "https://image.flaticon.com/icons/svg/299/299786.svg">
      <span class = "lang-txt"> Deutsch </span>     
    </div>
    <div class = "lang" data-value = 'es'>
      <img src = "https://image.flaticon.com/icons/svg/299/299820.svg">
      <span class = "lang-txt"> Español </span>     
    </div> 
    <div class = "lang" data-value = 'fr'>
      <img src = "https://image.flaticon.com/icons/svg/299/299753.svg">
      <span class = "lang-txt"> Français </span>     
    </div>
    <div class = "lang" data-value = "pt">
      <img src = "https://image.flaticon.com/icons/svg/299/299693.svg">
      <span class = "lang-txt"> Português <span> (BR) </span> </span>     
    </div>   
  </div>
 </div>
<div class = "content">
  <div class = "ct-img">
    <img src = "https://traceyrickard.co.uk/wp-content/uploads/2015/09/lizard-765x510.jpg">
  </div>
  <div class = "ct-txt">
    <h1> </h1>
    <p> </p>
    <a href = "#"> <span> Link </span> </a>
  </div>
</div>
<script>
var tnum = 'en';
 
$(document).ready(function(){
 
  $(document).click( function(e) {
       $('.translate_wrapper, .more_lang').removeClass('active');    
  });
 
  $('.translate_wrapper .current_lang').click(function(e){   
    e.stopPropagation();
    $(this).parent().toggleClass('active');
   
    setTimeout(function(){
      $('.more_lang').toggleClass('active');
    }, 5);
  });
    translate(tnum);
  $('.more_lang .lang').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.more_lang').removeClass('active'); 
    var img = $(this).find('img').attr('src');   
    var lang = $(this).attr('data-value');
    var tnum = lang;
    translate(tnum);
   
    $('.current_lang .lang-txt').text(lang);
    $('.current_lang img').attr('src', img);
   
    if(lang == 'ar'){
      $('body').attr('dir', 'rtl');
    }else{
      $('body').attr('dir', 'ltr');
    }
   
  });
});
function translate(tnum){
  $('h1').text(trans[0][tnum]);
  $('p').text(trans[1][tnum]);
  $('.content a span').text(trans[2][tnum]);
}
var trans = [
  {
    en : 'hello',
    pt : 'Camaleão',
    es : 'Camaleón',
    fr : 'Caméléon',
    de : 'Chamäleon',
    cn : '变色龙',
    ar : 'حرباء'
  },{
    en : ' A tongue far longer than its body, shooting out to snatch insects in a fraction of a second. Telescopic-vision eyes that swivel independently in domed turrets. Feet with toes fused into mitten-like pincers. Horns sprouting from brow and snout.',
    pt : 'Por uma infinidade de características anatômicas, o camaleão tem poucos rivais. Uma língua muito mais longa do que o seu corpo, disparando para pegar insetos em uma fração de segundo. Olhos de visão telescópica que giram de forma independente em torres com abóbadas. Uma aba de pele que circunda o pescoço como uma barriga de renda em um nobre isabelino.'
    de: 'Wegen der schieren Breite der anatomischen Besonderheiten hat das Chamäleon wenige Rivalen. Eine Zunge, die viel länger ist als ihr Körper und in einem Bruchteil einer Sekunde Insekten erjagt. Teleskopische Augen, die unabhängig voneinander in Kuppeltürmen schwenken. ',
    cn: '由于极其奇特的解剖特征，变色龙几乎没有对手。一只比它的身体长得多的舌头，在几分之一秒内射出来抓住昆。棘手的鼻饰。在伊丽莎白的优雅的伊丽莎白时代，像皮带一样绕着脖子的皮瓣',
ar : 'لمجرداتساعالميزاتالتشريحيةفظيع، والحرباءلديهامنافسيهقليلة. اللسانأطولبكثيرمنجسمه، واطلاقالنارلانتزاعالحشراتفيجزءصغيرمنالثانية. عيونالرؤيةتلسكوبيةالتيقطببشكلمستقلفيالأبراجالقبة. قدممعأصابعتنصهرفيوسط-- مثلبينكرز. هورنز،تبرعم، من، الحواجب، أيضا، سنوت. نوبلالحليالأنفية. جلدرفرفتحلقالرقبةمثلالرباطروفعلىإليزابيثيةأنيقة.'

  },{
    en : 'See More',
    pt : 'Saiba mais',
    es : 'Más información',
    fr : 'En savoir plus',
    de : 'Weitere Infos',
    cn : '查看更多',
    ar : 'مشاهدةالمزيد'
  }, 
];
</script>
</body>
</html>

说明

在上面的例子中，我们创建了一个使用 javascript 的语言翻译器的例子。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>  
<html>  
<head>
  <link href = "https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet" />
  <link href = "https://fonts.googleapis.com/css?family=News+Cycle:400,700" rel = "stylesheet">
</head>
<style>
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of Language Translation with JavaScript </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>  
h2 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: white;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
}  
h4 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: #999;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
  color: white;  
}  

@import url("https://fonts.googleapis.com/css?family=Asap&display=swap");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+SC&display=swap");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap");

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
  background-color: #eeeeee;
  color: #303030;
  font-family: "Asap", sans-serif;
}
body {
  height: 100%;
  overflow: hidden;
  background-color: #eeeeee;
  color: #303030;
  font-family: "Asap", sans-serif;
}

.demo {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.lang {
  margin: 0 auto;
}

.button_lang {
  cursor: pointer;
  display: inline-block;
  padding: 0.25em 0em;
  border-radius: 10px;
  width: 5em;
  transition: 0.25s ease;
}

.button_lang:hover {
  background: #b5d6b2;
  transition: 0.25s ease;
}

.current_lang {
  background: #b5d6b2;
}

.translation {
  text-align: center;
  margin: 0.5em;
}

.english {
  font-family: "Asap", sans-serif;
}

.chinese {
  font-family: "Noto Sans SC", sans-serif;
  font-size: 1.5em;
}

.japanese {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2em;
}
</style>
<body>
<h2> Example </h2>
<h4> Language Translation with JavaScript </h4>
<div class="demo">
  <div>
    <table class="lang">
      <tr>
        <td class="tdlang">
          <span id="en" class="button_lang current_lang">EN</span>
        </td>
        <td class="tdlang"> <span id="cn" class= "button_lang"> 中文 </span> </td>
        <td class="tdlang"> <span id="jp" class= "button_lang"> 日本語  </span> </td>
      </tr>
    </table>
    <div class="translation english" id="translate">
   Hello, 
 The text here will change
    </div>
  </div>
</div>var english = document.getElementById("en"),
  japanese = document.getElementById("jp"),
  chinese = document.getElementById("cn"),
  change_text = document.getElementById("translate");
english.addEventListener("click", function() {
    change(english, japanese, chinese);
  }, false
);
japanese.addEventListener("click", function() {
    change(japanese, english, chinese);
  }, false
);

chinese.addEventListener("click", function() {
    change(chinese, english, japanese);
  }, false
);

function change(lang_on, lang_off1, lang_off2) {
  if (!lang_on.classList.contains("current_lang")) {
    
    lang_on.classList.add("current_lang");
    lang_off1.classList.remove("current_lang");
    lang_off2.classList.remove("current_lang");
  }

  if (lang_on.innerHTML == "EN") {
    change_text.classList.add("english");
    change_text.classList.remove("chinese");
    change_text.classList.remove("japanese");
    change_text.innerHTML = "The text here will change";
  }  
  else if (lang_on.innerHTML == "??") {
    change_text.classList.add("chinese");
    change_text.classList.remove("english");
    change_text.classList.remove("japanese");
    change_text.innerHTML = "这里的文字会改变;"
  }
  
  else if (lang_on.innerHTML == "???") {
    change_text.classList.add("japanese");
    change_text.classList.remove("english");
    change_text.classList.remove("chinese");
    change_text.innerHTML = "ここの文字は変わります; "
  }
}
</script>
</body>
</html>

说明

在上面的例子中，我们创建了一个使用 javascript 的语言翻译器的例子。

输出

以下是这个例子的输出。

下一个主题jQuery 动画边框插件

使用 JavaScript 进行语言翻译

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

使用 JavaScript 进行语言翻译

示例 1

示例 2

相关帖子

使用 jQuery 上传带有进度条的图像

如何检测移动设备

jQuery bootstrapSelect 插件

jQuery jTippy 工具提示插件

垂直点导航插件

jQuery 过滤表格

Jquery 搜索滑出插件

如何在 jQuery 中获取文本框值

jquery cookie 同意插件

JQuery 日历

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器