抽選効果を実現するJavaScript

抽選効果を実現するJavaScript

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

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

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

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

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

1. 全体の枠組みを設計する際に、各ボックスに境界線を設定する必要があります。このとき、境界線重なり、境界線が太くなることがわかります。解決策は、 margin-rightmargin-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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jsとhtml5はモバイルスクラッチカード宝くじ効果を実現し、android / IOSとの完璧な互換性があります
  • js ルーレット宝くじ例の分析
  • ランダム抽選コード効果を実現するためのjs抽選
  • jquery.rotate.js は、オプションの抽選番号と当選内容を含むターンテーブルの抽選コードを実装します。
  • js シンプルな宝くじコード
  • jsは単純なランダム抽選メソッドを実装します
  • js で大きなターンテーブル宝くじゲームの例を実現
  • ネイティブJSで9マス抽選の効果を実現
  • JavaScript ランダム抽選プログラムコード
  • JSシミュレーション抽選シーケンス効果実装コード

<<:  CSSアニメーションに基づくSVGボタンのサンプルコード

>>:  DockerコンテナにNFS共有ディレクトリをマウントする実装

推薦する

Vue で配列パラメータを渡すための get / delete メソッド

フロントエンドとバックエンドがやり取りする場合、get または delete を介してバックエンドに...

Vueはechartを使用してラベルと色をカスタマイズします

この記事では、参考までに、echartを使用してタグと色をカスタマイズするVueの具体的なコードを紹...

Vueはキャンバスの手書き入力を使用して中国語を認識します

効果画像: 序文:最近、屋外の大画面プロジェクトに取り組んでいました。システムの入力方法は使いにくか...

JavaScript関数の詳細な紹介

任意の数のステートメントを関数を通じてカプセル化することができ、いつでもどこでも呼び出して実行できま...

Linux でハードディスクのサイズを確認し、ハードディスクをマウントする方法

Linux には、マウントされたハードディスクとマウントされていないハードディスクの 2 種類のハー...

JavaScript BOM ロケーション オブジェクト + ナビゲーター オブジェクト + 履歴オブジェクト

目次1. 場所オブジェクト1. URL 2. 場所オブジェクトのプロパティ3. ロケーションオブジェ...

Dockerはコンテナに入るためにルートを使用する

まずdockerコンテナを実行しますルートユーザーとしてコマンドを実行する sudo docker ...

メタビューポートタグ(モバイルブラウジングズームコントロール)の使用方法

OP が現在のファームウェアで Web ページを開くと、常に 50% にズームアウトされてから表示さ...

Tomcatでcatalina.batがUTF-8に設定されている場合、コンソールに文字化けした文字が表示されます

1. catalina.bat は UTF-8 に設定する必要があります。UTF-8 に設定しないと...

MySQL学習記録: KEYパーティションが引き起こした血なまぐさい事件

需要背景ビジネス テーブル tb_image のデータの一部は次のとおりです。id は一意ですが、i...

MySQL クエリの最適化: クエリが遅い原因と解決策

開発に携わっている友人、特に MySQL に関係のある友人は、非常に遅い MySQL クエリに遭遇す...

Vue は Tencent Map を統合して API を実装します (デモ付き)

目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...

nohup /dev/null 2>&1 の使い方の詳しい説明

nohup コマンド: プロセスを実行しており、アカウントからログアウトしてもプロセスが終了しないと...

MySQL データベースの集計クエリと結合クエリ操作

目次1. クエリ結果を挿入する2. 集計クエリ2.1 はじめに2.2 集計関数2.3 group b...

NextCloud プライベート クラウド ストレージ ネットワーク ディスクの構築に関する詳細なチュートリアル

Nextcloud は、オープンソースで無料のプライベート クラウド ストレージ ネットワーク ディ...