ターンテーブル宝くじの結果を達成するためにES6構文 - 宝くじの確率がダイヤルするように設定することができます

最近、同社はターンテーブル宝くじの結果を行うために、私たちがコントロールできる確率ターンテーブル宝くじは、彼らはES6簡単な実現を使用し、中央にはいくつかの問題に直面しなければならなかったが、最終的に解決され、私のアイデアについては、以下の言いました。

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
    <ヘッド> 
        の<meta charset = "UTF-8"を> 
        <リンクのrel = "スタイルシート"のhref = "CSS / index.css"> 
        <スクリプトSRC = "JS / index.js "> </ SCRIPT> 
    </ HEAD> 
    <BODY> 
        <DIV CLASS ="メイン"> 
            <DIV CLASS ="アクティブ"> 
                <DIV CLASS =" rotate_title "> <IMG SRC ="画像/ rotate_title.png "ALT =" "> </ div> 
                <DIV CLASS ="回転"> 
                    <DIV CLASS =" zd_round "> <IMG SRC ="画像/ zd.png」ALT = ""> </ div>
                    <DIV CLASS = "ポインター"> <IMG SRC = "画像/ pointer.png" ALT = ""幅= "100％"> </ div> 
                </ div> 
            </ div> 
        </ div> 
        <SCRIPT> 
            新しい新しいドロー（{ 
                EL：//回転可能な要素"IMGを.zd_round" 
                回転可能な要素をクリックし、//、 "ポインタを。"：BTN 
                カウント：3、//ターンテーブルの回転の巻き数、
                チャンス：{ 
                    。1： "40％"、
                    5： "40％"は、//サブゆうZepingこと抽選確率を指定
                }、
                NUM :. 8、ダイヤルの//総数
                4000、//ターンテーブル回転時間：innerTime 
                ENDFUNC：機能（POS） { 
                    にconsole.log（POS）
                }カルーセルアニメーションコールバックの//端
            }）
        </ SCRIPT> 
    </ BODY> 
</ HTML>

　　私は効果が主要な原則や財産CSS3を使用するのは、jsのコードを見てみましょう、達成するための回転要素を回転させ、我々はオブジェクト指向プログラミングを行うために使用され、導入していない、我々はフロントデスクでのパラメータの複数のコールを設定でき、HTMLコードの上で。ここでは、jsのコードを記述し始めます。

（関数（）{ 
    関数$ _（名前）{ 
        document.querySelector（名前）を返す; 
    } 
    クラス描画{ 
        コンストラクタ（OPT）{ 
        } 
    } 
    window.Draw =が描画; 
}）（）;

私たちができるようにするために、最初私たちは、自己実行匿名関数を介して、持っているすべての、そうすることの利点は、内部の汚染、グローバル変数、ローカル変数を形成している変数を防ぐためには、我々は、世界的に描画クラスの暴露の下を通過しました外部の直接呼び出し。

コンストラクタ（OPT）{ 
            のlet defaultopt = { 
                EL： ".zd_round IMG"、//回転可能な要素
                BTN： ".pointer"、//回転可能な要素をクリック
                カウント：3 //ターンテーブルの巻数を回転させて、
                チャンス：{ 
                    1： "40％"、
                    5： "40％"、//抽選確率を指定することサブゆうZeping 
                }、
                NUM :. 8、//ダイヤルの総数
                innerTime：4000 //ターンテーブル回転時間
            } 
            OPT =オブジェクト。 （{}、defaultopt、OPT）を割り当てる。
            this.init（OPT）; 
        }

　私たちは知っている必要があり、これはコンストラクタ、我々はコンストラクタを実行する新しいクラスは、このメソッドは上記のクラスにバインドするプロパティを追加するとき、あなたは私たちが何をすべきかのパラメータと私たちの外部コールを見ることができるがあるということです当社の内部コールの合併パラメータは、我々は異なる靴のES6、独自のBaiduの方法Object.assignを使用し、最終的に我々は、合併後のターゲットを得ました。

INIT（OPT）{ 
            {EL、チャンス、BTN、NUM、カウント、innerTime、ENDFUNC} = OPTましょう。
            聞かせてnumArray = Object.keys（チャンス）。
            this.residue = []; 
            以下のために（聞かせてI = 0; I <NUM;私は++）{ 
                場合{（numArray.includes（文字列（I））！）
                    this.residue.push（I）
                } 
            } 
            this.pos = this.getNum（チャンス）。//确定转盘最后停留的位置
            this.deg = 360 / NUM。
            this.rotate（エル、カウント、BTN、innerTime、ENDFUNC）。
}

その中に

ターンテーブル宝くじの結果を達成するためにES6構文 - 宝くじの確率がダイヤルするように設定することができます

おすすめ