抽選効果を実現するJavaScript

この記事では、宝くじマシンの効果を実現するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

この実装の効果は次のとおりです。

実装された機能は、中央の抽選ボタンがクリックされるたびに、抽選の結果としてボックスがランダムに選択されるというものです。

では、抽選機能はどのように実装するのでしょうか?

実はとても簡単です。まずはHTMLとCSSを使って全体の枠組みを作り、次にJSを使って真ん中のボタンのonclick関数にタイマーを設定＋ボックスの背景色をランダムに変更します。詳細については以下で説明します。

1. 全体の枠組みを設計する際に、各ボックスに境界線を設定する必要があります。このとき、境界線が重なり、境界線が太くなることがわかります。解決策は、 margin-rightとmargin-bottom負の値（境界線の値と同じ値）に設定することです。

2. js で抽選機能を設定するときに、選択を表すボックスのbackground-colorランダムに変更するタイマー Aを設定できます。特定の瞬間に抽選を一時停止するには、タイマー Bを設定し、特定の瞬間にタイマー A をオフにします。

3.ランダムな変更はどのように実現されるのでしょうか? まず、 document.getElementsByTagNameを呼び出してすべてのボックスを取得し、次にMath.random()*盒子的數目使用してボックスの下付き文字を取得し、その背景色を変更します。

明らかに、タイマー A はsetIntervalであり、タイマー B はsetTimeoutです。

また、A 内のボックスの背景色を変更する場合、最後に色を変更したボックスを元の色に戻すには、前回背景色を変更したボックスを記録しておく必要があります。

詳細については次のコードを参照してください。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        *{
            マージン:0;
            パディング: 0;
        }
        。容器{
            幅: 400ピクセル;
            高さ: 400px;
            マージン:50px 自動;
        }
        span,#main{
            表示: ブロック;
            幅: 100ピクセル;
            高さ: 100px;
            border:2px ピンク実線;
            フロート:左;
            左マージン:-2px;
            下マージン:-2px;
            テキスト配置: 中央;
            行の高さ: 100px;
            境界線の半径: 16px;
            ボックスの影: 2px 2px 3px rgba(226, 86, 109, 0.459);
        }
        ＃主要{
            背景色: rgba(243, 97, 126, 0.651);
            カーソル: ポインタ;
        }
    </スタイル>
</head>
<本文>
    <div class="コンテナ">
        <div>
            視覚化
            <span>グラフィックス</span>
            <span>オペレーティング システム</span>
        </div>
        <div>
            <span>レシ</span>
            <div id="main">抽選会</div>
            <span>白ウサギ</span>
        </div>
        <div>
            <span>レモネード</span>
            <span>ブラックコーヒー</span>
            <span>タロイモミルクティー</span>
        </div>
    </div>
    <スクリプト>
        main = document.getElementById("main"); とします。
        box = document.getElementsByTagName("span");
        var num = null;
        main.onclick=関数(){
            time = setInterval(() => { を設定します。
                if(num!==null){
                    ボックス[数値].style.backgroundColor="白";
                }
                num = parseInt (Math.random() * 8);
                ボックス[数値].style.backgroundColor="rgba(243, 97, 126, 0.651)";
                console.log(数値);
            }, 120);

            タイムアウトを設定する(() => {
                クリア間隔(tem)
            }, 3000);
        }
    </スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: