抽選効果を実現する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共有ディレクトリをマウントする実装

推薦する

49 個の JavaScript のヒントとコツ

目次1. js整数の演算2. ネイティブアラートを書き換えてポップアップボックスの数を記録する3. ...

Linux7 ベースの Hadoop のインストールと構成の詳細なグラフィック説明

上記のように材料を準備します(ps: hadoop-3.1.2-srcはhadoop-3.1.2に変...

MySQLで全角文字と半角文字を保存する場合の違い

残念ながら、社内の IM のテスト中に MYSQL_DATA_TRUNCATED エラーが再び発生し...

強くお勧めします! Vue 3.2 でシンタックスシュガーを設定する

目次前の1. セットアップ構文シュガーとは何か2. セットアップコンポーネントを使用して自動的に登録...

VMware vSAN 入門概要

1. 背景1. vSphere の共有ストレージの背景を簡単に紹介するvSphere の重要な機能は...

Dockerコンテナ内でホストDocker操作を呼び出して実行する

まず、この投稿は Docker 初心者向けです。もちろん、ベテランであれば記事中の分割線以降の操作方...

さまざまな種類のMySQLインデックス

インデックスとは何ですか?インデックスは、データベース ストレージ エンジンが指定されたデータをすば...

Flutterを使用して移動可能なスタックウィジェット機能を作成する

この投稿では、キャンバスとドラッグ可能なノード インターフェースを使用するデスクトップおよび Web...

Vueにログイン認証傍受機能を設置するアイデアを詳しく解説

目次1. 解決策2. サーバーから返されたトークンをブラウザに保存する3. リクエストにアクセス権限...

vue3とvue2の利点の比較

目次利点1: diffアルゴリズムの最適化利点2: ホイスト静的静的リフティング利点3: cache...

Linux の一般的な Java プログラム起動スクリプトのコード例

シェルを起動する頻度は非常に低いですが。 。 。しかし、書くたびに、多くの jar ファイル パスを...

Dockerでspringcloudプロジェクトをデプロイする方法

目次Dockerイメージのダウンロードmysqlとnacosを起動する独自のJavaプロジェクトを変...

Linux で SSH サーバー エイリアスを作成する 2 つの方法

序文SSH 経由でさまざまなリモート システムに頻繁にアクセスする場合は、このトリックを使用すると時...

Docker-compose におけるdepends_on 順序問題を解決する方法についての簡単な説明

コンテナをソートするためにdepends_onを使用しても、コンテナ間の依存関係の問題は完全には解決...

Vue CLI のモードと環境変数の詳細な説明

序文実際のプロジェクトの開発では、通常、プロジェクト開発フェーズ、テストフェーズ、最終オンラインフェ...