この記事では、サイコロゲームを実装するための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 サービスをインストールするチュートリアル図
どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...
場合によっては、次のような機能を実装したいことがあります。リンクをクリックします。リンクがブラウザで...
目次1. 覚えておくべき知識1. 変数タイプ2. シェル変数の説明3. シングルクォート、ダブルクォ...
目次1. Vueの概要Vue公式サイトMVVM アーキテクチャ パターンVue の紹介2. Vueを...
この記事では、WeChatミニプログラムのビデオ弾幕の位置をランダム化するための具体的なコードを紹介...
1. レビューMySQL の起動後にバッファ プールが初期化されます。バッファ プールは N 個の空...
目次オブザーバーパターンVue パス値最初のステップは、main.jsにバスを登録することです。 2...
最近、同社は CCFA 関連のいくつかの作業を行う予定で、その 1 つはカメラのリアルタイム監視を再...
Unix ライクなシステムでは、コマンドまたはプロセスの実行がいつ開始されたか、またプロセスがどのく...
1. MySQL Yumリポジトリを追加するMySQL公式サイト>ダウンロード>MySQ...
HTML部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> &l...
1. ビデオタグFirefoxでは自動再生をサポートしますが、GoogleとIEではサポートしません...
序文: Webサービスを提供するために、Alibabaクラウドホストを新しくインストールしました。す...
memcachedをインストールする yum インストール -y memcached #memcac...
問題の説明html <iframe id="h5Content" src=...