この記事では、WeChatアプレットの宝くじ番号ジェネレータの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 1. 事例の説明7 つの宝くじ番号 (1 ~ 31) のメモを生成し、円形のアイコンに表示する小さなプログラムを設計します。また、クリックするたびに再生成され、さまざまな色の円形アイコンも生成されるボタンも設計します。 2. ケースコード1) index.wxml ファイル <!--index.wxml--> <image src="/image/caipiao.png" style="width: 750rpx; height: 256rpx; display: inline-block; box-sizing: border-box; left: NaNrpx; top: NaNrpx"></image> <ビュークラス="ボックス"> <view class="title">宝くじジェネレーター</view> <view>生成された抽選シーケンス:</view> <view wx:for="{{rand}}">{{item}}</view> </ビュー> <ビュークラス="コンテキスト"> <view class="item" style="background-color: {{color1}};">{{a}}</view> <view class="item" style="background-color: {{color2}};">{{b}}</view> <view class="item" style="background-color: {{color3}};">{{c}}</view> <view class="item" style="background-color: {{color4}};">{{d}}</view> <view class="item" style="background-color: {{color5}};">{{e}}</view> <view class="item" style="background-color: {{color6}};">{{f}}</view> <view class="item" style="background-color: {{color7}};">{{g}}</view> </ビュー> ================================== <button type="primary" bindtap="newRand">新しい宝くじ番号を生成する</button> 2) index.wxss ファイル /**index.wxss**/ 。箱{ マージン: 20rpx; パディング: 20rpx; 境界線: 3px 破線 rgb(248, 72, 2); 背景色: rgba(110, 144, 216, 0); } 。タイトル{ フォントサイズ: 30px; テキスト配置: 中央; 下部マージン: 15px; 色: rgb(59, 15, 252); } 。コンテクスト{ ディスプレイ: フレックス; テキスト配置: 中央; 行の高さ: 100rpx; フォントの太さ: 太字; 色: rgb(28, 3, 56); } 。アイテム{ フレックス成長: 1; 境界線の半径: 50px; } 3) index.js ファイル // インデックス.js var ランド; 関数createRand(){ ランド=[]; (var i=0;i<7;i++){ var r = 0; while(r==0){ r = parseInt (Math.random() * 32); } // ゼロ以外の数値を生成する r=(r/Math.pow(10,2)).toFixed(2).substr(2) // 生成される数値が2桁になるように制御し、1桁の数値の前に「0」を追加する ランド[i]=r; (var j=0;j<i;j++){ (rand[j]==r){i=i-1;}の場合 } // 以前に生成された数値が重複していないことを確認します console.log(rand[i]); } }; ページ({ 色の作成:関数(){ var color = []; var 文字 = "0123456789ABCDEF"; (var i=0;i<7;i++){ var c="#"; (var j=0;j<6;j++){ c+=文字[Math.floor(Math.random()*16)] } color.push(c); // ランダムに色を生成する} コンソールログ(色); this.setData({ 色1:色[0], 色2:色[1], 色3:色[2], 色4:色[3], 色5:色[4], 色6:色[5], 色7:色[6] }) }, //カラー読み込み onLoad:function(){ ランダムオブジェクトを作成します。 this.CreateColor(); this.setData({ ランド:ランド、 a:rand[0], b:ランド[1], c:rand[2], d:ランド[3], e:rand[4], f:rand[5], g:ランド[6], }) }, 新しいRand:関数(){ ランダムオブジェクトを作成します。 this.CreateColor(); this.setData({ ランド:ランド、 a:rand[0], b:ランド[1], c:rand[2], d:ランド[3], e:rand[4], f:rand[5], g:ランド[6], }) }, }) 注意: この場合、生成される抽選番号は前の番号と重複できず、生成される番号は 1 ~ 31 であるため、番号「0」は出現できません。 3. ケースのスクリーンショット4. 分析とまとめindex.wxml ファイル コードでは、7 つの「カラフルなボール」のインターフェイス デザインが、1 つのビュー内に 7 つのビュー コンポーネントをネストすることによって実装されています。下にボタン コンポーネントを追加します。このコンポーネントはクリック イベントをバインドして新しい宝くじ番号を生成します。 index.js ファイルでは、乱数シーケンスを生成するために createRand() 関数が定義されています。この関数は最初に for ループを使用して 7 つの乱数を生成し、これらのデータを配列に追加します。 Math.random() 関数は、0 から 1 までの乱数を生成するために使用されます。Math.random()*32 は、0 から 32 までの乱数を生成できます。(r/Math.pow(10,2)).toFixed(2).substr(2) は、ランダムに生成された r を 2 桁の数字になるように制御し、1 桁の数字の前に「0」を追加できます。 定義された onLoad 関数と newRand 関数は、this.sarData() メソッドを通じて結果をビュー レイヤーにレンダリングします。 この場合も、JavaScript でランダムな色を作成します。色を作成する設計アイデアは、Math.random() および Math.floor() 関数を使用して、色を構成する 16 個の 16 進文字 (0 ~ F) から 6 文字をランダムに見つけて色を形成することです。6 文字を 7 回続けて見つけると、7 つのランダムな色を生成できます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Vue+Router+Element でシンプルなナビゲーションバーを実装する
目次1. MySQLレプリケーション関連の概念2. シンプルな1マスター1スレーブアーキテクチャの実...
目次序文vue.config.js 構成オプションパッケージサイズを縮小するためのパッケージの最適化...
概要zabbix バージョン 5.0 以降では、zabbix-agent2 という新しい機能が追加さ...
メタ属性には、name と http-equiv の 2 つがあります。 name 属性は主に、We...
情報を探すインターネットで見つかったいくつかの方法: autocomplete="off&...
1. 公式MySQL Yumリポジトリをダウンロードしてインストールする 実行ファイル: mysql...
この記事では、テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加を行う一般的な ...
目次概要データ URL の使用を開始するデータURL構文複数言語の文字列のBase64エンコードとデ...
画像をプルする root@EricZhou-MateBookProX: docker pull je...
この記事では、VMware 12でのUbuntu 16.04イメージのインストールチュートリアルを参...
独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...
目次序文1. gzip圧縮を設定する2. 詳細設定3. nginxサービスを再起動する要約する序文ウ...
ウェブサイトのフロントエンド開発で発生するセキュリティ問題は、クライアントブラウザで実行されるコード...
MySQL ROLE はどのような問題を解決しますか?プロフェッショナルな資質を持ち、権限管理に細心...
Web デザイン 5 におけるシンプルな XHTML Web フォーム。 テクニック 1: ラベル ...