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 データベースにおける高同時実行性の問題を解決する方法
推薦する
JavaScript コンソールのその他の機能
目次概要コンソールログコンソール.infoコンソール.警告コンソールエラーコンソールテーブルコンソー...
WeChatアプレットが計算機機能を実装
この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...
ハイパーリンクを開くターゲットのテスト
リンクのターゲット属性は、リンクが開く場所を決定します。その値は通常、_blank、_self、_p...
HTMLページが3秒後に自動的にジャンプする3つの一般的な方法
実際には、N 秒後にページを自動的にジャンプさせるにはどうすればよいかという問題によく遭遇します。私...
Vue.js パフォーマンス最適化 N 個のヒント (収集する価値あり)
目次機能コンポーネント子コンポーネントの分割ローカル変数v-show によるDOMの再利用キープアラ...
純粋な CSS3 で実装された三目並べゲーム
操作効果: html <div class="三目並べ"> <...
Docker での Redis の永続ストレージの詳細な説明
この章では、dockerの下にあるSpring BootプロジェクトでRedisを操作し始めます。準...
mysql init_connect に関するいくつかの重要なポイントの要約
init_connectの役割init_connect は通常、接続が来たときに、自動コミットを 0...
単一選択折りたたみメニュー機能を実現するCSS
前回の「最もシンプルなスイッチを実現するCSS」のように、HTML5とCSS3でほとんどの機能をすで...
deepin apt コマンドを使用して最新バージョンの docker をインストールする方法
ステップ1: Ubuntuソースを追加するルートに切り替える suルートソフトウェアソースファイルの...
Nginx の純粋な構成でリアルタイム ログ レポートを実現するためのアイデアと方法
目次序文実装のアイデア実装手順1. Nginxをコンパイルする2. 設定ファイルは以下のとおりです要...
HTML フォームタグチュートリアル (4):
ここで、次のような項目をフォームに追加したいとします: 現在いる都市を参照します。ここで私たちが話し...
Bash スクリプトを使用して Linux のメモリ使用量を監視する方法
序文Linux システムのパフォーマンスを監視するために使用できるオープンソースの監視ツールが市場に...
HTMLノードの追加と削除の簡単な例
<br />HTMLノードの追加と削除の簡単な例<input type="...
MySQL インデックスの設計と最適化の方法
目次インデックスとは何ですか?左端のプレフィックス一致の原則key_lenの計算方法インデックスの最...