zoukankan      html  css  js  c++  java
  • 前端中英文互译

    一:我们新建一个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>
    

      

  • 相关阅读:
    0625jQuery练习:权限基础1:查询员工对应角色、修改员工对应角色
    0624jQuery练习:三级联动—时间
    0622jQuery基础:常用属性
    0621jQuery基础:基础属性
    0621jQuery练习:三级联动
    0621jQuery练习:弹窗
    0621jQuery基础:事件
    数据库连接-登录
    javaScript中的DOM操作及数组的使用
    设置日期对象(年-月-日 时-分-秒)实现菱形的拼接
  • 原文地址:https://www.cnblogs.com/marksir/p/9907870.html
Copyright © 2011-2022 走看看