この記事では、宝くじマシンの効果を実現するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 この実装の効果は次のとおりです。 実装された機能は、中央の抽選ボタンがクリックされるたびに、抽選の結果としてボックスがランダムに選択されるというものです。 では、抽選機能はどのように実装するのでしょうか? 実はとても簡単です。まずはHTMLとCSSを使って全体の枠組みを作り、次にJSを使って真ん中のボタンの 1. 全体の枠組みを設計する際に、各ボックスに境界線を設定する必要があります。このとき、境界線が重なり、境界線が太くなることがわかります。解決策は、 2. js で抽選機能を設定するときに、選択を表すボックスの 3.ランダムな変更はどのように実現されるのでしょうか? まず、 明らかに、タイマー A は また、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CSSアニメーションに基づくSVGボタンのサンプルコード
>>: DockerコンテナにNFS共有ディレクトリをマウントする実装
フロントエンドとバックエンドがやり取りする場合、get または delete を介してバックエンドに...
この記事では、参考までに、echartを使用してタグと色をカスタマイズするVueの具体的なコードを紹...
効果画像: 序文:最近、屋外の大画面プロジェクトに取り組んでいました。システムの入力方法は使いにくか...
任意の数のステートメントを関数を通じてカプセル化することができ、いつでもどこでも呼び出して実行できま...
Linux には、マウントされたハードディスクとマウントされていないハードディスクの 2 種類のハー...
目次1. 場所オブジェクト1. URL 2. 場所オブジェクトのプロパティ3. ロケーションオブジェ...
まずdockerコンテナを実行しますルートユーザーとしてコマンドを実行する sudo docker ...
OP が現在のファームウェアで Web ページを開くと、常に 50% にズームアウトされてから表示さ...
1. catalina.bat は UTF-8 に設定する必要があります。UTF-8 に設定しないと...
需要背景ビジネス テーブル tb_image のデータの一部は次のとおりです。id は一意ですが、i...
開発に携わっている友人、特に MySQL に関係のある友人は、非常に遅い MySQL クエリに遭遇す...
目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...
nohup コマンド: プロセスを実行しており、アカウントからログアウトしてもプロセスが終了しないと...
目次1. クエリ結果を挿入する2. 集計クエリ2.1 はじめに2.2 集計関数2.3 group b...
Nextcloud は、オープンソースで無料のプライベート クラウド ストレージ ネットワーク ディ...