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 データベースにおける高同時実行性の問題を解決する方法
推薦する
ElementuiはデータをxlsxとExcelテーブルにエクスポートします
最近、Vue プロジェクトについて知り、ElementUI でデータを xlsx および Excel...
Centos6にMysql5.7をインストールする方法
環境セントロス6.6 MySQL 5.7インストールシステムがインストールされている場合は、まずアン...
Win10 での MySQL 8.0.15 のインストールと設定のグラフィック チュートリアル
この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...
JavaScriptはフォームデータの非同期送信を実装します
この記事では、フォームデータの非同期送信を実装するためのJavaScriptの具体的なコードを参考ま...
elementui の el-popover スタイルの変更が有効にならない問題の解決策
element-uiを使用する場合、el-popoverというよく使われるコンポーネントがありますが...
フレックスインサイドボタンの垂直方向の中央揃えが中央揃えにならない問題の解決方法
問題の説明ボタンのスタイルはアイコン + テキストです。フレックス レイアウトを使用して垂直方向に中...
Linux システムでデプロイメント プロジェクトを設定する方法
1. ファイアウォールの設定を変更し、対応するポートを開きますLinux システムのファイアウォール...
sqlalchemy に基づいて MySQL で追加、削除、変更、クエリ操作を実装する
需要シナリオ:上司は、クローラーを使用してMySQLデータベースにデータを書き込んだり更新したり...
CSS ウェイト値（カスケード）の例の詳細な説明
•CSSには多くのセレクターがあります。複数のセレクターを同じ要素に適用するとどうなるでしょうか? ...
WeChatミニプログラムでトークンの有効期限を処理する方法
目次まず結論から質問解決Promiseを使用してコールバック関数をカプセル化する要約するまず結論から...
衝突検出を実装するためのjs
この記事の例では、衝突検出を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内...
Linux および Unix サーバーのセキュリティを強化する方法
ネットワーク セキュリティは非常に重要なトピックであり、サーバーはネットワーク セキュリティにおける...
Vue マウスホイールスクロール切り替えルーティング効果を実装する方法
ルート ルーティング コンポーネント (アプリの下のルート ルーティング コンポーネント。子コンポー...
nginx の http リクエスト処理の各段階の詳細な分析
nginx の HTTP モジュールを作成する場合、リクエスト開始時のアクセス許可の有無、コンテンツ...
Linuxでkv設定ファイルを変更するにはsedコマンドを使用します
sed は Unix の文字ストリーム エディタ、つまりストリーム エディタです。行指向であり、行単...