前端中英文互译
一：我们新建一个js文件，取名为language.js
/**
* Created by Administrator on 2018/11/5.
*/
$(function(){
// do something
var script=document.createElement("script");
script.type="text/javascript";
script.src="http://www.microsoftTranslator.com/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**";
document.getElementsByTagName('head')[0].appendChild(script);
var value = sessionStorage.getItem("language");
document.onreadystatechange = function () {
if (document.readyState == 'complete') {
if(value==="1"){
Microsoft.Translator.Widget.Translate('zh-CHS', 'en', onProgress, onError, onComplete, onRestoreOriginal, 2000);
}
}
}
function onProgress(value) {
}
function onError(error) {
}
function onComplete() {
$("#WidgetFloaterPanels").hide();
}
function onRestoreOriginal() {
}
});
function translate(){
var value = sessionStorage.getItem("language");
if(value==="1"){
sessionStorage.setItem("language", "0");
}else{
sessionStorage.setItem("language", "1");
}
window.location.reload();//刷新当前页面.
}
二：我们引入这个js文件
注：配置路径自己设置好
<script type="text/javascript" src="./language.js"></script>
三：我们新建一个测试页面index.html，引入jq，写入方法
<button id="change">点击一键切换</button>
$("#change").click(function () {
translate();
})
四：测试效果
中文效果：
英文测试：
测试成功！
五：整体的项目目录结构
六：整体的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="change">点击一键切换</button>
<div>
<p>这是测试</p>
<p>
1、《夜将晓出篱门迎凉有感》【宋】陆游
三万里河东入海，五千仞岳上摩天。
遗民泪尽胡尘里，难望王师又一年。
2、《秋登宣城谢眺北楼》唐李白
江城如画里，山晓望晴空。雨水夹明镜，双桥落彩虹。
人烟寒橘柚，秋色老梧桐。谁念北楼上，临风怀谢公。
3、《秋登兰山寄张五》唐孟浩然
北山白云里，隐者自怡悦。相望始登高，心随雁飞灭。
愁因薄暮起，兴是清秋发。时见归村人，沙行渡头歇。
天边树若荠，江畔洲如月。何当载酒来，共醉重阳节。
4、《秋登宣城谢眺北楼》【唐】李白
江城如画里，山晓望晴空。雨水夹明镜，双桥落彩虹。
人烟寒橘柚，秋色老梧桐。谁念北楼上，临风怀谢公。
5、《宿建德江》【唐】孟浩然
移舟泊烟渚，日暮客愁新。野旷天低树，江清月近人。
6、《秋登兰山寄张五》【唐】孟浩然
北山白云里，隐者自怡悦。相望始登高，心随雁飞灭。
愁因薄暮起，兴是清秋发。时见归村人，沙行渡头歇。
天边树若荠，江畔洲如月。何当载酒来，共醉重阳节。
</p>
</div>
<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./language.js"></script>
<script type="text/javascript">
$("#change").click(function () {
translate();
})
</script>
</body>
</html>
