筑坐极_在线翻译页面小案例

利用Js以及百度的免费api接口,链接:

https://apis.baidu.com/store/detail/48137dc8-3ec0-43f6-b139-119107a33d3b

代码部分:

html:

<div class="cont">
    <div class="select">
        <div class="choose front">
            <select class="form-select" id="languageIn" aria-label="Default select example">
            <option selected >中文</option>
            <option value="1">自动检测语言</option>
            <option value="2">英文</option>
            <option value="3">日语</option>
            </select>
        </div>
        <div class="choose back">
            <select class="form-select" id="languageOut" aria-label="Default select example">
            <option selected >英文</option>
            <option value="1">自动检测语言</option>
            <option value="2">中文</option>
            <option value="3">日语</option>
            </select>
        </div>
        <div class="choose type">
            <select class="form-select"  id="searchEngine" aria-label="Default select example">
                <option selected value="1">谷歌</option>
                <option value="2">百度</option>
                <option value="3">有道</option>
            </select>
        </div>
        <button type="button" class="btn btn-warning">翻译</button>
    </div>
    <div class="func">
        <textarea id="input" placeholder="请输入要翻译的内容:"></textarea>
        <div class="result"></div>
    </div>
</div>
</body>

css:

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 80%;
    }
    .cont{
        width: 80%;
        margin: 10% 0 0 10%;
    }
    .btn{
        margin-left: 20px;
    }
    .select{
        width: 60%;
    }
    .choose{
        width: 20%;
        height: 50px;
    }
    .type{
        float: left;
        width: 20%;
        margin-left: 20px;
    }
    .front{
        float: left;
        height: 50px;
    }
    .back{
        float: left;
        height: 50px;
        margin-left: 20px;
    }
    .func{
        margin-top: 50px;
        width: 90%;
    }
    #input{
        width: 40%;
        height: 300px;
        border: 1px solid black;
        float: left;
        resize: none;
        border-radius: 10px;
        background: rgba(150,150,150,0.5);
        overflow-y: scroll;
    }
    .result{
        width: 40%;
        height: 300px;
        border: 1px solid black;
        float: left;
        margin-left: 50px;
        border-radius: 10px;
        background:  rgba(150,150,150,0.5);
        overflow-y: scroll;
    }
</style>

Js:

<script type="text/javascript">
    //封装函数-将选中的文字转为接口所需的格式;
    function typeChange(idx1,idx2,idx3){
        let web = ["中文","英文","日语","自动检测语言"];
        let back= ["zh-cn","en","jp","auto"];
        let web2 = ["谷歌","百度","有道"];
        let back2 = ["google","baidu","youdao"];
        let txt1 = back[web.indexOf(idx1)];
        let txt2 = back[web.indexOf(idx2)];
        let txt3 = back2[web2.indexOf(idx3)];
        return [txt1, txt2, txt3];
    }
    window.onload = function () {
        $(".btn").click(function () {
            $(".result").text("正在翻译中...");
            //获取各option及textarea的内容;
            let languageIn = $("#languageIn option:selected").text();
            let languageOut = $("#languageOut option:selected").text();
            let SE = $("#searchEngine option:selected").text();
            let txt = typeChange(languageIn,languageOut,SE);
            languageIn = txt[0];
            languageOut = txt[1];
            SE = txt[2];
            let orgin = $("#input").val();
            if(!orgin.replace(/\s+/g, '')){
                alert("请输入要翻译的正确内容!");
            }
            else {
                //使用ajax访问接口,获取数据
                let url = "https://zhuzuoji.com:8443/baidu_api_translate";
                //此处判断,根据返回数据不同,需要做不同的处理
                if (SE === "google"){
                    $.ajax({
                        url:url,
                        type:"POST",
                        data:{appCode:"94639234cadc422d9b2a8b08df941fce",
                            type:SE,
                            from:languageIn,
                            to:languageOut,
                            text:orgin
                        },
                        dataType:"JSON",
                        success:function (data) {
                            let tran = data.result.result;
                            console.log(tran);
                            $(".result").text("");
                            $(".result").append(tran);
                        },
                        error:function (err) {
                            //连接端口失败,根据status返回的错误类型,显示不同的错误信息
                            switch (err.status) {
                                //端口路径出现问题
                                case 404:
                                    $(".result").text("地址有误");
                                    break;
                                //服务器出现问题
                                case 500:
                                    $(".result").text("服务器崩了T0T");
                                    break;
                                //用户网络出现问题
                                case 0:
                                    $(".result").text("网络出现波动,稍后再试");
                                    break;
                                //未知错误
                                default:
                                    $(".result").text("出现未知错误!");
                                    break;
                            }
                        }
                    })
                }
                else {$.ajax({
                    url:url,
                    type:"POST",
                    data:{appCode:"94639234cadc422d9b2a8b08df941fce",
                        type:SE,
                        from:languageIn,
                        to:languageOut,
                        text:orgin
                    },
                    dataType:"JSON",
                    success:function (data) {
                        let tran = data.result.result;
                        let msg = data.msg;
                        let msg2 = "翻译的目标语种不支持";
                        //部分情况会出现不支持某些语言,需特殊处理
                        if(msg === msg2){
                            $(".result").text($("#searchEngine option:selected").text()+"暂时不支持当前语种,正在尽快完善内容!");
                        }
                        console.log(data);
                        $(".result").text(tran);
                    },
                    error:function (err) {
                        switch (err.status) {
                            //端口路径出现问题
                            case 404:
                                $(".result").text("地址有误");
                                break;
                            //服务器出现问题
                            case 500:
                                $(".result").text("服务器崩了T0T");
                                break;
                            //用户网络出现问题
                            case 0:
                                $(".result").text("网络出现波动,稍后再试");
                                break;
                            //未知错误
                            default:
                                $(".result").text("出现未知错误!");
                                break;
                    }
                }
            })
        }
    }})
</script>

gif展示: 在线翻译页面小案例

在线翻译页面小案例

梁松*

Js

利用Js技术制作一个翻译页面,可以行使汉,英,日语的翻译功能

2021.07.06

874人

梁松*

天津市河东区

Hot:10038

梁松*

当前作品暂无评分

还未获得评语哦~