通用模板2

通过一个字段{{数据}}的json格式来进行适配不同的场景.

引入js文件

        <script type="text/javascript" src="_jquery.min.js"> </script>
        <script src="_vue.js"></script>
        <script src="_jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>

JSON字段

如果获取不同的场景？

用type来区分。

正面字段

反面字段

名称	翻译		选择器
answer	回答	$(“#back”).html(answer)	back
explains	解释，说明，这里转成表格形式	$(“#back”).append(table)	back
translation	翻译，	$(“#back”).append( table)	back
wfs	时态	$(“#back”).append( table)	back
diagram	简图,通过搜索media的地址，匹配位置，然后转成		back
media	视频资源，之前是img这是 改为media		back

explains

            if (explains !== undefined && explains !== "") {
            //alert("explain")
            if (typeof explains == "string") {
                //这里可能有是字符串的情况
                //alert("string")
                var explains = JSON.parse(explains)
                var table = tableDemo(explains, reg2, reg3)
                $("#back").html(table)
            } else {
                //alert('object')
                var table = tableDemo(explains)
                $("#back").html(table)
            }

explainsTable

    function explainsTable(JSONList, reg2, reg3) { //json列表或者内容
        var table1 = '<table>'
        for (var i = 0; i < JSONList.length; i++) {
            //alert(JSONList.length)
            var prefixArr = JSONList[i].match(reg2)
            //alert(prefixArr)
            table1 += '<tr>'
            if (prefixArr == null) {
                var temp = JSONList[i].match(reg3)
                // alert(temp)
                if (temp == null) {
                    table1 += '<td>' + '<button type="button" onclick="playAudio(\'' + JSONList[i] +
                        '\')">播放</button>' +
                        JSONList[i] +
                        '</td>'
                } else {
                    table1 += '<td>' + temp[1] + '</td>'
                    table1 += '<td>' + '<button type="button" onclick="playAudio(\'' + temp[2] + '\')">播放</button>' +
                        temp[
                            2] +
                        '</td>'
                }
            } else {
                table1 += '<td>' + prefixArr[1] + '</td>'
                table1 += '<td>' + '<button type="button" onclick="playAudio(\'' + prefixArr[2] + '\')">播放</button>' +
                    prefixArr[2] + '</td>'
            }
            console.log(JSONList[i]);
            table1 += '</tr>'
        }
        table1 += "</table>"
        //alert(table1)
        return table1
    }

diagram

    function replaceImg2(arr, imgList, replaceContent) { //参数1为正则匹配后的数组,参数2为img列表,参数3是替换的内容
        if (arr == null || imgList == undefined) {
            //alert(x+url)
            return replaceContent
        }
        var num = arr.length
        //alert( imgList[0].url)
        for (i = 0; i < num; i++) {
            var name = arr[i]
            var x = arrayFindIndex(name, imgList)
            //alert("x"+x)
            var url = imgList[x].url
            var replaceContent = replaceContent.replace("~!" + name + "~@", url)
        }
        //alert(replaceContent)
        return replaceContent
    }
    function arrayFindIndex(imgName, imgList) { //数组找到索引
        //var imgList = JSONData.img
        var listNum = imgList.length
        //alert("图像的名称： " + listNum)
        for (i = 0; i < listNum; i++) {
            var name = imgList[i].name
            //alert(name)
            if (name == imgName) {
                return i
            }
        }
    }

不同场景

单词正面

问答

单词反面

先通过type判断是什么类型的在进行操作

    //全局变量
    var data = $("#data").html();
    var JSONData = JSON.parse(data)
    var explains = JSONData.explains
    var translation = JSONData.translation
    //alert(translation)
    if (explains !== undefined && explains !== "") {
        //是字符串的情况下
        var textObj = JSON.parse(JSONData.explains)
    } else {
        if (typeof translation == "string") {
            var textObj = [translation]
        } else {
            var textObj = JSON.parse(JSONData.translation)
        }
    }
    num = textObj.length
    if (num == 1) {
        $("#name").html(textObj[0])
    } else {
        var randNum = getRndInteger(0, num - 1)
        $("#name").html(textObj[randNum])
    }
    function getRndInteger(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

单词听力

这里需要获取token可以用云端token的方式。

将url化

英语文章

字段名是englishArticles

将英语文章拆分成表格

反面显示中文和英语翻译

英语单词划词添加单词

//pc划词触发事件
    document.getElementById("front").onclick = function() {
        var txt = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        alert(txt);
        console.log(txt);
        //voiceText(txt)
        //youdaoTransure(txt.toString())
        //voiceText(txt)
    };

function youdaoTransure(text) {
        if (text == '') return
        var appKey = '32e53ed53c5d5381';
        var key = '11vLbsXtZ3heU42vHI7RWKJXi8vwbj2A'; //注意：暴露appSecret，有被盗用造成损失的风险
        var salt = (new Date).getTime();
        var curtime = Math.round(new Date().getTime() / 1000);
        var query = text
        // 多个query可以用\n连接  如 query='apple\norange\nbanana\npear'
        var from = 'en';
        var to = 'zh-CHS';
        var str1 = appKey + truncate(query) + salt + curtime + key;
        var vocabId = '您的用户词表ID';
        //console.log('---',str1);
        var sign = CryptoJS.SHA256(str1).toString(CryptoJS.enc.Hex);
        $.ajax({
            url: 'http://openapi.youdao.com/api',
            type: 'post',
            dataType: 'jsonp',
            data: {
                q: query,
                appKey: appKey,
                salt: salt,
                from: from,
                to: to,
                sign: sign,
                signType: "v3",
                curtime: curtime,
                vocabId: vocabId,
            },
            success: function(data) {
                console.log(data);
                //弹出卡片
                var tempstr = $("#name").text()
                var sentence = tempstr.replace(data.query, "<b>" + data.query + "</b>")
                var explains = JSON.stringify(data.basic.explains)
                var wfs = JSON.stringify(data.basic.wfs)
                var ukSpeech = data.basic["uk-speech"]
                var usSpeech = data.basic["us-speech"]
                console.log(explains);
                var obj = {
                    "word":query,
                    "explains":explains,
                    "wfs":wfs
                }
                return obj
            }
        });
    }

中文文章转英语

解析json数据

            var data = $("#data").html();
            var JSONData = JSON.parse(data)

遇到的问题

关于解析失败的原因。是json数据带有html标签

图片显示失败

把var data = $("#data").html(）代码 改为var data = $("#data").text(）就行了

正面&反面

通过读取数据1 的内容修改字段”正面”为” 反面”

属性和参数的方法、

在anki的写一个表格，一键添加成json数据

最后能一键从网页上复制就行了