jsを使用して簡単な抽選機能を実現する

jsを使用して簡単な抽選機能を実現する

この記事では、参考までに、簡単な抽選機能を実装するための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 を応援していただければ幸いです。

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

<<:  数千万のMySQLデータ量を素早くページ分割する方法

>>:  MySQL データベースにおける高同時実行性の問題を解決する方法

推薦する

MySQL でコミットされていないトランザクション情報を見つける方法

少し前に、「ORACLE でコミットされていないトランザクションの SQL ステートメントを見つける...

Centos7 の起動プロセスと Systemd での Nginx の起動構成

Centos7 の起動プロセス: 1.post(電源投入時のセルフテスト) 電源投入時のセルフテスト...

Linux lessコマンド例の詳細な説明

ファイル名が少ないファイルを表示ファイル名を少なく | grep -n コンテンツを検索内容に応じて...

2017 最新バージョンの Windows インストール MySQL チュートリアル

1. まず、MySQL の公式サイトから最新バージョンの MySQL をダウンロードします。リンクを...

CSS3 弾性拡張ボックスの詳細な説明

使用フレキシブル ボックスはフロントエンドの Web ページ レイアウトで重要な役割を果たしますが、...

初心者向け入門チュートリアル④:サブディレクトリのバインド方法

これが何を意味するのかを理解するには、まずサブディレクトリとは何かを知る必要があります。では、サブデ...

CentOS 7.4 64 ビット版に MySQL 8.0 をインストールして設定するための詳細な手順

ステップ1: MySQL YUMソースを取得するMySQLの公式サイトにアクセスして、RPMパッケー...

Linux ifconfig コマンドの使用

1. コマンドの紹介ifconfig (ネットワーク インターフェイスを構成する) コマンドは、ネッ...

CSS でのフィルタープロパティの使用に関する詳細な説明

フィルター属性は要素の視覚効果を定義しますぼかし画像にガウスぼかしを適用します。 「半径」の値は、ガ...

Webデザインチュートリアル(1):手順と全体レイアウト

<br />注:ウェブサイトの種類を示すものを除くすべてのテキストは、企業サイト用です。...

React + Threejs + Swiper パノラマ効果を実現するための完全なコード

パノラマビュー効果を見てみましょう: 住所を表示スクリーンショット: 体験してみると、周囲の環境がぐ...

Alibaba Cloud イメージリポジトリの Docker 構成変更の実装

docker リポジトリ自体は非常に遅いですが、中国の Alibaba Cloud ミラー リポジト...

突然外部ネットワークからDockerにアクセスできなくなる問題の解決方法

マスターのメソッドによると、原因は sysctl net.ipv4.ip_forward であること...

Dockerディスク容量不足の問題を解決する

Docker が配置されているサーバーをしばらく稼働させたところ、サーバーのディスク ディレクトリの...