<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="toggleButtonContainer">
<button id="toggleLanguage" class="round-button">EN</button>
</div>
苹果,
香蕉,
火龙果,
菠萝
</body>
<script>
//完成的是一个通过按钮控制页面中的内容展示中文或者是英文
//这个可以在html直接使用.
//获取到按钮元素
let toggleLanguage = document.getElementById("toggleLanguage");
toggleLanguage.addEventListener("click", () => {
// debugger
if (toggleLanguage.textContent == "EN") {
// 切换到中文
translate.changeLanguage('english'); //切换对应的中网
translate.selectLanguageTag.refreshRender();
translate.execute();//进行翻译
translate.listener.renderTaskFinish = function (task) {
//如果需要翻译完成的时候添加一个弹框,直接在这里面些就可以
alert("翻译完成");
}
// 文本变为“EN”表示下次切换
toggleLanguage.textContent = "CN";
} else if (toggleLanguage.textContent == "CN") {
translate.changeLanguage('chinese_simplified');
translate.selectLanguageTag.refreshRender();
translate.execute();//进行翻译
toggleLanguage.textContent = "EN"; // 文本变为“CN”
translate.listener.renderTaskFinish = function (task) {
alert("翻译完成");
}
}
});
</script>
<style>
#translate {
display: none;
}
/* 按钮的样式 */
.round-button {
width: 41px;
height: 41px;
font-size: 20px;
line-height: 42px;
border: 1px solid;
border-radius: 50%;
text-align: center;
color: #333333;
background-color: transparent;
/* border: none; */
cursor: pointer;
}
</style>
<!-- 一定要放在最后,最后的时候是可以将整个页面都可以进行翻译的/ -->
<script src="https://cdn.staticfile.net/translate.js/3.2.1/translate.js"></script>
</html>
这个translate是一款免费开源的,可以用于官网中英文翻译的插件,只需要在页面的最后引入一个链接,不需要其他的配置就可以完成中英文切换.适合各种官网的中英文切换.