WeChatアプレットはふるいを振る効果を実現

WeChatアプレットはふるいを振る効果を実現

この記事では、WeChatアプレットの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

1. 効果図:

2.HTMLコード:

<!--pages/game/game.wxml-->

<view class="text">ふるい点の数は: {{total}}</view>
<view class="point1">
  <画像 src="{{top}}">
  </画像>
</ビュー>
<view class="point2">
  <画像 src="{{left}}"></画像>
  <画像 src="{{right}}">
  </画像>
</ビュー>
<button class='{{btn}}' bindtap='click'>{{texts}}</button>

3.jsコード:

データ: {
    上: "../images/images/1-point.png",
    合計: ''、
    左: "../images/images/2-point.png",
    右: "../images/images/3-point.png",
    btn: '.btnStart',
    テキスト:「シェイクして」
    フラグ: true、
    画像:[
      "../images/images/1-point.png",
      "../images/images/2-point.png",
      "../images/images/3-point.png",
      "../images/images/4-point.png",
      "../images/images/5-point.png",
      「../images/images/6-point.png」

    ]

  },

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
 クリック:関数(){
   var self = this;
   if(this.data.flag){
    
     self.timer = setInterval(関数(){
       var one = Math.floor(Math.random() * 6);
       var two = Math.floor(Math.random() * 6);
       var three = Math.floor(Math.random() * 6);
        自己.setData({          
          上: self.data.img[one],
          左: self.data.img[2],
          右: self.data.img[three],
          合計:1+2+3+3、
          
        })
     },200)
     自己.setData({
       btn: ".btnEnd"、
       テキスト: 「停止」、
       フラグ:false、
     })
     
   } それ以外 {
     タイマー間隔をクリアします。

     自己.setData({
       btn: ".btnStart"、
       テキスト:「シェイクして」
       フラグ: true、


     })

   }
   
 },

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ふるい抽選を実施するミニプログラム

<<:  Linux での MySql centos7 のバイナリコンパイルとインストールに関するチュートリアル

>>:  MySQL 5.7.23 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

推薦する

nginxとバックエンドポート間の競合の解決策

質問: Alice 管理システムを開発しているときに、すべてのバックエンド インターフェイスが最初の...

Vueソースコード解析における仮想DOMの詳しい説明

なぜ仮想DOMが必要なのでしょうか?仮想 DOM はブラウザのパフォーマンス問題を解決するために設計...

VMWare Linux MySQL 5.7.13 のインストールと設定のチュートリアル

この記事では、参考までにVMWare LinuxにMySQL 5.7.13をインストールするチュート...

MySQL の一般的な日付比較および計算関数

MySql での時間比較の実装unix_timestamp() unix_timestamp 関数は...

Nginx をベースに特定の IP への短期アクセス数を制限する

特定の期間内に特定の IP へのアクセス回数を制限する方法は、特に悪意のある DDOS 攻撃に直面し...

MySQLトランザクションを実行するための構文とプロセスの詳細な説明

概要: MySQL は、トランザクションをサポートするためにさまざまなストレージ エンジンを提供しま...

SSM VUE Axios の詳細な説明

目次SQL ログを表示するにはどうすればいいですか? ? SpringMVC でのパラメータ渡しの説...

HTMLフロートの使用法の簡単な分析

float の使用例左サスペンション: float:left;右サスペンション: float:rig...

クラウド決済を実装するWeChatミニプログラムについて

目次1. はじめに2. 思考分析3. クラウド決済のケーススタディ1. クラウド機能1-1. 認証不...

HTML 代替カラーコードを実現する n 通りの方法 サンプルコード

この記事では、主に HTML のサンプル コードを紹介し、次のように交互に色を変更する方法を共有しま...

アコーディオンセカンダリメニューを実装するためのjQueryプラグイン

この記事では、jQueryプラグインを使用してアコーディオンセカンダリメニューを作成します。具体的な...

Linux 上でプライベート Git サーバーを構築するための詳細なチュートリアル

1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...

Dockerバッチコンテナオーケストレーションの実装

導入Dockerfile ビルドの実行は、単一のコンテナの手動操作です。マイクロサービス アーキテク...

CentOS7にNginxをインストールして自動起動を設定する方法

1.公式サイトからインストールパッケージをダウンロードするhttp://nginx.org/en/d...

...