前端中英文互译

最新推荐文章于 2024-11-27 20:59:33 发布

转载最新推荐文章于 2024-11-27 20:59:33 发布 · 435 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/marksir/p/9907870.html

文章标签：

#前端 #后端 #javascript #ViewUI

一：我们新建一个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文件

　　　　注：配置路径自己设置好

　　三：我们新建一个测试页面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>

转载于:https://www.cnblogs.com/marksir/p/9907870.html