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

推薦する

MySQL 中断された接続警告ログの分析

序文:場合によっては、MySQL に接続されたセッションが異常終了することが多く、エラー ログに「通...

Reactフックとzarmコンポーネントライブラリ構成に基づいてh5フォームページを開発するためのサンプルコード

最近、React Hooks を zarm コンポーネント ライブラリと組み合わせて使用​​し、js...

Linuxはシェルスクリプトを使用して履歴ログファイルを定期的に削除します

1. ツールディレクトリのファイル構造 [root@www tools]# ツリーツール/ ツール/...

JavaScript+html はフロントエンドページでランダム QR コード検証を実装します

クールなフロントエンドページのランダムQRコード検証を参考までに共有します。具体的な内容は次のとおり...

JSはjQueryのappend関数を実装します

目次コードを見せてください効果をテストする効果追伸別のアプローチコードを見せてください HTMLEl...

CSS3 のテキストとフォントの新しい設定

テキストシャドウテキストシャドウ: 水平オフセット 垂直オフセット ぼかし色互換性: IE10+ &...

MySQL、Oracle、SQL Server のページングクエリ例の分析

最近、Oracle、MySQL、SQL Server 2005 のデータ ページング クエリについて...

Web ページでの Unicode 文字の使用の概要 (&#、\u など)

初期のコンピュータでは ASCII 文字しか使用できませんでしたが、コンピュータのアプリケーションの...

Windows 10 で MySQL の解凍バージョンをインストールする方法の詳細なグラフィック チュートリアル

MySQL のインストールは、インストール バージョンと解凍バージョンに分かれています。インストール...

Vueは遅延読み込みによりページの応答速度を向上

目次概要遅延読み込みとは何ですか?最適化を開始するビジネスモジュールを分割する遅延読み込みルート構成...

Linux で LVGL エミュレータをコンパイルする際のエラーの解決方法

目次1. エラー現象2. エラー分析3. エラー解決1. エラー現象仮想マシンでLVGLエミュレータ...

CSS の記述基準と順序を共有する [すべての人に使用を推奨]

CSSの記述順序1. 位置属性(位置、上、右、z-index、表示、フロートなど) 2. サイズ(...

MySQL 8.0.12 のインストールと環境変数の設定チュートリアル (Win10 の場合)

Windows 10 プラットフォームでの MySQL のインストール、構成、起動、ログイン、環境...

分散監視システムにおけるZabbixのアクティブ、パッシブ、Web監視のプロセスの詳細な説明

前回の記事では、Zabbix のネットワーク検出機能について学習し、アクションと組み合わせてホストの...

MySQL 8.0.20 のインストールと設定の詳細なチュートリアル

この記事では、MySQL 8.0.20のインストールと設定方法についての詳細なチュートリアルを参考ま...