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 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

推薦する

JavaScript におけるさまざまなバイナリオブジェクトの関係の詳細な説明

目次序文さまざまなオブジェクト間の関係配列バッファ型付き配列Uint8ClampedArray文字間...

MySQL の if 関数の正しい使い方の詳細な説明

今日私が書こうとしている内容では、プログラムは 7 時間近く実行され、データベースに 1,000 万...

MySQL mysqladmin クライアントの使用の概要

目次1. サーバーの状態を確認します。 2. ルートパスワードを変更します。 3. mysqlser...

MySQL をインストールした後に調整する必要がある 10 のパフォーマンス設定項目

このブログでは、MySQL データベースをインストールした後に調整することが推奨される 10 のパフ...

JavaScript でオブジェクトをエレガントに扱う 6 つの方法

目次序文1. オブジェクト.freeze() 2. オブジェクト.seal() 3. オブジェクト....

Dockerを使用してAngularプロジェクトをデプロイする方法

Docker を使用して Angular プロジェクトをデプロイする方法は 2 つあります。1 つは...

CSS 共通スタイルで二重矢印を描画するサンプルコード

1. 単一の矢印への複数の呼び出し単一の矢印を実装したら、二重矢印を実装するのは簡単です。上では、単...

CentOS8でのDockerの使い方の詳しい説明

1. CentOS8でのDockerのインストール カール https://download.doc...

Windows 10 で MySQL を完全に削除してアンインストールする方法

序文この記事では、Windows 10 システムで MySQL を完全に削除してアンインストールする...

星のきらめき効果を実現するネイティブ js

この記事の例では、星のきらめき効果を実現するためのjsの具体的なコードを共有しています。具体的な内容...

Reactイベントスロットリング効果が失敗する理由と解決策

目次ここでの問題は次の通りです:解決策1:解決策2: コンストラクタで初期化を割り当てる採掘場の概要...

Linux 上でプロジェクトをリリースするために Tomcat を展開するプロセスにおけるさまざまな問題と解決策

プロジェクトをプロジェクトサイトのテスト環境にデプロイするJDK1.8トムキャット8.5 Maven...

Docker Compose を使用して nginx のロード バランシングを実装する方法

Dockerネットワーク管理とコンテナIP設定に基づいてNginxロードバランシングを実装するすべて...

React イベントバインディングの詳細

目次クラスコンポーネントイベントバインディング関数コンポーネントイベントバインディング要約するRea...

js でクラスセレクターと名前属性セレクターを実装する手順の例

jQuery の登場により、DOM の操作効率が大幅に向上し、開発がより高いレベルに引き上げられまし...