Vueは宮殿グリッド回転抽選(CrossFireのxx転生に似ている)を実装しています。参考までに、具体的な内容は次のとおりです。 これ以上の説明はせずに、すぐにコードを見てみましょう。キーコードはコメント化されており、理解しやすいです。コピーして使用するだけ!
<テンプレート> <div class="home"> <div class="ホームコンテナ"> <div class="home-container-line"> <div クラス="ホームコンテナラインボックス" v-for="リスト内の項目.slice(0, 5)" :key="アイテム.インデックス" :class="{ 選択: item.active }" > {{item.label}} </div> </div> <div class="home-container-line"> <div クラス="ホームコンテナラインボックス" v-for="リスト内の項目.スライス(11, 12)" :key="アイテム.インデックス" :class="{ 選択: item.active }" > {{item.label}} </div> <div class="home-container-line-btn" @click="handleClick" :disable="isAnimate"></div> <div クラス="ホームコンテナラインボックス" v-for="リスト内の項目.スライス(5, 6)" :key="アイテム.インデックス" :class="{ 選択: item.active }" > {{item.label}} </div> </div> <div class="home-container-line"> <div クラス="ホームコンテナラインボックス" v-for="Array.prototype.reverse.call(list.slice(6, 11)) 内の項目" :key="アイテム.インデックス" :class="{ 選択: item.active }" > {{item.label}} </div> </div> </div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 「ラッキー」 データ() { 戻る { リスト: [ { ラベル: "勝てない", 値: 1, 画像: "", インデックス: 0, アクティブ: false }, { ラベル: "ヘルスケア", 値: 2, 画像: "", インデックス: 1, アクティブ: false }, { ラベル: "iPhone13", 値: 3, 画像: "", インデックス: 2, アクティブ: false }, { ラベル: "MacBook Pro", 値: 4, 画像: "", インデックス: 3, アクティブ: false }, { ラベル: "MacBook Air", 値: 5, 画像: "", インデックス: 4, アクティブ: false }, { ラベル: "1 ポイント", 値: 6, 画像: "", インデックス: 5, アクティブ: false }, { ラベル: "5 ポイント", 値: 7, 画像: "", インデックス: 6, アクティブ: false }, { ラベル: "10 ポイント", 値: 8, 画像: "", インデックス: 7, アクティブ: false }, { ラベル: "シャオアイ", 値: 9, 画像: "", インデックス: 8, アクティブ: false }, { ラベル: "安木西ヨーグルト", 値: 10, 画像: "", インデックス: 9, アクティブ: false }, { ラベル: "ショッピングカートをクリア"、値: 11、画像: ""、インデックス: 10、アクティブ: false }、 { label: "50元の電話代", val: 12, img: "", index: 11, active: false }, ]、 isAnimate: false, // true は抽選が進行中であることを意味します。現在の抽選が終了する前に抽選ボタンをクリックすることは無効です jumpIndex: Math.floor(Math.random() * 12), // 抽選ジャンプのインデックス jumpingTime: 0, // ジャンプの時間 jumpingTotalTime: 0, // ジャンプの合計時間。duration 変数に 0 から 1000 までの乱数を足した値に基づきます jumpingChange: 0, // ピークジャンプ速度。velocity 変数に 0 から 3 までの乱数を足した値に基づきます duration: 4500, // 期間 velocity: 300, // 速度}; }, メソッド: { ハンドルクリック() { if(this.isAnimate) 戻り値: this.jumpingTime = 0; this.jumpingTotalTime = Math.random() * 1000 + this.duration; this.jumpingChange = Math.random() * 3 + this.velocity; this.animateRound(this.jumpIndex); }, アニメーションラウンド(インデックス) { this.isAnimate = true; this.jumpIndex が this.list.length - 1 の場合、 this.jumpIndex ++ になります。 this.jumpIndex >= this.list.length - 1 の場合、 this.jumpIndex = 0; this.jumpingTime += 100; // 各フレームで setTimeout メソッドを実行するのに費やされた時間 // 現在の時間が合計時間よりも大きい場合は、アニメーションを終了して賞品をクリアします if (this.jumpingTime >= this.jumpingTotalTime) { this.isAnimate = false; if(インデックス == 0) { alert(`賞を取れなかったのは残念ですが、これからも頑張ってくださいね〜`); } それ以外{ alert(`おめでとうございます。${this.list[index].label} を描きました`) } 戻る } // 回転アニメーション if (index >= this.list.length-1) { インデックス = 0; this.list[11].active = false; this.list[インデックス].active = true; インデックス -= 1; } それ以外 { this.list[インデックス].active = false; this.list[インデックス + 1].active = true; } タイムアウトを設定する(() => { this.animateRound(インデックス + 1); }, this.easeOut(this.jumpingTime, 0, this.jumpingChange, this.jumpingTotalTime)); }, /** * 速いものから遅いものへのイージング関数* @param {Num} t 現在の時間* @param {Num} b 初期値* @param {Num} c 変更値* @param {Num} d 期間*/ イーズアウト(t, b, c, d) { ((t /= d / 2) < 1) の場合、(c / 2) * t * t + b を返します。 (-c / 2) * (--t * (t - 2) - 1) + b を返します。 }, }, }; </スクリプト> <style lang="scss" スコープ> 。中心 { ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 } 。家 { パディング: 0; マージン: 0; 幅: 100%; 高さ: calc(100vh - 16px); 背景画像: 線形グラデーション(25度, #30007c, #464995, #4d83ad, #41bfc4); .center を拡張します。 &-容器 { 幅: 1000ピクセル; 高さ: 600px; &-ライン { 幅: 100%; 高さ: 198px; ディスプレイ: フレックス; &-箱 { フレックス: 1; オーバーフロー: 非表示; マージン: 5px 3px 5px 3px; .center を拡張します。 背景: #fff; 遷移: すべて .3; } &-btn { 位置: 相対的; フレックス: 3; オーバーフロー: 非表示; マージン: 5px 3px 3px 3px; .center を拡張します。 ボックスの影: 0 1px 10px 0px #cf5531; 背景画像: 線形グラデーション( 25度、 #cf5531、 #d0853a, #cdaf43, #c4d84d ); カーソル: ポインタ; &:アクティブ { 背景画像: 線形グラデーション( 25度、 #3f3e41, #6d6340, #9a8b39, #c9b629 ); } &::前に { 位置: 絶対; 内容: 「クリックして賞品を獲得」 フォントサイズ: 2.5rem; 色: #fff; フォントの太さ: 太字; } } } } } .選択された{ 背景: rgba($color: #f6e58d, $alpha: 0.5); アニメーション名: twinkle; アニメーション期間: 3秒; アニメーションの反復回数: 無限; } @keyframes きらめき { 0% {背景:#ffbe76;} 100% {背景:#f6e58d;} } </スタイル> 効果画像: 最後に、確率は完全にランダムであることを指摘しておきます。今のところ当選確率を調整するのに特にいいアイデアはありません。もっといいアイデアがあれば、ぜひ一緒に議論しましょう。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CSSはラジオをクリックして2つの画像スタイルを切り替えますが、複数のラジオのうち1つだけをチェックできます。
>>: Docker で Confluence をデプロイする
InnoDB REDO ログ ファイルのサイズと数を調整する場合は、次の手順に従います。 1. My...
Word of Mouth に入社して 3 ~ 4 か月が経ちました。仕事の中で一番の収穫は、ビジュ...
目次実生活からの例クエリが遅い最適化する方法カウント制限最大値と最小値 min&max実生活...
この記事の例では、Vue Element UIカスタム説明リストコンポーネントの具体的なコードを参考...
目次オブジェクトをマージするさまざまな方法(インターフェースを通じてデータを取得し、それをローカル ...
みなさんこんにちは、今日はウェブフロントエンドのHTMLを見ていたら、inputタグのtype属性が...
次のような初期コードがあると仮定します。 <!DOCTYPE html> <htm...
序文今日、注文データを同期した後、同僚は、合計注文金額とデータソースの合計金額に差があったため、LI...
成果を達成する実装コードhtml <base href="https://s3-us...
目次1. はじめに2. 本文2.1 Where句の位置2.2 演算子2.3 NULL値1. はじめに...
最近、仕事中に問題が発生しました。Docker コンテナがホストの redis にアクセスできず、t...
ブランクのブログ: http://www.planabc.net/ innerHTML プロパティは...
目次序文1. エラーログ2. バイナリログ1. バイナリログを有効にする2. バイナリログ形式3. ...
毎回インストールチュートリアルを探すのは面倒なので、後で確認できるように手順をバックアップします。解...
最近、Docker イメージのプルが非常に不安定です。遅く、タイムアウトすることがよくあります。 x...