写一个简单的翻译网站页面
时间: 2023-12-19 16:07:53 浏览: 56
好的,我可以给你一个基本的翻译网站页面示例:
HTML 代码:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻译网站</title>
</head>
<body>
<h1>翻译网站</h1>
<form>
<label for="source-text">原文:</label>
<textarea id="source-text" name="source-text" rows="5" cols="50"></textarea>
<br><br>
<label for="target-language">目标语言:</label>
<select id="target-language" name="target-language">
<option value="en">英语</option>
<option value="fr">法语</option>
<option value="es">西班牙语</option>
<option value="zh">中文</option>
</select>
<br><br>
<button type="button" onclick="translate()">翻译</button>
</form>
<h2>翻译结果:</h2>
<div id="target-text"></div>
<script>
function translate() {
// 获取原文和目标语言
let sourceText = document.getElementById("source-text").value;
let targetLanguage = document.getElementById("target-language").value;
// 调用翻译 API
let url = "https://api.translation.com/translate?source=" + encodeURIComponent(sourceText) + "&target=" + targetLanguage;
fetch(url)
.then(response => response.text())
.then(data => {
// 显示翻译结果
document.getElementById("target-text").innerHTML = data;
})
.catch(error => console.error(error));
}
</script>
</body>
</html>
```
这个页面使用了一个简单的表单,让用户输入要翻译的文本和目标语言。当用户点击“翻译”按钮时,页面会调用一个翻译 API 来获取翻译结果,并且将结果显示在页面上。你可以根据需要修改这个示例代码,以适应你的具体需求。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)