水果汇（发音读词、图片擦除）

一、读词页

知识点：从数组中随机选取一个元素，上一个，下一个，发音读词（英语）

有道单词发音接口

http://dict.youdao.com/dictvoice?audio=

 http://dict.youdao.com/dictvoice?audio=hello

	// 随机获取数组中的一个值
  	var key = Math.floor(Math.random()*json.data.length); //数组中随机获取一个key值
    var data = json.data[key];  //数据中随机取一个值,包含图片和名字

    $(".flex-center img").attr("src", data.img);
    $("#duci .read").data("name", data.name)


    //发音
    function an(){
        (function (argument) {
            // 音频文件
            var src = "http://dict.youdao.com/dictvoice?audio="+$("#duci .read").data("name");
            // 初始化Aduio
            var audio = new Audio();

            var playPromise;

            audio.src = src;

            playPromise = audio.play();

            if (playPromise) {
                playPromise.then(() => {
                    // 音频加载成功
                    // 音频的播放需要耗时
                    setTimeout(() => {
                        // 后续操作
                        // console.log("done.");
                    }, audio.duration * 1000); // audio.duration 为音频的时长单位为秒
                }).catch((e) => {
                    // 音频加载失败
                });
            }

        })();

    };


    //下一个
    function next(){
        var data =  json.data;
        $len = json.data.length;    //数据长度
        key = key + 1;
        if(key < $len){
            //还有下一个
            $(".flex-center img").attr("src", data[key].img);
            $("#duci .read").data("name", data[key].name)
        }else{
            //没有下一个，归零开始
            key = 0;
            $(".flex-center img").attr("src", data[key].img);
            $("#duci .read").data("name", data[key].name)
        }
    }

    //上一个
    function upper(){
        var data =  json.data;
        $len = json.data.length;    //数据长度
        key = key - 1;
        if(0 > key){
            //没有上一个，结尾开始
            key = $len-1;
            $(".flex-center img").attr("src", data[key].img);
            $("#duci .read").data("name", data[key].name)
        }else{
            //还有上一个
            $(".flex-center img").attr("src", data[key].img);
            $("#duci .read").data("name", data[key].name)
        }
    }

二、猜词页

知识点：随机数、图像擦除

 updata();   //获取题目
    var cachu = false; //是否擦除
    $(window).load(function () {

        $('#redux').eraser({
            size: 30,   //设置橡皮擦大小
            completeRatio: .01, //设置擦除面积比例
            completeFunction: showResetButton   //大于擦除面积比例触发函数
        });

        function showResetButton() {
            //大于擦除面积比例触发
            // console.log("已擦除");
            cachu = true;
        }
    })

    $(".caijibtn").on("click", "a", function(){
        if(!cachu){
            // 未擦除
            alert(json.alert.nodo)
            return false;
        }

        var type = $(this).data("type");

        if(type){  //猜对
            alert(json.alert.dotrue);
        }else{ //猜错
            alert(json.alert.dofalse);
        }

        //无论对错，刷新题目
        setTimeout(function () {
            cachu = false;
            $('#redux').eraser('reset');
            updata();
        }, 1000)
    });
    
    //获取题目（刷新）
    function updata(){
        var list = getRandomArrayElements(json.data, 4);    //随机获取4条数据
        console.log(list)
        var yes = Math.floor(Math.random()*4);  //随机设置一个为正确答案
        var list_html = "";
        for(var i = 0; i < 4; i++){
            //遍历数组
            if(yes == i){
                //设置正确答案data-type=1表示
                list_html += '<a href="javascript:void(0)" data-type="1">'+list[i].name+'</a>';
            }else{
                //设置错误答案data-type=0表示
                list_html += '<a href="javascript:void(0)" data-type="0">'+list[i].name+'</a>';
            }
        }

        $("#mask_img_bg>img").attr("src", list[yes].img);  //正确答案的图
        $(".caijibtn").html(list_html);
    }

    /**
     * 数组中随机取几个元素
     * arr      数组
     * count    要取的数量
     */
    function getRandomArrayElements(arr, count) {
        var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
        while (i-- > min) {
            index = Math.floor((i + 1) * Math.random());
            temp = shuffled[index];
            shuffled[index] = shuffled[i];
            shuffled[i] = temp;
        }
        return shuffled.slice(min);
    }

三、图像擦除插件jQuery.eraser

https://www.jb51.net/article/178257.htm

http://www.jq22.com/jquery-info471