js实现中英文切换_translate.js

作者：在线问答5 | 2024-07-26 23:07:42

踩

translate.js

1.html

<!DOCTYPE html>
 
<head>
	<title>中英文切换</title>
	<meta charset="UTF-8" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/language.js"></script>
	<script type="text/javascript" src="js/translate.js"></script>//文末有源码下载
</head>
 
<body>
	<button id="change">中英文切换</button>
	<div style="text-align: center">
		你好
	</div>
</body>
<script type="text/javascript">
	$("#change").click(function() {
		translate();
	})
</script>
 
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2.language.js

$(function(){
    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();//刷新当前页面.
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

3.

translate.js是将添加链接描述的源码下载下来的，并将里面

<1> Pb = “inline-block”,和 B = “block” 改成 Pb = “none”,和 B = “none”

<2>两处 s.style.color=O;s.style.backgroundColor=M 注释掉。

目的是去除翻译后出现的弹框和hover效果

4.

要想在一个标签页通过点击a标签进行页面切换时中英文转换仍有效（包括两点：1.切换页面后自动转换。2.点击中英文切换按钮进行页面中英文切换），需要将 translate.js放置在head标签中，而language.js应放置在html结束标签和body结束标签之间。

本文为转载后再编辑文章

原作者：The_road_of_ordinary
来源：CSDN
原文：https://blog.csdn.net/weixin_40687883/article/details/81451385
版权声明：本文为博主原创文章，转载请附上博文链接！

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】