この記事では、サイコロゲームを実装するためのWeChatアプレットの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 ページコード <view class='top'>{{txt}}</view> <ビュークラス='point1'> <画像 src='{{one_img}}'></画像> </ビュー> <ビュークラス='point2'> <画像 src='{{two_img}}'></画像> <画像 src='{{three_img}}'></画像> </ビュー> <view class='btn' bindtap='enter'>{{msg}}</view> スタイルコード 。トップ{ 幅: 220ピクセル; 高さ: 30px; フォントサイズ: 25px; マージン: 20px 自動; } .point1 画像、.point2 画像{ 幅: 150ピクセル; 高さ: 150px; } .point1 画像{ 表示: ブロック; マージン:45px 自動; } .point2 画像{ 上マージン: -20px; 左マージン: 25px; } .btn{ 幅:100%; 高さ:60px; 背景:緑; 境界線の半径: 10px; 行の高さ: 60px; テキスト配置: 中央; フォントサイズ: 30px; 上マージン: 60px; } jsコード //index.js //アプリケーションインスタンスを取得する const app = getApp() ページ({ データ: { one_img:'../../image/6-point.png', two_img: '../../image/6-point.png', three_img: '../../image/6-point.png', フラグ:true、 タイマー:null、 メッセージ:「振って」 合計:0, txt:'おめでとうございます、獲得点数: 0', //画像素材とレンダリングは下部に掲載されます arr:[ '../../image/1-point.png', '../../image/2-point.png', '../../image/3-point.png', '../../image/4-point.png', '../../image/5-point.png', '../../image/6-point.png', ] }, 入力:関数(イベント){ obj = this とします。 if(obj.data.flag==true){ obj.data.timer = setInterval(関数() { 1 = Math.floor(Math.random() * 6); とします。 2をMath.floor(Math.random() * 6)とします。 three = Math.floor(Math.random() * 6); とします。 obj.setData({ one_img: obj.data.arr[one], two_img: obj.data.arr[two], three_img: obj.data.arr[three], フラグ:false、 メッセージ: '停止', 合計:1+2+3+3、 // 合計: 18, TXT:''、 }) }, 50); }それ以外{ タイマー間隔をクリアします。 obj.setData({ //one_img: obj.data.arr[5], //2つの画像: obj.data.arr[5], //three_img: obj.data.arr[5], メッセージ:「振って」 フラグ:true、 txt:'おめでとうございます、勝ちました:' + obj.data.total, }) } }, }) 画像資料とレンダリング 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: VirtualBox を使用して Linux クラスターをシミュレートする方法
>>: Windows で MySQL インストーラーを使用して MySQL サービスをインストールするチュートリアル図
最近、WeChatはAppleによってダークモードの開発を強制されました。ますます多くのウェブサイト...
目次環境の準備環境の準備mariadbをアンインストールする rpm -qa | grep mari...
1.まずサーバーにリモート接続する2. サーバーマネージャーを開く 3役割と機能の追加 4サーバープ...
序文:データベースを日常的に使用すると、パスワードが単純すぎて変更する必要がある場合、パスワードの有...
この記事では、ビデオプレイリストを実装するためのvue + video.jsの具体的なコードを参考ま...
目次Vue CLIはVueプロジェクトを構築しますVue プロジェクトをマークダウン エディターに変...
jQuery を使用してフェードインとフェードアウト効果を完成させる前に、まずいくつかのコードを理解...
目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...
4 つのネットワーク タイプ:なし: コンテナのネットワーク機能を一切設定しません。--net=no...
1. Reactでクラス宣言する際のヒント 上記のように、Child クラスは class キーワー...
フィルターとバックドロップフィルターにはいくつかの違いがあります。フィルターは現在の要素だけでなく、...
かなり前に仮想マシンをインストールしましたが、ようやく Linux をインストールしました。マシンの...
目次FTP、FTPS、SFTP の概要FTP FTPS FTPサーバーFTPソフトウェアのアクティブ...
フォームを作成するときに、名前、携帯電話番号、出生地などの 2 つのフィールドを揃える状況に遭遇する...
1. テーブル リセットの 2 つのプロパティ: ①border-collapse: collaps...