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

推薦する

Node.js で MySQL データベースにバッチデータを挿入する方法

プロジェクト(nodejs)では、一度に複数のデータをデータベースに挿入する必要があります。データベ...

Webフロントエンドツール、Sublime Text 2の紹介

Sublime Text 2 は、軽量でシンプル、効率的なクロスプラットフォーム エディターです。ブ...

Windows での MySQL の使用: 自動スケジュールバックアップの実装

1. バックアップスクリプトを書く 著者:www.yumi-info.com 日付:20171222...

SHTML 簡潔なチュートリアル

SHTMLとASPは似ています。SHTMLという名前のファイルでは、SSIの命令がASPの命令と同じ...

MySQLをシンプルに学ぶ

序文データベースは常に私の弱点でした。自分の経験 (python+sqlalchemy) を組み合わ...

js でパズルゲームを実装する

この記事では、パズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容は...

Windows 7 64 ビットに最新バージョンの MySQL サーバーをインストールする方法のグラフィック チュートリアル

最近、MySQL データベースを勉強していて、設定ファイルを頻繁に変更したため、MySQL データベ...

vue3+TypeScript+vue-routerの使い方

目次使いやすいプロジェクトを作成するvue-cli 作成ヴィートクリエイションvue-routerを...

Vue v-for ループを書く 7 つの方法

目次1. v-forループでは常にキーを使用する2. 特定のスコープ内でv-forループを使用する3...

SQL グループ化により重複を削除し、他のフィールドで並べ替える

必要:あるフィールドの同一項目を結合し、別の時間フィールドで並べ替えます。例:初めに テーブルから都...

クラスタrpmを使用してMySQLをインストールするための詳細な手順

MySQLデータベースをインストールするa) MySQL ソースインストールパッケージをダウンロード...

1つの記事でTypeScriptのデータ型について学ぶ

目次基本タイプあらゆるタイプ配列タプルインタフェース関数自己推論を入力する結合タイプ(1つ以上選択)...

LinuxカーネルとSVNバージョン間の競合の解決策

現象システムは Linux システムカーネルを正常にコンパイルできましたが、SVN をインストールし...

mysqlサーバーは--skip-grant-tablesオプションで実行されています

MySQLサーバーは--skip-grant-tablesオプションで実行されているため、このステー...

CSSアニメーションに基づくSVGボタンのサンプルコード

具体的なコードは次のとおりです。 <a href="#"> <...