WeChat ミニプログラム 宝くじ番号ジェネレーター

WeChat ミニプログラム 宝くじ番号ジェネレーター

この記事では、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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 福祉宝くじラッキーナンバー自動生成器

<<:  Nginxドメイン名転送のhttpsアクセスの実装

>>:  Vue+Router+Element でシンプルなナビゲーションバーを実装する

推薦する

jsのイベントオブジェクトを深く理解しましょう

JS でよく使用されるイベントは次の通りです。ページイベント: load;フォーカス イベント: フ...

77.9K の GitHub リポジトリを持つ Axios プロジェクト: 学ぶ価値のあることは何でしょうか?

目次序文1. Axiosの紹介2. HTTPインターセプターの設計と実装2.1 インターセプターの紹...

シンプルなCSSアニメーションのtransition属性の詳しい説明

1. 遷移属性の理解1. transition 属性は、次の 4 つの遷移プロパティを設定するために...

threejs でリアルタイムポリゴン屈折を実装する方法

目次序文ステップ1: セットアップと前方屈折ステップ2: 反射とフレネル方程式ステップ3: 多面屈折...

VueにExcelテーブルプラグインを導入する方法

この記事では、Excelテーブルプラグインを導入するVueの具体的なコードを参考までに共有します。具...

Nofollowはコメントやメッセージ内のリンクを本当に機能させる

コメントとメッセージはもともと、ウェブマスターがコミュニティと読者層を構築するための優れた手段でした...

Vueカスケードドロップダウンボックスの設計と実装

目次1. データベース設計2. フロントエンドページ3. 完全なデモフロントエンド開発では、カスケー...

フレームセットの高さを設定する際のインターフェース変形の解決策

現在、プロジェクトを作成しました。インターフェースは次のとおりです。これはフレームセットを使用して行...

画像ボタンをフォームのリセットボタンとして使用する方法

フォームを作成するときに、送信ボタンとリセットボタンを配置することがよくあります。ページの外観を考慮...

よくある MySQL 設計エラーをご存知ですか?

インターネットの発達により、バスを待ったり地下鉄に乗ったりする時間など、断片的な時間を活用して、いつ...

docker compose を使ってワンクリックで分散構成センター Apollo を展開するプロセスの詳細な説明

導入分散について話すときは、分散構成センター、分散ログ、分散リンク トラッキングなどについて考える必...

Reactはいくつかの方法でパラメータを渡します

目次親コンポーネントと子コンポーネント間でパラメータを渡すルーティングパラメータステータスの改善コン...

Nginx タイムアウト設定の詳細な説明

最近、プロジェクトで nginx を使用し、バックエンドで Java を使用しました。バックエンドで...

Ubuntuでネットワークルーティングテーブルを表示する方法

Linux におけるルーティングとルーティング テーブルとは何ですか?ルーティングのプロセスとは、ネ...

CSS3+JavaScript を使用したクールな呼吸効果のサンプル コード

CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...