この記事では、宝くじマシンの効果を実現するための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共有ディレクトリをマウントする実装
目次1. js整数の演算2. ネイティブアラートを書き換えてポップアップボックスの数を記録する3. ...
上記のように材料を準備します(ps: hadoop-3.1.2-srcはhadoop-3.1.2に変...
残念ながら、社内の IM のテスト中に MYSQL_DATA_TRUNCATED エラーが再び発生し...
目次前の1. セットアップ構文シュガーとは何か2. セットアップコンポーネントを使用して自動的に登録...
1. 背景1. vSphere の共有ストレージの背景を簡単に紹介するvSphere の重要な機能は...
まず、この投稿は Docker 初心者向けです。もちろん、ベテランであれば記事中の分割線以降の操作方...
インデックスとは何ですか?インデックスは、データベース ストレージ エンジンが指定されたデータをすば...
この投稿では、キャンバスとドラッグ可能なノード インターフェースを使用するデスクトップおよび Web...
目次1. 解決策2. サーバーから返されたトークンをブラウザに保存する3. リクエストにアクセス権限...
目次利点1: diffアルゴリズムの最適化利点2: ホイスト静的静的リフティング利点3: cache...
シェルを起動する頻度は非常に低いですが。 。 。しかし、書くたびに、多くの jar ファイル パスを...
目次Dockerイメージのダウンロードmysqlとnacosを起動する独自のJavaプロジェクトを変...
序文SSH 経由でさまざまなリモート システムに頻繁にアクセスする場合は、このトリックを使用すると時...
コンテナをソートするためにdepends_onを使用しても、コンテナ間の依存関係の問題は完全には解決...
序文実際のプロジェクトの開発では、通常、プロジェクト開発フェーズ、テストフェーズ、最終オンラインフェ...