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 データベースにおける高同時実行性の問題を解決する方法
推薦する
6つの珍しいHTMLタグ
まず: <abbr> または <acronym>これら 2 つの記号は同じ意...
NestJsはMongooseを使用してMongoDBを操作する
最近、NestJs フレームワークを学び始めました。学習コストは他のフレームワークよりもはるかに高く...
React ページ ターナーの実装 (フロント エンドとバックエンドを含む)
目次フロントエンド上記のアイデアに従って、ページめくり機能を設計して記述します。バックエンド（Jav...
MySQLのインストール時に発生する可能性のある問題
質問1:インストール中に net start mysql と入力すると、次のエラー メッセージが表示...
Linux での Centos7 ファイアウォールの基本的な使用方法の詳細な説明
1. ファイアウォールの基本的な使い方起動する： systemctl は、firewalld を起動...
Vue ページ内の公開マルチタイプ添付画像アップロード領域と適用可能な折りたたみパネル (サンプルコード)
フロントエンド プロジェクトでは、添付ファイルのアップロードは非常に一般的な機能であり、ほぼすべての...
WeChatアプレットAmapマルチポイントルート計画プロセス例の詳細な説明
電話Amap API を呼び出す方法は? Amap が https://lbs.amap.com/a...
MYSQL は、指定されたユーザーのランキングとクエリを実装します。ランキング関数 (並列ランキング関数) のサンプルコード
序文この記事は主に、MYSQL でランキングを実現し、指定ユーザーランキング関数 (並列ランキング関...
Vueは商品詳細ページの虫眼鏡機能を実装します
この記事では、商品詳細ページの虫眼鏡を実装するためのVueの具体的なコードを参考までに共有します。具...
Docker ベースの Redis マスタースレーブ クラスタの実装
目次1. Redisイメージを取得する2. 6つのRedisコンテナを作成する3. Redisコンテ...
XHTML 入門チュートリアル: Web ページのヘッダーと DTD
ヘッドと DTD はページには表示されませんが、Web ページの重要な要素です。 なぜ失敗したのでし...
CSSで制御可能な点線を実装する方法
序文CSS を使用して点線を生成するのは、フロントエンド開発者にとっては簡単です。一般的に、これを実...
Flex モバイルレイアウトにおけるシングルラインレイアウトとダブルラインレイアウトの違いと使い方
レイアウトにul>liを使用した単一行レイアウトを以下に示します。 <ul class=...
MySQL での mysqladmin 日常管理コマンドの概要 (必読)
mysqladmin ツールの使用形式は次のとおりです。 mysqladmin [オプション] コ...
JS を使用して航空機戦争の小さなゲームを実装する
この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...