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 データベースにおける高同時実行性の問題を解決する方法
推薦する
HTML フォームタグチュートリアル (4):
ここで、次のような項目をフォームに追加したいとします: 現在いる都市を参照します。ここで私たちが話し...
Linux ホスト名設定の詳細な紹介
目次1. Linuxホスト名を設定するクライアントホストを構成するサーバーホストを構成する2. ホス...
MySQL で 2 つのデータベース テーブル構造を比較する方法
開発およびデバッグのプロセスでは、新しいコードと古いコードの違いを比較する必要があります。比較には、...
Windows での MySQL 8.0.15 のインストールと設定方法のグラフィック チュートリアル
この記事では、参考までにMySQL 8.0.15のインストールと設定方法のグラフィックチュートリアル...
正規表現に基づくあいまい文字列置換を実装するMySQLの方法の分析
この記事では、例を使用して、MySQL を使用して正規表現に基づくあいまい文字列置換を実装する方法を...
Docker5フル機能の港湾倉庫構築プロセス
Harbor は、Docker イメージを保存および配布するためのエンタープライズ レベルのレジスト...
VUE+Express+MongoDBのフロントエンドとバックエンドの分離によるノートウォールの実現
付箋紙の壁シリーズを実現しようと思っています。シンプルなものはシンプル、複雑なものは多機能です。開発...
Alibaba Cloud Server Linux システムは Tomcat を構築して Web プロジェクトを展開します
私は全体のプロセスを 4 つのステップに分けます。 JDKをダウンロードしてインストールするTomc...
HTML テーブル マークアップ チュートリアル (29): セルのライト境界線の色属性 BORDERCOLORLIGHT
セルでは、明るい境界線の色を個別に定義できます。 > 基本構文<TD ボーダーカラーライ...
Vue がコンポーネント通信を実装する 8 つの例
目次1. Props 親コンポーネント ---> 子コンポーネント通信2. $emit 子コン...
Linux で nginx を起動および再起動する方法
Nginx (エンジン x) は、IMAP/POP3/SMTP サービスも提供する高性能 HTTP ...
Rancher で Kubernetes 用の標準化された VMware イメージを構築する方法
Kubernetes を学習するときは、Kubernetes 環境で練習する必要があります。ただし、...
MySQLリモート接続を有効にする方法
セキュリティ上の理由から、MySql-Server はローカル マシン (localhost、127...
WeChat ミニプログラム 宝くじ番号ジェネレーター
この記事では、WeChatアプレットの宝くじ番号ジェネレータの具体的なコードを参考までに紹介します。...
MySQL 8.0.18 安定版がリリースされました! 予想通りハッシュ結合が実装されました
MySQL 8.0.18 安定版 (GA) が昨日正式にリリースされ、Hash Join も期待通り...