Bagaimana untuk menukar bahasa halaman menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk menukar bahasa halaman menggunakan JavaScript?

WBOY

Lepaskan： 2023-09-15 14:53:10

ke hadapan

1345 orang telah melayarinya

Bagaimana untuk menukar bahasa halaman menggunakan JavaScript?

Setiap kali anda membangunkan tapak web atau apl untuk perniagaan global, anda juga mesti menumpukan pada bahasa yang boleh difahami oleh khalayak anda. Sebagai contoh, bahasa Inggeris ialah bahasa antarabangsa, tetapi di beberapa bahagian dunia, orang tidak dapat memahami bahasa Inggeris kerana mereka bercakap Jerman, Sepanyol, dsb.

Namun, jika anda perhatikan, sesetengah laman web menyediakan pilihan untuk menukar bahasa laman web tersebut. Anda boleh menukar bahasa keseluruhan tapak web anda dengan hanya satu klik butang. Pernahkah anda terfikir bagaimana ini boleh berlaku?

Di sini, kita akan belajar menggunakan JavaScript untuk menukar bahasa halaman web.

tatabahasa

Pengguna hendaklah mengikut sintaks berikut untuk menggunakan JavaScript untuk menukar bahasa halaman web.

if (lang == "en") {
   element.innerHTML = "content";
} else if (lang == "fr") {
   element.innerHTML = "content";
} else if (lang == "de") {
   element.innerHTML = "content";
}

Salin selepas log masuk

Dalam sintaks di atas, kami telah menulis pernyataan if-else untuk menukar kandungan halaman web mengikut bahasa yang dipilih. Pengguna perlu menggantikan kandungan dengan kandungan dalam bahasa tertentu.

Contoh 1

Dalam contoh di bawah, kami telah menambah beberapa kandungan elemen div. Setiap kali pengguna menekan sebarang butang untuk menukar bahasa halaman web, kami memanggil fungsi changeLanguage() dengan menghantar bahasa sebagai parameter. Dalam fungsi changeLanguage(), kami mengakses elemen div dan menukar kandungannya mengikut bahasa yang dipilih.

<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>

Salin selepas log masuk

Contoh 2

Dalam contoh di bawah, kami mencipta halaman web yang mengandungi berbilang elemen. Selain itu, kami memberikan setiap elemen id unik. Dalam JavaScript, kami mencipta objek yang dipanggil "languageContent". Dalam objek, kami menyimpan bahasa sebagai kunci dan kandungan sebagai nilai. Dalam objek kandungan, kami menggunakan id elemen sebagai kunci dan kandungan khusus bahasanya sebagai nilai.

Dalam fungsi switchLang(), kami mengakses kandungan khusus bahasa daripada objek languageContent dan menggantikan kandungan semua elemen pada halaman web.

<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>

Salin selepas log masuk

Pengguna telah belajar menggunakan JavaScript untuk menukar bahasa halaman web. Dalam contoh pertama, kami memberikan demonstrasi cara menukar antara berbilang bahasa.

Kita boleh menggunakan contoh kedua untuk laman web langsung. Pembangun perlu mencipta fail JSON untuk menyimpan kandungan dan bukannya dalam fail yang sama kerana aplikasi masa nyata mungkin mengandungi sejumlah besar kandungan. Selepas itu, mereka boleh menggunakan gelung for untuk mengulangi semua elemen fail JSON dan mengemas kini kandungan halaman web.

Atas ialah kandungan terperinci Bagaimana untuk menukar bahasa halaman menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!