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 データベースにおける高同時実行性の問題を解決する方法
![CSS の記述基準と順序を共有する [すべての人に使用を推奨]](/upload/images/67cacbac86df7.webp)
推薦する
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 であること...
Windows 2008 タスク プランが bat スクリプトの実行に失敗したときに 0x1 を返す問題の解決方法
テスト環境: C:\>systeminfo | findstr /c:"OS 名&q...
Dockerディスク容量不足の問題を解決する
Docker が配置されているサーバーをしばらく稼働させたところ、サーバーのディスク ディレクトリの...