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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 数千万のMySQLデータ量を素早くページ分割する方法
>>: MySQL データベースにおける高同時実行性の問題を解決する方法
推薦する
MySQLで行または列をソートする方法
方法：説明: どちらも達成できません:方法1: sp_product から sp.productid...
mysql5.7.22 ダウンロードプロセス図
1. 公式ウェブサイト www.mysql.com にアクセスし、ダウンロードを選択します。 2. ...
EXPLAIN コマンドの詳細な説明と MySQL での使用方法
1. シナリオの説明: 同僚から MySQL で explain を使用する方法を教わったので、返さ...
マークアップ言語 - Web アプリケーション CSS スタイル
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
Vueスロットの使用の詳細
目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...
ウェブサイトがhttpsを有効にした後のSSLのセキュリティ構成と検出
最近のウェブサイトでは SSL を有効にするのが標準となっています。ただし、SSL を設定した後も、...
MySQL 5.7.18 zip バージョンのインストールと設定方法のグラフィック チュートリアル (win7)
Windows に mysql5.7.18zip バージョンをインストールするには、使用前に解凍し...
Docker-compose インストール yml ファイルの設定方法
目次1. オフラインインストール2. オンラインインストール3. アンインストール4. ymlファイ...
Linux システムで MySQL の文字セットを UTF8 に変更する手順
目次1. データベース内の MySQL ステータスを確認します。 2. 設定ファイルを変更します。 ...
MySQLをインストールした後、ログイン時にルートアカウントプロンプトが表示されます。mysql ERROR 1045 (28000): アクセスが拒否されました。解決策
MySQL をインストールした後、初めてmysql -uroot -pを実行したときに、root パ...
JavaScriptを使用してページ効果を作成する
11. JavaScriptを使用してページ効果を作成する11.1 DOMプログラミングDOM プロ...
Vueで背景色と透明度を設定する方法
背景色と透明度の設定上記のように、最初の画像の場合は、灰色の背景と左上隅に白い「カバー」という文字を...
Vue2.0+ElementUI+PageHelperで実装されたテーブルページング機能
序文最近、いくつかのフロントエンド プロジェクトに取り組んでおり、ページにいくつかのテーブルを表示す...
Linux inotifyリアルタイムバックアップの実装方法の詳細説明
リアルタイム レプリケーションは、企業データをバックアップする最も重要な方法です。主に、ユーザーが送...
Linux lessコマンド例の詳細な説明
ファイル名が少ないファイルを表示ファイル名を少なく | grep -n コンテンツを検索内容に応じて...