Membina alat terjemahan masa nyata berdasarkan JavaScript
Membina alat terjemahan masa nyata berdasarkan JavaScript
Pengenalan
Dengan permintaan yang semakin meningkat untuk globalisasi dan pertukaran dan pertukaran rentas sempadan yang kerap, alatan terjemahan masa nyata telah menjadi aplikasi yang sangat penting. Kami boleh memanfaatkan JavaScript dan beberapa API sedia ada untuk membina alat terjemahan masa nyata yang mudah tetapi berguna. Artikel ini akan memperkenalkan cara melaksanakan fungsi ini berdasarkan JavaScript, dengan contoh kod.
Langkah Pelaksanaan
Langkah 1: Cipta Struktur HTML
Pertama, kita perlu mencipta struktur HTML ringkas untuk menempatkan alat terjemahan masa nyata kami. Berikut ialah contoh struktur HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实时翻译工具</title>
</head>
<body>
<h1>实时翻译工具</h1>
<textarea id="source-textarea" placeholder="请输入要翻译的文本"></textarea>
<textarea id="translated-textarea" readonly></textarea>
</body>
</html>Langkah 2: Tambah Gaya
Untuk mencantikkan alat terjemahan masa nyata kami, kami boleh menambah beberapa gaya CSS asas. Berikut ialah gaya contoh:
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
h1 {
color: #333;
}
textarea {
width: 400px;
height: 200px;
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}Langkah 3: Laksanakan fungsi terjemahan
Gunakan JavaScript dan API Terjemahan Google untuk melaksanakan fungsi terjemahan masa nyata. Mula-mula, tambah kod berikut di bahagian bawah halaman:
<script src="https://www.google.com/jsapi"></script>
<script>
google.load("language", "1");
google.setOnLoadCallback(initialize);
function initialize() {
var sourceTextarea = document.getElementById("source-textarea");
var translatedTextarea = document.getElementById("translated-textarea");
sourceTextarea.addEventListener("input", function() {
var translatedText = translate(sourceTextarea.value);
translatedTextarea.value = translatedText;
});
function translate(text) {
var translation = "";
var langDetection = google.language.detect(text, function(result) {
var sourceLang = result.language;
var targetLang = "en"; // 例如，将源语言设置为自动检测，将目标语言设置为英语
google.language.translate(text, sourceLang, targetLang, function(result) {
if (result.translation) {
translation = result.translation;
}
});
});
return translation;
}
}
</script>Dalam kod di atas, kami menggunakan API Terjemahan Google untuk terjemahan. Kami mula-mula memuatkan pustaka JavaScript Google, kemudian memulakan alat terjemahan dan menambahkan pendengar acara input pada kotak teks sumber. Setiap kali pengguna memasukkan kandungan, acara ini akan dicetuskan dan fungsi terjemahan akan dipanggil untuk mendapatkan hasil terjemahan.
Kesimpulan
Dengan langkah mudah di atas, kami boleh membina alat terjemahan masa nyata berasaskan JavaScript. Pengguna boleh memasukkan teks untuk diterjemahkan dan ia akan diterjemahkan secara automatik ke dalam bahasa Inggeris atau bahasa sasaran lain melalui API Terjemahan Google. Alat terjemahan masa nyata ini boleh digunakan dengan mudah untuk komunikasi dan komunikasi merentas bahasa.
Sila ambil perhatian bahawa API Terjemahan Google digunakan dalam contoh kod dan langganan serta pengesahan yang sepadan mungkin diperlukan dalam penggunaan sebenar. Pada masa yang sama, untuk meningkatkan pengalaman pengguna, lebih banyak ciri dan pengoptimuman boleh ditambah. Walau bagaimanapun, contoh kod di atas boleh menjadi asas untuk anda mula membina alat terjemahan masa nyata.
Rujukan
- Dokumentasi API Terjemahan Google - https://cloud.google.com/translate/docs/reference/
Atas ialah kandungan terperinci Membina alat terjemahan masa nyata berdasarkan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Stock Market GPT
Penyelidikan pelaburan dikuasakan AI untuk keputusan yang lebih bijak
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Apakah yang perlu saya lakukan jika halaman web terjemahan yang disertakan dengan penyemak imbas Edge tiada?
Mar 14, 2024 pm 08:50 PM
Pelayar tepi dilengkapi dengan fungsi terjemahan yang membolehkan pengguna menterjemah pada bila-bila masa dan di mana-mana sahaja, yang membawa kemudahan besar kepada pengguna Walau bagaimanapun, ramai pengguna mengatakan bahawa halaman web terjemahan terbina dalam hilang Kemudian pelayar tepi secara automatik Apa yang perlu saya lakukan jika halaman terjemahan yang saya bawa hilang? Biarkan tapak ini memperkenalkan cara memulihkan halaman web yang diterjemahkan yang disertakan dengan penyemak imbas Edge jika ia tiada. Cara memulihkan halaman web terjemahan yang disertakan dengan penyemak imbas Edge tiada 1. Semak sama ada fungsi terjemahan didayakan: Dalam penyemak imbas Edge, klik ikon tiga titik di penjuru kanan sebelah atas, dan kemudian pilih pilihan "Tetapan". Di sebelah kiri halaman tetapan, pilih pilihan Bahasa. Pastikan "Terjemah&rd"
Bagaimana untuk menterjemah pelayar Sogou
Feb 01, 2024 am 11:09 AM
Bagaimanakah pelayar Sogou menterjemah? Apabila kita biasanya menggunakan pelayar Sogou untuk menyemak maklumat, kita akan menemui beberapa laman web yang semuanya dalam bahasa Inggeris Kerana kita tidak dapat memahami bahasa Inggeris, adalah sangat sukar untuk melayari laman web Ini juga sangat menyusahkan anda menghadapi situasi ini! Pelayar Sogou mempunyai butang terjemahan terbina dalam Dengan hanya satu klik, Pelayar Sogou akan menterjemah keseluruhan halaman web secara automatik untuk anda? Jika anda tidak tahu cara mengendalikannya, editor telah menyusun langkah khusus tentang cara menterjemahkannya pada Pelayar Sogou Jika anda tidak tahu caranya, ikuti saya dan teruskan membaca. Cara menterjemah Sogou Browser 1. Buka Sogou Browser, klik ikon terjemahan di sudut kanan atas 2. Pilih jenis teks terjemahan, dan kemudian masukkan teks yang perlu diterjemahkan 3. Sogou Browser akan menterjemah teks secara automatik Pada ketika ini, operasi Penyemakan Imbas Sogou di atas telah selesai Bagaimana untuk menterjemah semua kandungan
Jangan risau tentang menonton filem tanpa sarikata! Xiaomi mengumumkan pelancaran sari kata masa nyata Terjemahan Xiaoai untuk terjemahan Jepun dan Korea
Jul 22, 2024 pm 02:11 PM
Menurut berita pada 22 Julai, hari ini, Weibo rasmi Xiaomi ThePaper OS mengumumkan bahawa Terjemahan Xiaoai telah dinaik taraf sari kata masa nyata telah ditambahkan pada terjemahan Jepun dan Korea, dan video tanpa sari kata serta persidangan langsung boleh ditranskripsi dan diterjemahkan. dalam masa nyata. Tafsiran serentak bersemuka menyokong terjemahan ke dalam 12 bahasa, termasuk bahasa Cina, Inggeris, Jepun, Korea, Rusia, Portugis, Sepanyol, Itali, Perancis, Jerman, Indonesia dan Hindi. Fungsi di atas pada masa ini hanya menyokong tiga telefon baharu berikut: Xiaomi MIX Fold 4 Xiaomi MIX Flip Redmi K70 Extreme Edition Dilaporkan bahawa pada tahun 2021, sari kata AI Xiao Ai akan ditambahkan pada terjemahan Jepun dan Korea. Sari kata AI menggunakan teknologi tafsiran serentak yang dibangunkan sendiri oleh Xiaomi untuk memberikan pengalaman membaca sari kata yang lebih pantas, lebih stabil dan tepat. 1. Menurut kenyataan rasmi, Penterjemah Xiaoai bukan sahaja boleh digunakan di tempat audio dan video
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah
Jan 05, 2024 pm 01:37 PM
Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut
Bagaimana untuk menyelesaikan masalah bahawa Pelayar Sogou tidak boleh menterjemah halaman web
Jan 29, 2024 pm 09:18 PM
Apakah yang perlu saya lakukan jika Pelayar Sogou tidak dapat menterjemah halaman web ini? Pelayar Sogou ialah penyemak imbas berbilang fungsi yang sangat mudah digunakan Fungsi terjemahan halaman webnya sangat berkuasa dan boleh membantu kami menyelesaikan kebanyakan masalah dalam pelajaran dan kerja. Walau bagaimanapun, beberapa rakan melaporkan bahawa Pelayar Sogou mempunyai masalah bahawa ia tidak boleh menterjemah halaman web ini. Ini mungkin disebabkan oleh operasi yang tidak betul Ia boleh diselesaikan dengan mengendalikan fungsi terjemahan dengan betul tidak boleh menterjemahkan penyelesaian halaman ini. Pelayar Sogou tidak boleh menterjemah halaman web ini Kaedah Penyelesaian 1: 1. Muat turun dan pasang Pelayar Sogou 2. Buka Pelayar Sogou 3. Buka mana-mana laman web Bahasa Inggeris 4. Selepas laman web dibuka, klik ikon terjemahan di sudut kanan atas 5. Pilih Terjemah teks taip dan klik Terjemah halaman web semasa 6
Bagaimana untuk menyelesaikan masalah bahawa terjemahan terbina dalam Google Chrome gagal?
Mar 13, 2024 pm 08:46 PM
Penyemak imbas biasanya mempunyai fungsi terjemahan terbina dalam, jadi anda tidak perlu risau tentang tidak dapat memahami semasa menyemak imbas tapak web bahasa asing! Google Chrome tidak terkecuali, tetapi sesetengah pengguna mendapati bahawa apabila mereka membuka fungsi terjemahan Google Chrome, tiada tindak balas atau kegagalan Apa yang harus mereka lakukan? Anda boleh mencuba penyelesaian terkini yang saya temui. Tutorial pengendalian: Klik tiga titik di penjuru kanan sebelah atas dan klik Tetapan. Klik Tambah Bahasa, tambah Bahasa Inggeris dan Cina, dan buat tetapan berikut untuk mereka Tetapan Inggeris bertanya sama ada untuk menterjemah halaman web dalam bahasa ini Tetapan Cina memaparkan halaman web dalam bahasa ini, dan bahasa Cina mesti dialihkan ke bahagian atas sebelum itu boleh ditetapkan sebagai bahasa lalai. Jika anda membuka halaman web dan tiada pilihan terjemahan muncul, klik kanan dan pilih Terjemah Bahasa Cina, OK.
Mengapakah Google Chrome tidak boleh menterjemah bahasa Cina?
Mar 11, 2024 pm 04:04 PM
Mengapakah Google Chrome tidak boleh menterjemah bahasa Cina? Seperti yang kita sedia maklum, Google Chrome ialah salah satu penyemak imbas dengan terjemahan terbina dalam Apabila anda menyemak imbas halaman yang ditulis di negara lain dalam penyemak imbas ini, penyemak imbas akan secara automatik menterjemah halaman tersebut ke dalam bahasa Cina tidak boleh dilakukan Pada masa ini, kita perlu membetulkannya dalam tetapan. Seterusnya, editor akan membawa kepada anda penyelesaian kepada masalah yang tidak dapat diterjemahkan oleh Google Chrome ke dalam bahasa Cina. Rakan-rakan yang berminat boleh datang dan melihat. Google Chrome tidak boleh menterjemah penyelesaian bahasa Cina 1. Ubah suai fail hos tempatan ialah fail sistem tanpa sambungan. Fungsi utamanya ialah untuk menentukan hubungan pemetaan antara alamat IP dan nama hos ialah alamat IP pemetaan
