JQuery+PHP に基づいて金の卵を勝ち取るプログラムを作成する、jquery Wins

JQuery+PHP に基づいて金の卵を勝ち取るプログラムを作成する、jquery Wins_PHP チュートリアル

WBOY

リリース： 2016-07-13 16:53:57

オリジナル

1109 人が閲覧しました

JQuery+PHP に基づいて金の卵を受賞するプログラムを作成すると、jQuery が賞を獲得します

まず最初に、レンダリングをお見せします:

デモを見るソースコードをダウンロードする

準備

金の卵の写真、砕いた卵の写真、砕いた花の写真、ハンマーの写真など、小道具(素材)、つまり関連する写真を用意する必要があります。

HTML

私たちのページで紹介したいのは、金の卵を割る台です。台には 1、2、3 の番号が付けられた 3 つの金の卵とハンマーがあります。次の HTML コードを構築します:

リーリー

上記のコードでは、.hammer はハンマーを配置するために使用され、.resultTip は卵を砕いた後の結果、つまり賞品があるかどうかを表示するために使用されます。3 つの金の卵をそれぞれ 3 個配置するために使用されます。効果を装飾するには CSS を使用します。

CSS

リーリー

上記のコードによると、ページ上で完全な金の卵を割るシーンが表示されます。顧客がまだ IE6 を使用している場合は、この記事の透明度を調整する必要があるかもしれません。処理を行いません。

jQuery

次に、jQuery コードを使用して、金の卵を砕き、卵を割って、勝利結果を表示するまでのプロセス全体を実現します。もちろん、古いルールでは、たとえば jQuery で実装されたプログラムでは、最初に jQuery ライブラリファイルをロードする必要があります。

まず第一に、マウスを金の卵に向かってスライドさせると、金の卵を砕くために使用されるハンマーは金の卵の右上にのみ配置されます。これはposition()を使用して配置できます。

リーリー

次に、金の卵をクリックします。これは、ハンマーを振って金の卵を叩くプロセスです。まず、click の金の卵の数字を非表示にしてから、カスタム関数 EggClick() を呼び出します。

リーリー

最後に、カスタム関数eggClick()で、jQueryの$.getJSONメソッドを使用して、ajaxリクエストをバックグラウンドのdata.phpに送信します。バックグラウンドのphpプログラムが賞の分配を処理し、受賞結果を返します。 animate() を使用してハンマーを叩くアニメーションを実現し、ハンマーの上と左の位置を変更することで簡単なアニメーション効果を実現します。ハンマーが砕かれた後、金の卵のスタイルが .curr に変わり、金の花が飛び散ります。、その後、当選結果が達成されると、当選するかどうかは運と背景賞によって設定された当選確率に依存することが示されています。金の卵関数eggClick()のコードを見てみましょう:

リーリー

ゴールデンエッグスマッシングプログラムをあなたのウェブサイトにより現実的に組み込むために、卵を割る前に会員ステータスを確認したり、割った卵の数を制限したり、当選後に連絡先情報を残すなどすることができます。それはウェブサイトのニーズによって異なります。。

PHP

data.phpはフロントエンドから送信されたajaxリクエストを処理し、設定された当選確率に従って当選結果をjson形式で出力します。確率計算の例については、PHP+jQuery を使用してフリップ宝くじを実装するを参照してください

リーリー

確率を設定すると、タブレットに当たる確率が 3%、当たらない確率が 50% であることがわかります。デモをクリックして運試ししてください。