水果匯

一、讀詞頁

知識點：從數組中隨機選取一個元素，上一個，下一個，發音讀詞（英語）

有道單詞發音接口

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