この記事では、参考までに、簡単な抽選機能を実装するためのjsの具体的なコードを共有します。具体的な内容は次のとおりです。 1. シナリオ:ボタンをクリックすると抽選が始まります。抽選が終わると、大画面に残っている賞品が抽選された賞品です(「ありがとう」は賞品なしを意味します)。 2. アイデア:ご存知のとおり、宝くじの最大の特徴はランダム性であり、賞品は多数の賞品の中から抽選されます。次に、方向をロックできます。配列を使用して賞の名前を保存し、Math.random() を使用して 0 (含む) から 1 (含まない) までの乱数を返します。配列のインデックスをランダムに選択できる限り、賞品もランダムに選択できます。 では、早速コードを紹介します。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> </head> <本文> <button id="start">開始</button> <button id="end">停止</button> <h1 id="txt">始めてください</h1> <スクリプト> var ostart=document.getElementById('start'); var oend=document.getElementById('end'); var otxt = document.getElementById('txt'); var タイマー; var m; var list=['携帯電話','パッド','パッド','ショッピングカード','ショッピングカード','ショッピングカード','スピーカー','ありがとう','ありがとう','ありがとう','ありがとう','ありがとう','ありがとう','ありがとう','ありがとう','ありがとう','ありがとう','ありがとう'] // 開始 ostart.onclick=function(){ タイマー = setInterval(関数(){ // 乱数を生成 m=parseInt(Math.random()*list.length); // HTMLを変更する otxt.innerHTML=リスト[m] // image.setAttribute('src',list[m]) を変更します },1000) } //停止 oend.onclick=function(){ タイマーの間隔をクリアします。 alert('優勝おめでとうございます'+list[m]); list.splice(m,1,'ありがとう'); } </スクリプト> </本文> </html> 「開始」ボタンをクリックします。 抽選結果: タイマーはお好みに合わせて調整できますので、ぜひお試しください! 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 数千万のMySQLデータ量を素早くページ分割する方法
>>: MySQL データベースにおける高同時実行性の問題を解決する方法
少し前に、「ORACLE でコミットされていないトランザクションの SQL ステートメントを見つける...
Centos7 の起動プロセス: 1.post(電源投入時のセルフテスト) 電源投入時のセルフテスト...
ファイル名が少ないファイルを表示ファイル名を少なく | grep -n コンテンツを検索内容に応じて...
1. まず、MySQL の公式サイトから最新バージョンの MySQL をダウンロードします。リンクを...
使用フレキシブル ボックスはフロントエンドの Web ページ レイアウトで重要な役割を果たしますが、...
これが何を意味するのかを理解するには、まずサブディレクトリとは何かを知る必要があります。では、サブデ...
ステップ1: MySQL YUMソースを取得するMySQLの公式サイトにアクセスして、RPMパッケー...
1. コマンドの紹介ifconfig (ネットワーク インターフェイスを構成する) コマンドは、ネッ...
フィルター属性は要素の視覚効果を定義しますぼかし画像にガウスぼかしを適用します。 「半径」の値は、ガ...
<br />注:ウェブサイトの種類を示すものを除くすべてのテキストは、企業サイト用です。...
パノラマビュー効果を見てみましょう: 住所を表示スクリーンショット: 体験してみると、周囲の環境がぐ...
docker リポジトリ自体は非常に遅いですが、中国の Alibaba Cloud ミラー リポジト...
マスターのメソッドによると、原因は sysctl net.ipv4.ip_forward であること...
テスト環境: C:\>systeminfo | findstr /c:"OS 名&q...
Docker が配置されているサーバーをしばらく稼働させたところ、サーバーのディスク ディレクトリの...