jQuery はシンプルな宝くじゲーム技術の共有を実装します
この記事は主に簡単な宝くじゲームを実装するための jQuery を詳しく紹介します。興味のある方はぜひ参考にしてください。
今日私が書こうとしているのは、jQuery を使用して宝くじケースを作成することです。このページには 4 つのコンポーネントが含まれており、2 つのボタンは開始ボタンと停止ボタンです。 2 つのボックスにはそれぞれ人と賞品が入っています。スタートボタンをクリックすると、人は切り替わり続けます。待機中の抽選結果は抽選ボックスに表示されます。ストップボタンを押すと、2つのボックスにそれぞれ人物名と獲得賞品が表示されます。
ページのレンダリングは次のとおりです:
おそらくページはそれほど美しくありません。主に実装するのは関数
です。まず本文でコンポーネント
<body> <input type = "button" class = "btn" id = "start" value = "开始"> <input type = "button" class = "btn" id = "stop" value = "停止"> <p id = "number" class = "box1"></p> <p id = "jiangpin" class = "box2"></p> </body>
を定義し、次にスタイルを設定します。
CSS コード:
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.btn{
width: 90px;
height: 40px;
background-color: lightgreen;
color: white;
font-size: 18px;
font-family: "微软雅黑";
text-align: center;
line-height: 40px;
}
.box1{
position: absolute;
width: 230px;
height: 100px;
margin: 10px 50px;
top:150px;
left: 60%;
background-color: gold;
color: black;
border-radius: 8%;
font-size: 30px;
text-align: center;
line-height: 100px;
}
.box2{
position: absolute;
width: 230px;
height: 100px;
margin: 10px 50px;
top: 300px;
left: 60%;
background-color: gold;
color: black;
border-radius: 8%;
font-size: 30px;
text-align: center;
line-height: 100px;
}
</style>次のステップは関数を書くことです。ここで引用するのは「http://libs.baidu.com/jquery/1.9.0/jquery.js」のjQueryライブラリです。
<script >
$(document).ready(function(){
// 1. 首先第一步定义两个数组，存放人员和奖品
var list1 = [ 'A君' , ' B君 ' , ' C君 ' , ' D君 ', ' E君 ' , ' F君 ' , ' G君 '];
var list2 = ['YSL', ' iphone7', ' iphone6', ' 手表', ' 小红花', ' 谢谢参与',' 谢谢参与',' 谢谢参与'];
// 2. 为开始按钮绑定点击事件
$("#start").click(function(){
//2.1 先将奖品的盒子中的内容初始化
$("#jiangpin").html("等待抽奖中...");
//2.2 利用setInterval()函数进行人员名字切换
// 定义一个变量去接受它每次的状态
functionId = setInterval(function(){
var n = Math.floor(Math.random() * list1.length);
$("#number").html(list1[n]);
},30);
});
// 3. 为停止按钮绑定点击事件
$("#stop").click(function(){
// 3.1 清除setInterval()。并停止在最后一次的人员名上
clearInterval(functionId);
// 3.2 随机产生奖品数组的下标，并将下标对应的元素写入奖品区
var jiang = Math.floor(Math.random() * list2.length);
$("#jiangpin").html(list2[jiang]);
});
})
</script>このケースは比較的単純なので、詳細は説明しません。最終的なレンダリングを以下に添付します。
これは、開始ボタンをクリックした後の担当者の名前のクイック切り替えです。
以下は、停止ボタンをクリックした最終勝者と対応する賞品です
関連する推奨事項:
jQuery+PHP によるサイコロ宝くじゲームの実装例、jquery dice_PHP チュートリアル
JSデジタル宝くじゲームの実装方法_javascriptスキル
ビッグカルーセル宝くじゲームのjs実装例_javascriptスキル
jQuery、PHP、Mysqlによる宝くじプログラムの実装例詳細解説
以上がjQuery はシンプルな宝くじゲーム技術の共有を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7549
15
1382
52
83
11
22
90
Nvgpucomp64.dll は Windows PC ゲームをクラッシュさせます。
Mar 26, 2024 am 08:20 AM
Nvgpucomp64.dll が原因でゲームが頻繁にクラッシュする場合は、ここで提供される解決策が役立つ可能性があります。この問題は通常、グラフィック カード ドライバーが古いか破損していること、ゲーム ファイルが破損していることなどが原因で発生します。これらの問題を修正すると、ゲームのクラッシュに対処するのに役立ちます。 Nvgpucomp64.dll ファイルは、NVIDIA グラフィックス カードに関連付けられています。このファイルがクラッシュすると、ゲームもクラッシュします。これは通常、LordsofttheFallen、LiesofP、RocketLeague、ApexLegends などのゲームで発生します。 N の場合、Nvgpucomp64.dll が Windows PC 上のゲームをクラッシュさせる
スーパーピープル ゲームのダウンロードとインストール方法の紹介
Mar 30, 2024 pm 04:01 PM
superpeople ゲームは、steam クライアントを通じてダウンロードできます。このゲームのサイズは約 28G です。ダウンロードとインストールには通常 1 時間半かかります。ここでは、具体的なダウンロードとインストールのチュートリアルを紹介します。グローバルクローズドテストへの新しい申請方法 1) Steamストア(Steamクライアントダウンロード)で「SUPERPEOPLE」を検索 2) 「SUPERPEOPLE」ストアページ下部にある「SUPERPEOPLEクローズドテストへのアクセスをリクエスト」をクリック 3) request accessボタン、Steamライブラリで「SUPERPEOPLECBT」ゲームが確認できます 4)「SUPERPEOPLECBT」内のインストールボタンをクリックしてダウンロード
win11のスパイダーソリティアはどこにありますか win11でスパイダーソリティアゲームをプレイする方法
Mar 01, 2024 am 11:37 AM
AAA の傑作やモバイル ゲームを十分にプレイした友人の皆さん、子供の頃のコンピューター ゲームを追体験してみませんか?それでは、Windows 11 のスパイダー ソリティアを一緒に探してみましょう!インターフェイスの [スタート] メニューをクリックし、[すべてのアプリ] ボタンをクリックし、[すべてのアプリ] をクリックします。 Microsoft のソリティア シリーズ ゲーム アプリケーションである「MicrosoftSolitaireCollection」を見つけて選択します; ソリティア シリーズ ゲームの選択。ロードが完了したら、選択インターフェイスに入り、「スパイダー ソリティア」を見つけて、「スパイダー ソリティア」を選択します。インターフェースは若干変更されていますが、以前と同じです。
ASUS、Intelの第13/14世代プロセッサーでのゲームの安定性を向上させるBIOSアップデートをリリース
Apr 20, 2024 pm 05:01 PM
4月20日の当サイトのニュースによると、ASUSは最近、Intelの第13/14世代プロセッサでゲームを実行する際のクラッシュなどの不安定性を改善するBIOSアップデートをリリースしたとのこと。同サイトは以前、バンダイナムコの格闘ゲーム「鉄拳8」のPCデモ版を実行すると、コンピュータに十分なメモリとビデオメモリがある場合でもシステムがクラッシュし、メモリ不足を示すエラーメッセージが表示されるなどの問題がプレイヤーから報告されたと報告していた。同様のクラッシュの問題は、「バトルフィールド 2042」、「レムナント 2」、「フォートナイト」、「ロード オブ ザ フォールン」、「ホグワーツ レガシー」、「ザ ファイナル」などの多くのゲームでも発生しています。 RADは今年2月に長い記事を公開し、ゲームクラッシュの問題はBIOS設定、高いクロック周波数、Intelプロセッサの高い消費電力の組み合わせであると説明した。
Win11でゲームをプレイするときに入力メソッドを無効にする方法
Mar 15, 2024 pm 02:40 PM
最近、一部の友人が、ゲームをプレイするときに頻繁にインプット メソッドを押してしまい、ゲーム エクスペリエンスに大きな影響を与えていると報告しています。ここでは、Win11 でゲームをプレイするときにインプット メソッドを無効にする方法を詳しく紹介します。友達が来て見に行くことができます。無効化方法: 1. 右下隅のタスクバーにある入力方式アイコンを右クリックし、リストから「言語設定」を選択します。 2. 新しいインターフェースに入ったら、「優先言語を追加」オプションをクリックします。 3. ポップアップウィンドウで「英語 (米国)」を選択します。 4. もう一度「次へ」をクリックします。 5. 次に、必要に応じていくつかのオプションをインストールするかどうかを選択します。 6. 次に「インストール」をクリックし、インストールが完了するまで待ちます。 7. 次に、右下隅の入力方法ステータス バーをクリックし、「英語 (
PS5 Proへの道筋をつける『No Man's Sky』アップデートコードがゲーム機の開発コード名「Trinity」と画質設定ファイルに「驚いた」
Jul 22, 2024 pm 01:10 PM
7月22日の当サイトのニュースによると、海外メディアtwistedvoxelは、『No Man's Sky』の最新「World Part 1」アップデートコード内に噂のPS5開発コードネーム「Trinity」と関連画質設定ファイルを発見し、ソニーがPS5Proモデルが最近発売されました。 「No Man's Sky」は最近のアップデートでゲームのグラフィックス性能を強化しましたが、多くのプレイヤーは、これがHelloGamesが事前に新しいモデルへの道を切り開いているのではないかとまだ信じています。最新のグラフィックスプリセットによると、PS5 Proのゲームの動的解像度は異なります。スケーリングは 0.6 から 0.8 に増加しました。これは、ゲームの平均解像度が高く、一部のグラフィックの詳細が「高」レベルから「超」レベルにアップグレードされていることを意味します。
Excel宝くじアプレットの作り方
Mar 20, 2024 am 11:40 AM
私たちは日々の仕事の中で、くじを引く必要があることがたくさんありますが、従来は紙の数字を使ってランダムに数字を引く方法が主流でしたが、電子ソフトの発達により、コンピュータを使ってくじを引くことができるようになりました。今日はExcel宝くじアプレットの作り方です。 1. まず、Excel ソフトウェアを開き、作成したテーブルを開きます (テーブルには私たちの名前が含まれている必要があります)。 2. 次に、下図に示すように、右側のセルを結合して、今夜幸運な人を黒で塗りつぶし、下のセルを結合して赤で塗りつぶします。 3. 次に、下の図に示すように、赤い領域に randbetween 関数を入力し、最初の行を 2 に、最後の行を 7 に設定します。 4. 次に、前に ind を入力します。
Apple携帯ゲームのマイク許可をオンにする方法を解説
Mar 22, 2024 pm 05:56 PM
1. 電話機の設定で[プライバシー]をクリックします。 2. [マイク]オプションをクリックします。 3.マイク権限の設定が必要なゲームアプリの右側にあるスイッチをオンにします。
